Replace email with name on user profile

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="relative ml-2">
+
+              <div className={getActiveClasses('relative ml-2', {'hidden': !isEditable})}>
                 <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>:
-              <span className="pl-2 text-indigo-800 font-medium text-xl mb-px pb-px">{value}</span>
-          }
+              </div>
+              <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 editableTextFields = {userName, email} // TODO add name field to user
+  const {userName, name} = input
+  const editableTextFields = {userName, name}
   return (
     <>
       <div className="max-w-2xl mx-auto mt-20 ">