Linting fixes

2021-09-12 12:42:22 -04:00
parent 690d45ff9a
commit 74a5f9bf2c
12 changed files with 382 additions and 310 deletions
--- a/app/web/src/components/IdeHeader/IdeHeader.tsx
+++ b/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)
-          ? <DefaultTopButtons
+        {!children ? (
+          <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({ project, projectTitle, _projectOwner, handleRender, canEdit }) {
-  return (<>
+function DefaultTopButtons({
+  project,
+  projectTitle,
+  _projectOwner,
+  handleRender,
+  canEdit,
+}) {
+  return (
+    <>
      {canEdit && !projectTitle && (
        <CaptureButton
          canEdit={canEdit}
@@ -200,5 +207,6 @@ function DefaultTopButtons({ project, projectTitle, _projectOwner, handleRender,
          )
        }}
      </Popover>
-  </>)
+    </>
+  )
 }
--- a/app/web/src/components/ImageUploader/ImageUploader.js
+++ b/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
-              name="pencil-solid"
-              className=" h-4 w-4 ml-4 mb-2"
-            />
+            <Svg name="pencil-solid" className=" h-4 w-4 ml-4 mb-2" />
          </button>
        )}
        {isEditable && <input {...getInputProps()} />}
--- a/app/web/src/components/KeyValue/KeyValue.tsx
+++ b/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={"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>
+    <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' : '')
+        }
+      >
+        <span className={isEditable ? 'text-ch-blue-300' : ''}>{keyName}</span>
        {canEdit &&
          (isEditable ? (
            <button
@@ -33,11 +38,7 @@ const KeyValue = ({
              id="rename-button"
              onClick={onEdit}
            >
-                <Svg
-                  name="check"
-                  className="w-6 h-6"
-                  strokeWidth={3}
-                />
+              <Svg 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>
  )
 }
--- a/app/web/src/components/NavPlusButton/NavPlusButton.tsx
+++ b/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>
--- a/app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx
+++ b/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}
-                className="text-ch-gray-400 hover:text-ch-pink-300">
+              <a
+                href="#"
+                onClick={logOut}
+                className="text-ch-gray-400 hover:text-ch-pink-300"
+              >
                Logout
              </a>
            </Popover.Panel>
--- a/app/web/src/components/ProjectProfile/ProjectProfile.tsx
+++ b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
@@ -257,4 +257,3 @@ const ProjectProfile = ({
 }

 export default ProjectProfile
-
--- a/app/web/src/components/UserProfile/UserProfile.tsx
+++ b/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
-                  field={fields.createdAt}
-                />
+                <fields.createdAt.component 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>
--- a/app/web/src/components/UserProfile/userProfileConfig.tsx
+++ b/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,
-  isEditable: boolean,
-  loading: boolean,
-  error: boolean,
-  onSave: Function,
-  projects: {}[],
+  user: User
+  isEditable: boolean
+  loading: boolean
+  error: boolean
+  onSave: Function
+  projects: {}[]
 }

 export interface FieldConfigType {
-  name?: string, // introspection ugh
-  editable: boolean,
-  component?: ReactNode,
-  needsRef?: boolean,
-  isEditing?: boolean | undefined,
-  onSave?: Function,
-  currentValue?: any,
-  newValue?: any,
+  name?: string // introspection ugh
+  editable: boolean
+  component?: ReactNode
+  needsRef?: boolean
+  isEditing?: boolean | undefined
+  onSave?: Function
+  currentValue?: 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({ type: "TOGGLE_EDITING", payload: field.name })
+        dispatch({
+          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' &&
-              ref?.current?.focusAtEnd()
+            e?.target?.id === 'bio-wrap' && 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">
-            <p className="text-ch-gray-300">{ new Date(field.currentValue).toLocaleDateString() }</p>
+    return (
+      <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}>
-            { (!field.isEditing) 
-            ? <h1 className="text-4xl">{ user?.name }</h1>
-            :  <InputText
+    return (
+      <ProfileKeyValue {...props} bottom={true}>
+        {!field.isEditing ? (
+          <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}>
-            { (!field.isEditing) 
-                ? <h2 className="text-ch-gray-400">@{ field?.currentValue?.replace(/([^a-zA-Z\d_:])/g, '-') }</h2>
-                :  <InputText
+    return (
+      <ProfileKeyValue {...props} bottom={true}>
+        {!field.isEditing ? (
+          <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:
--- a/app/web/src/layouts/MainLayout/MainLayout.js
+++ b/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}
-                        className="text-ch-gray-400 hover:text-ch-pink-300">
+                      <a
+                        href="#"
+                        onClick={logOut}
+                        className="text-ch-gray-400 hover:text-ch-pink-300"
+                      >
                        Logout
                      </a>
                    </Popover.Panel>
--- a/app/web/src/pages/AccountRecoveryPage/AccountRecoveryPage.js
+++ b/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">
-              email
-            </span>
+            <span className="capitalize text-ch-gray-300 text-sm">email</span>
            <InputTextForm
              className="text-xl"
              name="email"
--- a/app/web/src/pages/UpdatePasswordPage/UpdatePasswordPage.js
+++ b/app/web/src/pages/UpdatePasswordPage/UpdatePasswordPage.js
@@ -49,9 +49,7 @@ const UpdatePasswordPage = () => {
                required: true,
              }}
            />
-            <span className="capitalize text-ch-gray-300 text-sm">
-              confirm
-            </span>
+            <span className="capitalize text-ch-gray-300 text-sm">confirm</span>
            <InputTextForm
              className="text-xl"
              name="confirm"