format

app/web/src/components/Hero/AssetWithGooey.tsx

@@ -76,8 +76,8 @@ function Gooey() {
       const z = randomSign(Math.random() * 2)
       const position: [number, number, number] = [x, z, y]
       const size = Math.random() * 0.8 + 0.1
-      const distort = (size > .1) ? Math.random() * .6 * size + 0.2 : 0
+      const distort = size > 0.1 ? Math.random() * 0.6 * size + 0.2 : 0
-      const speed = (size > .1) ? (Math.random() * 0.8) / size / size + 0.1 : 0
+      const speed = size > 0.1 ? (Math.random() * 0.8) / size / size + 0.1 : 0
       return { position, size, distort, speed }
     })
     const secondSet = Array.from({ length: 5 }).map((_, index) => {
@@ -87,8 +87,8 @@ function Gooey() {
       const z = randomSign(Math.random() * 2)
       const position: [number, number, number] = [x, z, y]
       const size = Math.random() * 0.2 + 0.05
-      const distort = (size > .1) ? Math.random() * .8 * size + 0.2 : 0
+      const distort = size > 0.1 ? Math.random() * 0.8 * size + 0.2 : 0
-      const speed = (size > .1) ? (Math.random() * 0.5) / size / size + 0.1 : 0
+      const speed = size > 0.1 ? (Math.random() * 0.5) / size / size + 0.1 : 0
       return { position, size, distort, speed }
     })
     return [...firstSet, ...secondSet]

app/web/src/components/IdeSideBar/sidebarConfig.tsx

@@ -53,7 +53,8 @@ export const sidebarTopConfig: SidebarConfigType[] = [
 ]
 
 const DiscordLink = () => (
-    <a className="underline text-ch-pink-300"
+  <a
+    className="underline text-ch-pink-300"
     href="https://discord.gg/SD7zFRNjGH"
     target="_blank"
     rel="noreferrer"
@@ -74,7 +75,8 @@ const settingsConfig = [
         </p>
         <hr className="my-2" />
         <p className="p-2">
-        We're building configuration settings for the Viewer pane now. Join us on <DiscordLink/> if you want to lend a hand!
+          We're building configuration settings for the Viewer pane now. Join us
+          on <DiscordLink /> if you want to lend a hand!
         </p>
       </div>
     ),
@@ -90,7 +92,8 @@ const settingsConfig = [
         </p>
         <hr className="my-2" />
         <p className="p-2">
-          We're building configuration settings for the Viewer pane now. Join us on <DiscordLink/> if you want to lend a hand!
+          We're building configuration settings for the Viewer pane now. Join us
+          on <DiscordLink /> if you want to lend a hand!
         </p>
       </div>
     ),
@@ -106,7 +109,8 @@ const settingsConfig = [
         </p>
         <hr className="my-2" />
         <p className="p-2">
-        We're building configuration settings for the Viewer pane now. Join us on <DiscordLink/> if you want to lend a hand!
+          We're building configuration settings for the Viewer pane now. Join us
+          on <DiscordLink /> if you want to lend a hand!
         </p>
       </div>
     ),

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

@@ -7,10 +7,12 @@ interface EditToggleType {
 }
 
 const EditToggle = ({
-  onEdit = () => { console.error('Field declared editable without edit action.') },
+  onEdit = () => {
+    console.error('Field declared editable without edit action.')
+  },
   isEditing = false,
-} : EditToggleType) => (
+}: EditToggleType) =>
-    (isEditing ? (
+  isEditing ? (
     <button
       className="font-fira-sans text-ch-gray-300 items-center ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-blue-500 bg-opacity-50 hover:bg-opacity-70 rounded-sm"
       id="rename-button"
@@ -23,8 +25,7 @@ const EditToggle = ({
     <button onClick={onEdit}>
       <Svg name="pencil-solid" className="h-4 w-4 ml-4 mb-2" />
     </button>
-    ))
+  )
-)
 
 interface KeyValueType {
   keyName: string
@@ -51,7 +52,7 @@ const KeyValue = ({
         }
       >
         <span className={edit ? 'text-ch-blue-300' : ''}>{keyName}</span>
-        {edit && edit.hasPermissionToEdit && <EditToggle {...edit} /> }
+        {edit && edit.hasPermissionToEdit && <EditToggle {...edit} />}
       </div>
       <div className={'text-ch-gray-300 ' + (bottom ? 'mb-1' : 'mt-1')}>
         {children}

app/web/src/components/ProjectCard/ProjectCard.tsx

@@ -32,10 +32,7 @@ const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
       </div>
       <div className="flex items-center mt-1">
         <div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
-          <ImageFallback
+          <ImageFallback imageId={user?.image} width={80} />
-            imageId={user?.image}
-            width={80}
-          />
         </div>
         <div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">
           <div className="">{title}</div>

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

@@ -102,7 +102,8 @@ const ProjectProfile = ({
                     className="px-3 py-2 rounded"
                   />
                 </div>
-                { (project?.description || hasPermissionToEdit) && <KeyValue
+                {(project?.description || hasPermissionToEdit) && (
+                  <KeyValue
                     keyName="Description"
                     edit={{
                       hasPermissionToEdit,
@@ -136,7 +137,8 @@ const ProjectProfile = ({
                         onChange={onDescriptionChange}
                       />
                     </div>
-                </KeyValue> }
+                  </KeyValue>
+                )}
                 <div className="grid grid-flow-col-dense gap-6">
                   <KeyValue keyName="Created on">
                     {new Date(project?.createdAt).toDateString()}
@@ -154,7 +156,8 @@ const ProjectProfile = ({
                     className=""
                   />
                 </KeyValue>
-                { currentUser && <KeyValue keyName="Comments">
+                {currentUser && (
+                  <KeyValue keyName="Comments">
                     {!isEditing && (
                       <>
                         {currentUser && (
@@ -190,7 +193,9 @@ const ProjectProfile = ({
                                 <div className="flex justify-between">
                                   <Link
                                     className="flex items-center"
-                                  to={routes.user({ userName: user?.userName })}
+                                    to={routes.user({
+                                      userName: user?.userName,
+                                    })}
                                   >
                                     <Gravatar
                                       image={user?.image}
@@ -211,7 +216,8 @@ const ProjectProfile = ({
                         </ul>
                       </>
                     )}
-                </KeyValue> }
+                  </KeyValue>
+                )}
                 {hasPermissionToEdit && (
                   <>
                     <h4 className="mt-10 text-red-600">Danger Zone</h4>

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

@@ -13,15 +13,18 @@ import {
 
 // This function initializes the state management object for each of the fields
 function buildFieldsConfig(fieldsConfig, user, hasPermissionToEdit) {
-  return Object.fromEntries(Object.keys(fieldsConfig).map(
+  return Object.fromEntries(
-    (key: string): [string, FieldType] => ([key, {
+    Object.keys(fieldsConfig).map((key: string): [string, FieldType] => [
+      key,
+      {
         name: key,
         currentValue: user[key],
         newValue: user[key],
         isEditing: false,
         hasPermissionToEdit,
-    }])
+      },
-  ))
+    ])
+  )
 }
 
 const UserProfile = ({
@@ -39,7 +42,11 @@ const UserProfile = ({
       navigate(routes.user({ userName: user.userName }))
   }, [currentUser])
 
-  const initializedFields = buildFieldsConfig(fieldComponents, user, hasPermissionToEdit)
+  const initializedFields = buildFieldsConfig(
+    fieldComponents,
+    user,
+    hasPermissionToEdit
+  )
   const [fields, fieldDispatch] = useReducer(fieldReducer, initializedFields)
   const {
     name: NameField,

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

@@ -51,9 +51,11 @@ const ProfileKeyValue = ({
   hasPermissionToEdit,
   children,
   bottom = false,
-} : ProfileKeyValueType) => {
+}: ProfileKeyValueType) => {
   return (
-    (user[field.name] && hasPermissionToEdit) && <KeyValue
+    user[field.name] &&
+    hasPermissionToEdit && (
+      <KeyValue
         keyName={field.name}
         edit={{
           hasPermissionToEdit,
@@ -75,6 +77,7 @@ const ProfileKeyValue = ({
         {children}
       </KeyValue>
     )
+  )
 }
 
 function BioField(props) {
@@ -110,7 +113,7 @@ function BioField(props) {
   )
 }
 
-function MemberSinceField(props : FieldComponentPropsType) {
+function MemberSinceField(props: FieldComponentPropsType) {
   return (
     <KeyValue keyName="Member Since">
       <p className="text-ch-gray-300">
@@ -120,7 +123,7 @@ function MemberSinceField(props : FieldComponentPropsType) {
   )
 }
 
-function ImageField(props : FieldComponentPropsType) {
+function ImageField(props: FieldComponentPropsType) {
   const { field, user, save, hasPermissionToEdit } = props
   return (
     <ImageUploader
@@ -138,7 +141,7 @@ function ImageField(props : FieldComponentPropsType) {
   )
 }
 
-function NameField(props : FieldComponentPropsType) {
+function NameField(props: FieldComponentPropsType) {
   const { user, dispatch, field } = props
 
   return (
@@ -162,7 +165,7 @@ function NameField(props : FieldComponentPropsType) {
   )
 }
 
-function UserNameField(props : FieldComponentPropsType) {
+function UserNameField(props: FieldComponentPropsType) {
   const { dispatch, field } = props
 
   return (
@@ -196,7 +199,8 @@ export function fieldReducer(state, action) {
         [action.payload]: {
           ...state[action.payload],
           isEditing:
-            state[action.payload].hasPermissionToEdit && !state[action.payload].isEditing
+            state[action.payload].hasPermissionToEdit &&
+            !state[action.payload].isEditing
               ? true
               : false,
         },