Replace email with name on user profile

api/prisma/migrations/20201105184423-add-name-to-user/README.md

@@ -0,0 +1,43 @@
+# Migration `20201105184423-add-name-to-user`
+
+This migration has been generated by Kurt Hutten at 11/6/2020, 5:44:24 AM.
+You can check out the [state of the schema](./schema.prisma) after the migration.
+
+## Database Steps
+
+```sql
+ALTER TABLE "User" ADD COLUMN     "name" TEXT
+```
+
+## Changes
+
+```diff
+diff --git schema.prisma schema.prisma
+migration 20201101183848-db-init..20201105184423-add-name-to-user
+--- datamodel.dml
++++ datamodel.dml
+@@ -1,7 +1,7 @@
+ datasource DS {
+   provider = ["sqlite", "postgresql"]
+-  url = "***"
++  url = "***"
+ }
+ generator client {
+   provider      = "prisma-client-js"
+@@ -19,11 +19,12 @@
+ //   JSCAD
+ // }
+ model User {
+-  id       String @id @default(uuid())
+-  userName String @unique // reffered to as userId in @relations
+-  email    String @unique
++  id       String  @id @default(uuid())
++  userName String  @unique // reffered to as userId in @relations
++  email    String  @unique
++  name     String?
+   // role should probably be a list [] and also use enums, neither are supported by sqllight, so we need to set up postgresql in dev
+   // maybe let netlify handle roles for now.
+   // role     String @default("user")
+```
+
+

api/prisma/migrations/20201105184423-add-name-to-user/schema.prisma

@@ -0,0 +1,80 @@
+datasource DS {
+  provider = ["sqlite", "postgresql"]
+  url = "***"
+}
+
+generator client {
+  provider      = "prisma-client-js"
+  binaryTargets = "native"
+}
+
+// sqlLight does not suport enums so we can't use enums until we set up postgresql in dev mode
+// enum Role {
+//   USER
+//   ADMIN
+// }
+
+// enum PartType {
+//   CASCADESTUDIO
+//   JSCAD
+// }
+
+model User {
+  id       String  @id @default(uuid())
+  userName String  @unique // reffered to as userId in @relations
+  email    String  @unique
+  name     String?
+  // role should probably be a list [] and also use enums, neither are supported by sqllight, so we need to set up postgresql in dev
+  // maybe let netlify handle roles for now.
+  // role     String @default("user")
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  image    String? // url maybe id or file storage service? cloudinary?
+  bio      String? //mark down
+  Part     Part[]
+  Reaction PartReaction[]
+  Comment  Comment[]
+}
+
+model Part {
+  id          String   @id @default(uuid())
+  title       String
+  description String? // markdown string
+  code        String?
+  mainImage   String? // link to cloudinary
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  user        User     @relation(fields: [userId], references: [id])
+  userId      String
+
+  Comment  Comment[]
+  Reaction PartReaction[]
+  @@unique([title, userId])
+}
+
+model PartReaction {
+  id     String @id @default(uuid())
+  emote  String // an emoji
+  user   User   @relation(fields: [userId], references: [id])
+  userId String
+  part   Part   @relation(fields: [partId], references: [id])
+  partId String
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  @@unique([emote, userId, partId])
+}
+
+model Comment {
+  id     String @id @default(uuid())
+  text   String // the comment, should I allow mark down?
+  user   User   @relation(fields: [userId], references: [id])
+  userId String
+  part   Part   @relation(fields: [partId], references: [id])
+  partId String
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

api/prisma/migrations/20201105184423-add-name-to-user/steps.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.3.14-fixed",
+  "steps": [
+    {
+      "tag": "CreateField",
+      "model": "User",
+      "field": "name",
+      "type": "String",
+      "arity": "Optional"
+    }
+  ]
+}

api/prisma/migrations/migrate.lock

@@ -1,3 +1,4 @@
 # Prisma Migrate lockfile v1
 
 20201101183848-db-init
+20201105184423-add-name-to-user

api/prisma/schema.prisma

@@ -20,9 +20,10 @@ generator client {
 // }
 
 model User {
-  id       String @id @default(uuid())
+  id       String  @id @default(uuid())
-  userName String @unique // reffered to as userId in @relations
+  userName String  @unique // reffered to as userId in @relations
-  email    String @unique
+  email    String  @unique
+  name     String?
   // role should probably be a list [] and also use enums, neither are supported by sqllight, so we need to set up postgresql in dev
   // maybe let netlify handle roles for now.
   // role     String @default("user")

api/src/graphql/users.sdl.js

@@ -3,6 +3,7 @@ export const schema = gql`
     id: String!
     userName: String!
     email: String!
+    name: String
     createdAt: DateTime!
     updatedAt: DateTime!
     image: String
@@ -21,6 +22,7 @@ export const schema = gql`
   input CreateUserInput {
     userName: String!
     email: String!
+    name: String
     image: String
     bio: String
   }
@@ -28,6 +30,7 @@ export const schema = gql`
   input UpdateUserInput {
     userName: String
     email: String
+    name: String
     image: String
     bio: String
   }

web/package.json

@@ -20,6 +20,7 @@
     "@redwoodjs/web": "^0.19.2",
     "cloudinary-react": "^1.6.7",
     "controlkit": "^0.1.9",
+    "get-active-classes": "^0.0.11",
     "golden-layout": "^1.5.9",
     "jquery": "^3.5.1",
     "monaco-editor": "^0.20.0",

web/src/components/EditUser2Cell/EditUser2Cell.js

@@ -7,7 +7,7 @@ export const QUERY = gql`
     user: userName(userName: $userName) {
       id
       userName
-      email
+      name
       createdAt
       updatedAt
       image

web/src/components/ProfileTextInput/ProfileTextInput.js

@@ -1,25 +1,24 @@
 import {Fragment, useState} from 'react'
+import { getActiveClasses } from "get-active-classes"
 
 const ProfileTextInput = ({fields, isEditable, onChange= () => {}}) => {
-  const keyValueDisplay = Object.entries(fields)
   return (
     <div>
       <div className="grid items-center" style={{gridTemplateColumns: 'auto 1fr'}}>
-        {keyValueDisplay.map(([property, value]) => (<Fragment key={property}>
+        {Object.entries(fields).map(([property, value]) => (<Fragment key={property}>
           <span className="capitalize text-gray-500 text-sm align-middle my-3">{property}:</span>
-          {
+
-            isEditable ?
+              <div className={getActiveClasses('relative ml-2', {'hidden': !isEditable})}>
-              <div className="relative ml-2">
                 <div className="absolute inset-0 mb-2 rounded bg-gray-200 shadow-inner bg-gray-100" />
                 <input
-                  className=" pl-2 pt-1 text-indigo-800 font-medium text-xl mb-px pb-px bg-transparent relative"
+                  className="pl-2 pt-1 text-indigo-800 font-medium text-xl mb-px pb-px bg-transparent relative"
                   onChange={({target}) => onChange({...fields, [property]: target.value})}
                   value={value}
                   type="text"
                 />
-              </div>:
+              </div>
-              <span className="pl-2 text-indigo-800 font-medium text-xl mb-px pb-px">{value}</span>
+              <span className={getActiveClasses('pl-2 text-indigo-800 font-medium text-xl mb-px pb-px',{'hidden': isEditable})}>{value}</span>
-          }
+
         </Fragment>))}
       </div>
     </div>

web/src/components/User2Cell/User2Cell.js

@@ -5,7 +5,7 @@ export const QUERY = gql`
     user: userName(userName: $userName) {
       id
       userName
-      email
+      name
       createdAt
       updatedAt
       image

web/src/components/UserProfile/UserProfile.js

@@ -10,12 +10,12 @@ import ProfileTextInput from 'src/components/ProfileTextInput'
 const UserProfile = ({user, isEditable, loading, onSave, error}) => {
   const [input, setInput] = useState({
     userName: user.userName,
-    email: user.email,
+    name: user.name,
     bio: user.bio,
     image: user.image,
   })
-  const {userName, email} = input
+  const {userName, name} = input
-  const editableTextFields = {userName, email} // TODO add name field to user
+  const editableTextFields = {userName, name}
   return (
     <>
       <div className="max-w-2xl mx-auto mt-20 ">

yarn.lock

@@ -8313,6 +8313,11 @@ gensync@^1.0.0-beta.1:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
   integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
 
+get-active-classes@^0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/get-active-classes/-/get-active-classes-0.0.11.tgz#1ed78f7470141f9ea6e2c113728b990710316c1e"
+  integrity sha512-lLPN0fi3ospZ4pKQTVQ+/0K3HmxrSs09yuE9BrahjLUQvA0zYHHH4eBhwR1bhguy3+wNwzg85yWUz8oKQLCnYg==
+
 get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"