Linting fixes

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -95,16 +95,17 @@ const IdeHeader = ({
         <div />
       )}
       <div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center">
-        { (!children)
+        {!children ? (
-          ? <DefaultTopButtons
+          <DefaultTopButtons
             project={project}
             projectTitle={projectTitle}
             _projectOwner={_projectOwner}
             handleRender={handleRender}
             canEdit={canEdit}
           />
-          : children 
+        ) : (
-        }
+          children
+        )}
         {/* <TopButton>Fork</TopButton> */}
         <div className="h-8 w-8">
           <NavPlusButton />
@@ -117,9 +118,15 @@ const IdeHeader = ({
 
 export default IdeHeader
 
-
+function DefaultTopButtons({
-function DefaultTopButtons({ project, projectTitle, _projectOwner, handleRender, canEdit }) {
+  project,
-  return (<>
+  projectTitle,
+  _projectOwner,
+  handleRender,
+  canEdit,
+}) {
+  return (
+    <>
       {canEdit && !projectTitle && (
         <CaptureButton
           canEdit={canEdit}
@@ -200,5 +207,6 @@ function DefaultTopButtons({ project, projectTitle, _projectOwner, handleRender,
           )
         }}
       </Popover>
-  </>)
+    </>
+  )
 }

app/web/src/components/ImageUploader/ImageUploader.js

@@ -11,17 +11,24 @@ import Svg from 'src/components/Svg'
 const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
 const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
 
-export function ImageFallback({ width = 100, imageId = 'CadHub/eia1kwru54g2kf02s2xx', className = '' }) {
+export function ImageFallback({
+  width = 100,
+  imageId = 'CadHub/eia1kwru54g2kf02s2xx',
+  className = '',
+}) {
   return (
     <div className="relative overflow-hidden w-full h-full">
       <CloudinaryImage
-      className={"object-cover w-full h-full shadow overflow-hidden " + className } 
+        className={
+          'object-cover w-full h-full shadow overflow-hidden ' + className
+        }
         cloudName="irevdev"
         publicId={imageId}
         width={width}
         crop="scale"
       />
-  </div>)
+    </div>
+  )
 }
 
 export default function ImageUploader({
@@ -82,10 +89,7 @@ export default function ImageUploader({
         {cloudinaryId && isEditable && (
           <button className="w-full py-1 absolute z-10 bg-ch-blue-650 bg-opacity-50 hover:bg-opacity-80 bottom-0 right-0 left-0 flex items-center justify-center text-ch-gray-300">
             <span className="font-fira-code text-sm leading-4">Update</span>
-            <Svg
+            <Svg name="pencil-solid" className=" h-4 w-4 ml-4 mb-2" />
-              name="pencil-solid"
-              className=" h-4 w-4 ml-4 mb-2"
-            />
           </button>
         )}
         {isEditable && <input {...getInputProps()} />}

app/web/src/components/KeyValue/KeyValue.tsx

@@ -19,13 +19,18 @@ const KeyValue = ({
   onEdit,
   isEditable = false,
   bottom = false,
-    className = "",
+  className = '',
 }: KeyValueType) => {
   if (!children || hide) return null
   return (
-      <div className={"flex flex-col " + className}>
+    <div className={'flex flex-col ' + className}>
-        <div className={"text-ch-blue-400 font-fira-code flex items-center leading-4 text-sm whitespace-nowrap " + (bottom ? "order-2" : "")}>
+      <div
-          <span className={isEditable ? "text-ch-blue-300" : ""}>{keyName}</span>
+        className={
+          'text-ch-blue-400 font-fira-code flex items-center leading-4 text-sm whitespace-nowrap ' +
+          (bottom ? 'order-2' : '')
+        }
+      >
+        <span className={isEditable ? 'text-ch-blue-300' : ''}>{keyName}</span>
         {canEdit &&
           (isEditable ? (
             <button
@@ -33,11 +38,7 @@ const KeyValue = ({
               id="rename-button"
               onClick={onEdit}
             >
-                <Svg
+              <Svg name="check" className="w-6 h-6" strokeWidth={3} />
-                  name="check"
-                  className="w-6 h-6"
-                  strokeWidth={3}
-                />
               <span>Update</span>
             </button>
           ) : (
@@ -46,7 +47,9 @@ const KeyValue = ({
             </button>
           ))}
       </div>
-        <div className={"text-ch-gray-300 " + (bottom ? "mb-1" : "mt-1")}>{children}</div>
+      <div className={'text-ch-gray-300 ' + (bottom ? 'mb-1' : 'mt-1')}>
+        {children}
+      </div>
     </div>
   )
 }

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -52,7 +52,11 @@ const NavPlusButton: React.FC = () => {
                 ' px-4 py-1 my-4 bg-opacity-30 hover:bg-opacity-70 grid grid-flow-col-dense items-center gap-2'
               }
             >
-              <div className={dotClasses + " justify-self-center w-5 h-5 rounded-full"}></div>
+              <div
+                className={
+                  dotClasses + ' justify-self-center w-5 h-5 rounded-full'
+                }
+              ></div>
               <Link to={routes.draftProject({ cadPackage: ideType })}>
                 <div>{name}</div>
                 <div className="text-xs text-ch-gray-400 font-light">{sub}</div>

app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx

@@ -46,7 +46,8 @@ const ProfileSlashLogin = () => {
         <Popover className="relative outline-none h-8 w-8">
           <Popover.Button
             disabled={!isAuthenticated || !currentUser}
-            className="h-full w-full outline-none border-ch-gray-400 border-2 rounded-full">
+            className="h-full w-full outline-none border-ch-gray-400 border-2 rounded-full"
+          >
             {!loading && (
               <ImageFallback
                 width={80}
@@ -65,11 +66,15 @@ const ProfileSlashLogin = () => {
               <hr className="my-2" />
               <Link
                 className="my-2 mt-4 block hover:text-ch-pink-300"
-                to={routes.user({ userName: user?.userName })}>
+                to={routes.user({ userName: user?.userName })}
+              >
                 <div>View Your Profile</div>
               </Link>
-              <a href="#" onClick={logOut}
+              <a
-                className="text-ch-gray-400 hover:text-ch-pink-300">
+                href="#"
+                onClick={logOut}
+                className="text-ch-gray-400 hover:text-ch-pink-300"
+              >
                 Logout
               </a>
             </Popover.Panel>

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -257,4 +257,3 @@ const ProjectProfile = ({
 }
 
 export default ProjectProfile
-

app/web/src/components/UserProfile/UserProfile.tsx

@@ -4,18 +4,24 @@ import { Link, navigate, routes } from '@redwoodjs/router'
 import ProjectsOfUser from 'src/components/ProjectsOfUserCell'
 import IdeHeader from 'src/components/IdeHeader/IdeHeader'
 import Svg from 'src/components/Svg/Svg'
-import { fieldsConfig, fieldReducer, UserProfileType, FieldConfigType } from './userProfileConfig'
+import {
+  fieldsConfig,
+  fieldReducer,
+  UserProfileType,
+  FieldConfigType,
+} from './userProfileConfig'
 
 function buildFieldsConfig(fieldsConfig, user) {
-  Object.entries(fieldsConfig).forEach(([key, field] : [string, FieldConfigType]) => {
+  Object.entries(fieldsConfig).forEach(
+    ([key, field]: [string, FieldConfigType]) => {
       field.currentValue = field.newValue = user[key]
       field.name = key
-  })
+    }
+  )
 
   return fieldsConfig
 }
 
-
 const UserProfile = ({
   user,
   isEditable,
@@ -27,7 +33,9 @@ const UserProfile = ({
   const { currentUser } = useAuth()
   const hasEditPermission = currentUser?.sub === user.id
   useEffect(() => {
-    isEditable && !hasEditPermission && navigate(routes.user({ userName: user.userName }))
+    isEditable &&
+      !hasEditPermission &&
+      navigate(routes.user({ userName: user.userName }))
   }, [currentUser])
 
   const initializedFields = buildFieldsConfig(fieldsConfig, user)
@@ -49,7 +57,6 @@ const UserProfile = ({
             projectOwnerImage={user?.image}
             projectOwnerId={user?.id}
           >
-            
             <span></span>
           </IdeHeader>
         </div>
@@ -95,14 +102,14 @@ const UserProfile = ({
                 />
               </div>
               <div className="my-5">
-                <fields.createdAt.component
+                <fields.createdAt.component field={fields.createdAt} />
-                  field={fields.createdAt}
-                />
               </div>
             </section>
             {/* Viewer */}
             <div className="py-10 px-8 w-full h-full relative bg-ch-gray-800 md:overflow-y-auto ch-scrollbar">
-              <h3 className="text-2xl text-ch-gray-500 mb-4 md:hidden">Projects</h3>
+              <h3 className="text-2xl text-ch-gray-500 mb-4 md:hidden">
+                Projects
+              </h3>
               <ProjectsOfUser userName={user?.userName} />
             </div>
           </div>

app/web/src/components/UserProfile/userProfileConfig.tsx

@@ -5,28 +5,35 @@ import Editor from 'rich-markdown-editor'
 import ImageUploader from 'src/components/ImageUploader'
 import { User } from 'types/graphql'
 
-
 export interface UserProfileType {
-  user: User,
+  user: User
-  isEditable: boolean,
+  isEditable: boolean
-  loading: boolean,
+  loading: boolean
-  error: boolean,
+  error: boolean
-  onSave: Function,
+  onSave: Function
-  projects: {}[],
+  projects: {}[]
 }
 
 export interface FieldConfigType {
-  name?: string, // introspection ugh
+  name?: string // introspection ugh
-  editable: boolean,
+  editable: boolean
-  component?: ReactNode,
+  component?: ReactNode
-  needsRef?: boolean,
+  needsRef?: boolean
-  isEditing?: boolean | undefined,
+  isEditing?: boolean | undefined
-  onSave?: Function,
+  onSave?: Function
-  currentValue?: any,
+  currentValue?: any
-  newValue?: any,
+  newValue?: any
 }
 
-const ProfileKeyValue = ({ field, dispatch, user, save, hasEditPermission, children, bottom = false }) => {
+const ProfileKeyValue = ({
+  field,
+  dispatch,
+  user,
+  save,
+  hasEditPermission,
+  children,
+  bottom = false,
+}) => {
   return (
     <KeyValue
       keyName={field.name}
@@ -36,8 +43,11 @@ const ProfileKeyValue = ({ field, dispatch, user, save, hasEditPermission, child
         if (field.isEditing) {
           save(user.userName, { [field.name]: field.newValue })
         }
-          dispatch({ type: "SET_CURRENT_VALUE", payload: { field: field.name, value: field.newValue }})
+        dispatch({
-          dispatch({ type: "TOGGLE_EDITING", payload: field.name })
+          type: 'SET_CURRENT_VALUE',
+          payload: { field: field.name, value: field.newValue },
+        })
+        dispatch({ type: 'TOGGLE_EDITING', payload: field.name })
       }}
       isEditable={hasEditPermission && field.isEditing}
       bottom={bottom}
@@ -56,7 +66,8 @@ const bioField : FieldConfigType = {
 
     const { dispatch, field } = props
 
-        return <ProfileKeyValue {...props}>
+    return (
+      <ProfileKeyValue {...props}>
         <div
           id="bio-wrap"
           name="bio"
@@ -65,18 +76,23 @@ const bioField : FieldConfigType = {
             (field.isEditable ? ' min-h-md' : '')
           }
           onClick={(e) =>
-              e?.target?.id === 'bio-wrap' &&
+            e?.target?.id === 'bio-wrap' && ref?.current?.focusAtEnd()
-              ref?.current?.focusAtEnd()
           }
         >
           <Editor
             ref={ref}
             defaultValue={field?.currentValue || ''}
             readOnly={!field.isEditing}
-              onChange={(bio) => dispatch({ type: "SET_NEW_VALUE", payload: { field: field.bio, value: bio() }})}
+            onChange={(bio) =>
+              dispatch({
+                type: 'SET_NEW_VALUE',
+                payload: { field: field.bio, value: bio() },
+              })
+            }
           />
         </div>
       </ProfileKeyValue>
+    )
   },
 }
 
@@ -85,9 +101,13 @@ const createdAtField : FieldConfigType = {
   component: (props) => {
     const { field } = props
 
-        return <KeyValue keyName="Member Since">
+    return (
-            <p className="text-ch-gray-300">{ new Date(field.currentValue).toLocaleDateString() }</p>
+      <KeyValue keyName="Member Since">
+        <p className="text-ch-gray-300">
+          {new Date(field.currentValue).toLocaleDateString()}
+        </p>
       </KeyValue>
+    )
   },
 }
 
@@ -117,17 +137,25 @@ const nameField : FieldConfigType = {
   component: (props) => {
     const { user, dispatch, field } = props
 
-        return <ProfileKeyValue {...props} bottom={true}>
+    return (
-            { (!field.isEditing) 
+      <ProfileKeyValue {...props} bottom={true}>
-            ? <h1 className="text-4xl">{ user?.name }</h1>
+        {!field.isEditing ? (
-            :  <InputText
+          <h1 className="text-4xl">{user?.name}</h1>
+        ) : (
+          <InputText
             className="text-xl"
             value={field.newValue}
-                onChange={({ target: { value } }) => dispatch({ type: "SET_NEW_VALUE", payload: { field: field.name, value }})}
+            onChange={({ target: { value } }) =>
+              dispatch({
+                type: 'SET_NEW_VALUE',
+                payload: { field: field.name, value },
+              })
+            }
             isEditable={!field.isEditable}
           />
-        }
+        )}
       </ProfileKeyValue>
+    )
   },
 }
 
@@ -136,17 +164,27 @@ const userNameField : FieldConfigType = {
   component: (props) => {
     const { dispatch, field } = props
 
-        return <ProfileKeyValue {...props} bottom={true}>
+    return (
-            { (!field.isEditing) 
+      <ProfileKeyValue {...props} bottom={true}>
-                ? <h2 className="text-ch-gray-400">@{ field?.currentValue?.replace(/([^a-zA-Z\d_:])/g, '-') }</h2>
+        {!field.isEditing ? (
-                :  <InputText
+          <h2 className="text-ch-gray-400">
+            @{field?.currentValue?.replace(/([^a-zA-Z\d_:])/g, '-')}
+          </h2>
+        ) : (
+          <InputText
             className="text-xl"
             value={field.newValue}
-                    onChange={({ target: { value } }) => dispatch({ type: "SET_NEW_VALUE", payload: { field: field.name, value }})}
+            onChange={({ target: { value } }) =>
+              dispatch({
+                type: 'SET_NEW_VALUE',
+                payload: { field: field.name, value },
+              })
+            }
             isEditable={!field.isEditable}
           />
-            }
+        )}
       </ProfileKeyValue>
+    )
   },
 }
 
@@ -166,21 +204,24 @@ export const fieldsConfig = {
 
 export function fieldReducer(state, action) {
   switch (action.type) {
-    case "TOGGLE_EDITING":
+    case 'TOGGLE_EDITING':
       return {
         ...state,
         [action.payload]: {
           ...state[action.payload],
-          isEditing: (state[action.payload].editable && !state[action.payload].isEditing) ? true : false,
+          isEditing:
+            state[action.payload].editable && !state[action.payload].isEditing
+              ? true
+              : false,
+        },
       }
-      }
+    case 'SET_NEW_VALUE':
-    case "SET_NEW_VALUE":
       const newState = {
         ...state,
         [action.payload.field]: {
           ...state[action.payload.field],
           newValue: action.payload.value,
-        }
+        },
       }
       return newState
     default:

app/web/src/layouts/MainLayout/MainLayout.js

@@ -135,7 +135,8 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
                 <Popover className="relative outline-none w-full h-full">
                   <Popover.Button
                     disabled={!isAuthenticated || !currentUser}
-                    className="h-full w-full outline-none border-ch-gray-400 border-2 rounded-full">
+                    className="h-full w-full outline-none border-ch-gray-400 border-2 rounded-full"
+                  >
                     {!loading && (
                       <ImageFallback
                         width={80}
@@ -154,11 +155,15 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
                       <hr className="my-2" />
                       <Link
                         className="my-2 mt-4 block hover:text-ch-pink-300"
-                        to={routes.user({ userName: user?.userName })}>
+                        to={routes.user({ userName: user?.userName })}
+                      >
                         <div>View Your Profile</div>
                       </Link>
-                      <a href="#" onClick={logOut}
+                      <a
-                        className="text-ch-gray-400 hover:text-ch-pink-300">
+                        href="#"
+                        onClick={logOut}
+                        className="text-ch-gray-400 hover:text-ch-pink-300"
+                      >
                         Logout
                       </a>
                     </Popover.Panel>

app/web/src/pages/AccountRecoveryPage/AccountRecoveryPage.js

@@ -37,9 +37,7 @@ const AccountRecoveryPage = () => {
             className="grid items-center gap-2"
             style={{ gridTemplateColumns: 'auto 1fr' }}
           >
-            <span className="capitalize text-ch-gray-300 text-sm">
+            <span className="capitalize text-ch-gray-300 text-sm">email</span>
-              email
-            </span>
             <InputTextForm
               className="text-xl"
               name="email"

app/web/src/pages/UpdatePasswordPage/UpdatePasswordPage.js

@@ -49,9 +49,7 @@ const UpdatePasswordPage = () => {
                 required: true,
               }}
             />
-            <span className="capitalize text-ch-gray-300 text-sm">
+            <span className="capitalize text-ch-gray-300 text-sm">confirm</span>
-              confirm
-            </span>
             <InputTextForm
               className="text-xl"
               name="confirm"