Lint project

2020-11-11 03:18:10 +11:00
parent d8efead4e8
commit 39898270df
33 changed files with 852 additions and 481 deletions
--- a/web/src/components/Breadcrumb/Breadcrumb.js
+++ b/web/src/components/Breadcrumb/Breadcrumb.js
@@ -1,20 +1,31 @@
-import { getActiveClasses } from "get-active-classes"
+import { getActiveClasses } from 'get-active-classes'

 import InputText from 'src/components/InputText'

 const Breadcrumb = ({ userName, partTitle, onPartTitleChange, className }) => {
  return (
-    <h3 className={getActiveClasses("text-2xl font-roboto", className)}>
-      <div className="w-1 inline-block text-indigo-800 bg-indigo-800 mr-2">.</div>
-      <span className={getActiveClasses({"text-gray-500": !onPartTitleChange, 'text-gray-400': onPartTitleChange})}>
+    <h3 className={getActiveClasses('text-2xl font-roboto', className)}>
+      <div className="w-1 inline-block text-indigo-800 bg-indigo-800 mr-2">
+        .
+      </div>
+      <span
+        className={getActiveClasses({
+          'text-gray-500': !onPartTitleChange,
+          'text-gray-400': onPartTitleChange,
+        })}
+      >
        {userName}
      </span>
-      <div className="w-1 inline-block bg-gray-400 text-gray-400 mx-3 transform -skew-x-20" >.</div>
+      <div className="w-1 inline-block bg-gray-400 text-gray-400 mx-3 transform -skew-x-20">
+        .
+      </div>
      <InputText
        value={partTitle}
        onChange={onPartTitleChange}
        isEditable={onPartTitleChange}
-        className={getActiveClasses("text-indigo-800 text-2xl", {'-ml-2': !onPartTitleChange})}
+        className={getActiveClasses('text-indigo-800 text-2xl', {
+          '-ml-2': !onPartTitleChange,
+        })}
      />
    </h3>
  )
--- a/web/src/components/Button/Button.js
+++ b/web/src/components/Button/Button.js
@@ -1,21 +1,31 @@
 import { getActiveClasses } from 'get-active-classes'
 import Svg from 'src/components/Svg'

-const Button = ({onClick, iconName, children, className, shouldAnimateHover, disabled}) => {
+const Button = ({
+  onClick,
+  iconName,
+  children,
+  className,
+  shouldAnimateHover,
+  disabled,
+}) => {
  return (
-      <button
-        disabled={disabled}
-        className={getActiveClasses(
-          "flex items-center bg-opacity-50 rounded-xl p-2 px-6 text-indigo-600",
-          {'mx-px transform hover:-translate-y-px transition-all duration-150': shouldAnimateHover && !disabled},
-          className,
-          {"bg-gray-300 shadow-none hover:shadow-none": disabled},
-        )}
-        onClick={onClick}
-      >
-        {children}
-        <Svg className="w-6 ml-4" name={iconName} />
-      </button>
+    <button
+      disabled={disabled}
+      className={getActiveClasses(
+        'flex items-center bg-opacity-50 rounded-xl p-2 px-6 text-indigo-600',
+        {
+          'mx-px transform hover:-translate-y-px transition-all duration-150':
+            shouldAnimateHover && !disabled,
+        },
+        className,
+        { 'bg-gray-300 shadow-none hover:shadow-none': disabled }
+      )}
+      onClick={onClick}
+    >
+      {children}
+      <Svg className="w-6 ml-4" name={iconName} />
+    </button>
  )
 }

--- a/web/src/components/Button/Button.stories.js
+++ b/web/src/components/Button/Button.stories.js
@@ -1,10 +1,12 @@
 import Button from './Button'

 export const generated = () => {
-  return <>
-    button with icon
-    <Button>click Me </Button>
-  </>
+  return (
+    <>
+      button with icon
+      <Button>click Me </Button>
+    </>
+  )
 }

 export default { title: 'Components/Button' }
--- a/web/src/components/EditUser2Cell/EditUser2Cell.js
+++ b/web/src/components/EditUser2Cell/EditUser2Cell.js
@@ -35,8 +35,8 @@ export const Failure = ({ error }) => <div>Error: {error.message}</div>
 export const Success = ({ user }) => {
  const { addMessage } = useFlash()
  const [updateUser, { loading, error }] = useMutation(UPDATE_USER_MUTATION, {
-    onCompleted: ({updateUserByUserName}) => {
-      navigate(routes.user2({userName: updateUserByUserName.userName}))
+    onCompleted: ({ updateUserByUserName }) => {
+      navigate(routes.user2({ userName: updateUserByUserName.userName }))
      addMessage('User updated.', { classes: 'rw-flash-success' })
    },
  })
@@ -45,11 +45,13 @@ export const Success = ({ user }) => {
    updateUser({ variables: { userName, input } })
  }

-  return <UserProfile
-    user={user}
-    onSave={onSave}
-    loading={loading}
-    error={error}
-    isEditable
-  />
+  return (
+    <UserProfile
+      user={user}
+      onSave={onSave}
+      loading={loading}
+      error={error}
+      isEditable
+    />
+  )
 }
--- a/web/src/components/EmojiReaction/EmojiReaction.js
+++ b/web/src/components/EmojiReaction/EmojiReaction.js
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { getActiveClasses } from "get-active-classes"
+import { getActiveClasses } from 'get-active-classes'
 import Popover from '@material-ui/core/Popover'
 import { useAuth } from '@redwoodjs/auth'

@@ -7,14 +7,21 @@ import Svg from 'src/components/Svg'

 const emojiMenu = ['❤️', '👍', '😄', '🙌']
 // const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌']
-const noEmotes =[{
-  emoji: '❤️',
-  count: 0,
-}]
+const noEmotes = [
+  {
+    emoji: '❤️',
+    count: 0,
+  },
+]

-const textShadow = {textShadow: '0 4px 6px rgba(0, 0, 0, 0.3)'}
+const textShadow = { textShadow: '0 4px 6px rgba(0, 0, 0, 0.3)' }

-const EmojiReaction = ({ emotes, userEmotes, onEmote = () => {}, className }) => {
+const EmojiReaction = ({
+  emotes,
+  userEmotes,
+  onEmote = () => {},
+  className,
+}) => {
  const { currentUser } = useAuth()
  const [isOpen, setIsOpen] = useState(false)
  const [anchorEl, setAnchorEl] = useState(null)
@@ -48,29 +55,40 @@ const EmojiReaction = ({ emotes, userEmotes, onEmote = () => {}, className }) =>

  return (
    <>
-      <div className={getActiveClasses("h-10 relative overflow-hidden py-4", className)}>
-          <div className="absolute left-0 w-8 inset-y-0 z-10 flex items-center bg-gray-100">
-            <div className="h-8 w-8 relative" aria-describedby={popoverId} onClick={togglePopover}>
-              <button
-                className="bg-gray-200 border-2 m-px w-full h-full border-gray-300 rounded-full flex justify-center items-center shadow-md hover:shadow-lg hover:border-indigo-200 transform hover:-translate-y-px transition-all duration-150"
-              >
-                <Svg className="h-8 w-8 pt-px mt-px text-gray-500" name="dots-vertical" />
-              </button>
-            </div>
+      <div
+        className={getActiveClasses(
+          'h-10 relative overflow-hidden py-4',
+          className
+        )}
+      >
+        <div className="absolute left-0 w-8 inset-y-0 z-10 flex items-center bg-gray-100">
+          <div
+            className="h-8 w-8 relative"
+            aria-describedby={popoverId}
+            onClick={togglePopover}
+          >
+            <button className="bg-gray-200 border-2 m-px w-full h-full border-gray-300 rounded-full flex justify-center items-center shadow-md hover:shadow-lg hover:border-indigo-200 transform hover:-translate-y-px transition-all duration-150">
+              <Svg
+                className="h-8 w-8 pt-px mt-px text-gray-500"
+                name="dots-vertical"
+              />
+            </button>
          </div>
+        </div>

        <div className="whitespace-no-wrap absolute right-0 inset-y-0 flex items-center flex-row-reverse">
          {(emotes.length ? emotes : noEmotes).map((emote, i) => (
            <span
              className={getActiveClasses(
-                "rounded-full tracking-wide hover:bg-indigo-100 p-1 mx-px transform hover:-translate-y-px transition-all duration-150 border-indigo-400",
-                {'border': currentUser && userEmotes?.includes(emote.emoji)}
+                'rounded-full tracking-wide hover:bg-indigo-100 p-1 mx-px transform hover:-translate-y-px transition-all duration-150 border-indigo-400',
+                { border: currentUser && userEmotes?.includes(emote.emoji) }
              )}
              style={textShadow}
              key={`${emote.emoji}--${i}`}
              onClick={() => handleEmojiClick(emote.emoji)}
            >
-              <span className="text-lg pr-1">{emote.emoji}</span><span className="text-sm font-ropa-sans">{emote.count}</span>
+              <span className="text-lg pr-1">{emote.emoji}</span>
+              <span className="text-sm font-ropa-sans">{emote.count}</span>
            </span>
          ))}
        </div>
@@ -96,7 +114,9 @@ const EmojiReaction = ({ emotes, userEmotes, onEmote = () => {}, className }) =>
              style={textShadow}
              key={`${emoji}-${i}}`}
              onClick={() => handleEmojiClick(emoji)}
-            >{emoji}</button>
+            >
+              {emoji}
+            </button>
          ))}
        </div>
      </Popover>
--- a/web/src/components/IdePartCell/IdePartCell.js
+++ b/web/src/components/IdePartCell/IdePartCell.js
@@ -35,8 +35,7 @@ export const Success = ({ part }) => {
      addMessage('Part updated.', { classes: 'rw-flash-success' })
    },
  })
-  console.log({updatePart})
-
+  console.log({ updatePart })

  const saveCode = (input, id) => {
    console.log(id, input, 'wowow')
--- a/web/src/components/ImageUploader/ImageUploader.js
+++ b/web/src/components/ImageUploader/ImageUploader.js
@@ -1,6 +1,6 @@
-import React, { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import Button from "@material-ui/core/Button";
+import React, { useCallback, useState } from 'react'
+import { useDropzone } from 'react-dropzone'
+import Button from '@material-ui/core/Button'
 import axios from 'axios'
 import ReactCrop from 'react-image-crop'
 import { Dialog } from '@material-ui/core'
@@ -8,17 +8,17 @@ import { Image as CloudinaryImage } from 'cloudinary-react'
 import 'react-image-crop/dist/ReactCrop.css'
 import Svg from 'src/components/Svg/Svg.js'

-const CLOUDINARY_UPLOAD_PRESET = "CadHub_project_images";
-const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload";
+const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
+const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'

 export default function ImageUploader({
-    onImageUpload,
-    imageUrl,
-    aspectRatio,
-    className,
-    isEditable,
-    width=600
-  }) {
+  onImageUpload,
+  imageUrl,
+  aspectRatio,
+  className,
+  isEditable,
+  width = 600,
+}) {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [file, setFile] = useState()
  const [cloudinaryId, setCloudinaryId] = useState(imageUrl)
@@ -27,17 +27,17 @@ export default function ImageUploader({
    aspect: aspectRatio,
    unit: '%',
    width: 100,
-  });
+  })
  async function handleImageUpload() {
    const croppedFile = await getCroppedImg(imageObj, crop, 'avatar')
-    const imageData = new FormData();
-    imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);
-    imageData.append('file', croppedFile);
+    const imageData = new FormData()
+    imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET)
+    imageData.append('file', croppedFile)
    let upload = axios.post(CLOUDINARY_UPLOAD_URL, imageData)
    try {
      const { data } = await upload
-      if (data && data.public_id !== "") {
-        onImageUpload({cloudinaryPublicId: data.public_id})
+      if (data && data.public_id !== '') {
+        onImageUpload({ cloudinaryPublicId: data.public_id })
        setCloudinaryId(data.public_id)
        setIsModalOpen(false)
      }
@@ -46,62 +46,85 @@ export default function ImageUploader({
    }
  }
  // Drag and Drop
-  const onDrop = useCallback(acceptedFiles => {
+  const onDrop = useCallback((acceptedFiles) => {
    setIsModalOpen(true)
    const fileReader = new FileReader()
    fileReader.onload = () => {
      setFile(fileReader.result)
    }
    fileReader.readAsDataURL(acceptedFiles[0])
-  }, []);
+  }, [])

-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
  return (
-    <div className={'relative overflow-hidden '+ (!imageUrl && isEditable ? 'border ' : '') + className} style={{paddingBottom: `${1/aspectRatio*100}%`}}>
+    <div
+      className={
+        'relative overflow-hidden ' +
+        (!imageUrl && isEditable ? 'border ' : '') +
+        className
+      }
+      style={{ paddingBottom: `${(1 / aspectRatio) * 100}%` }}
+    >
      <div className="absolute w-full h-full" {...getRootProps()}>
-        {cloudinaryId && isEditable && <button className="absolute z-10 w-full inset-0 bg-indigo-900 opacity-50 flex justify-center items-center">
-          <Svg name="pencil" strokeWidth={2} className="text-gray-300 h-24 w-24" />
-        </button>}
+        {cloudinaryId && isEditable && (
+          <button className="absolute z-10 w-full inset-0 bg-indigo-900 opacity-50 flex justify-center items-center">
+            <Svg
+              name="pencil"
+              strokeWidth={2}
+              className="text-gray-300 h-24 w-24"
+            />
+          </button>
+        )}
        {isEditable && <input {...getInputProps()} />}
-        {(cloudinaryId || !isEditable) && <div className="relative overflow-hidden w-full h-full">
-          <CloudinaryImage
-            className="object-cover w-full h-full shadow overflow-hidden"
-            cloudName="irevdev"
-            publicId={cloudinaryId || 'CadHub/eia1kwru54g2kf02s2xx'}
-            width={width}
-            crop="scale"
-          />
-        </div>}
-        {!cloudinaryId && <button className="absolute inset-0"></button>}
-        {!cloudinaryId && isEditable && <div className="text-indigo-500 flex items-center justify-center rounded-lg w-full h-full">
-          <div className="px-6 text-center">
-            Drop files here ...
-            or <span className="group flex w-full items-center justify-center py-2">
-              <span className="bg-indigo-500 shadow rounded text-gray-200 cursor-pointer p-2 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-150">upload</span>
-            </span>
+        {(cloudinaryId || !isEditable) && (
+          <div className="relative overflow-hidden w-full h-full">
+            <CloudinaryImage
+              className="object-cover w-full h-full shadow overflow-hidden"
+              cloudName="irevdev"
+              publicId={cloudinaryId || 'CadHub/eia1kwru54g2kf02s2xx'}
+              width={width}
+              crop="scale"
+            />
          </div>
-        </div>}
+        )}
+        {!cloudinaryId && <button className="absolute inset-0"></button>}
+        {!cloudinaryId && isEditable && (
+          <div className="text-indigo-500 flex items-center justify-center rounded-lg w-full h-full">
+            <div className="px-6 text-center">
+              Drop files here ... or{' '}
+              <span className="group flex w-full items-center justify-center py-2">
+                <span className="bg-indigo-500 shadow rounded text-gray-200 cursor-pointer p-2 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-150">
+                  upload
+                </span>
+              </span>
+            </div>
+          </div>
+        )}
      </div>
-      <Dialog
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-      >
+      <Dialog open={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <div className="p-4">
-          <ReactCrop src={file} crop={crop} onImageLoaded={(image) => setImageObj(image)} onChange={newCrop => setCrop(newCrop)} />
-          <Button onClick={handleImageUpload} variant="outlined">Upload</Button>
+          <ReactCrop
+            src={file}
+            crop={crop}
+            onImageLoaded={(image) => setImageObj(image)}
+            onChange={(newCrop) => setCrop(newCrop)}
+          />
+          <Button onClick={handleImageUpload} variant="outlined">
+            Upload
+          </Button>
        </div>
      </Dialog>
    </div>
-  );
+  )
 }

 function getCroppedImg(image, crop, fileName) {
-  const canvas = document.createElement('canvas');
-  const scaleX = image.naturalWidth / image.width;
-  const scaleY = image.naturalHeight / image.height;
-  canvas.width = crop.width;
-  canvas.height = crop.height;
-  const ctx = canvas.getContext('2d');
+  const canvas = document.createElement('canvas')
+  const scaleX = image.naturalWidth / image.width
+  const scaleY = image.naturalHeight / image.height
+  canvas.width = crop.width
+  canvas.height = crop.height
+  const ctx = canvas.getContext('2d')
  ctx.drawImage(
    image,
    crop.x * scaleX,
@@ -112,16 +135,20 @@ function getCroppedImg(image, crop, fileName) {
    0,
    crop.width,
    crop.height
-  );
+  )

  // As Base64 string
  // const base64Image = canvas.toDataURL('image/jpeg');

  // As a blob
  return new Promise((resolve, reject) => {
-    canvas.toBlob(blob => {
-      blob.name = fileName;
-      resolve(blob);
-    }, 'image/jpeg', 1);
-  });
+    canvas.toBlob(
+      (blob) => {
+        blob.name = fileName
+        resolve(blob)
+      },
+      'image/jpeg',
+      1
+    )
+  })
 }
--- a/web/src/components/ImageUploader/ImageUploader.stories.js
+++ b/web/src/components/ImageUploader/ImageUploader.stories.js
@@ -4,35 +4,39 @@ export const generated = () => {
  return (
    <>
      <h3>AspectRatio:1, no initial image, editable</h3>
-      <
-        ImageUploader
-        onImageUpload={({cloudinaryPublicId}) => console.log(cloudinaryPublicId)}
+      <ImageUploader
+        onImageUpload={({ cloudinaryPublicId }) =>
+          console.log(cloudinaryPublicId)
+        }
        aspectRatio={1}
        isEditable={true}
-        className={"bg-red-400 rounded-half rounded-br-xl"}
+        className={'bg-red-400 rounded-half rounded-br-xl'}
      />
      <h3>AspectRatio 16:9, no initial image, editable</h3>
-      <
-        ImageUploader
-        onImageUpload={({cloudinaryPublicId}) => console.log(cloudinaryPublicId)}
-        aspectRatio={16/9}
+      <ImageUploader
+        onImageUpload={({ cloudinaryPublicId }) =>
+          console.log(cloudinaryPublicId)
+        }
+        aspectRatio={16 / 9}
        isEditable={true}
-        className={"bg-red-400 rounded-xl"}
+        className={'bg-red-400 rounded-xl'}
        imageUrl="CadHub/inakek2urbreynblzhgt"
      />
      <h3>AspectRatio:1, no initial image, NOT editable</h3>
-      <
-        ImageUploader
-        onImageUpload={({cloudinaryPublicId}) => console.log(cloudinaryPublicId)}
+      <ImageUploader
+        onImageUpload={({ cloudinaryPublicId }) =>
+          console.log(cloudinaryPublicId)
+        }
        aspectRatio={1}
-        className={"rounded-half rounded-br-xl"}
+        className={'rounded-half rounded-br-xl'}
      />
      <h3>AspectRatio ,16:9 no initial image, NOT editable</h3>
-      <
-        ImageUploader
-        onImageUpload={({cloudinaryPublicId}) => console.log(cloudinaryPublicId)}
-        aspectRatio={16/9}
-        className={"rounded-xl"}
+      <ImageUploader
+        onImageUpload={({ cloudinaryPublicId }) =>
+          console.log(cloudinaryPublicId)
+        }
+        aspectRatio={16 / 9}
+        className={'rounded-xl'}
        imageUrl="CadHub/inakek2urbreynblzhgt"
      />
    </>
--- a/web/src/components/InputText/InputText.js
+++ b/web/src/components/InputText/InputText.js
@@ -1,9 +1,15 @@
 import { getActiveClasses } from 'get-active-classes'

-const InputText = ({value, isEditable, onChange ,className}) => {
+const InputText = ({ value, isEditable, onChange, className }) => {
  return (
    <>
-      <div className={getActiveClasses('relative inline-block', {'hidden': !isEditable}, className)}>
+      <div
+        className={getActiveClasses(
+          'relative inline-block',
+          { hidden: !isEditable },
+          className
+        )}
+      >
        <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 mb-px pb-px bg-transparent relative"
@@ -13,7 +19,15 @@ const InputText = ({value, isEditable, onChange ,className}) => {
          type="text"
        />
      </div>
-      <span className={getActiveClasses('pl-2 text-indigo-800 font-medium mb-px pb-px',{'hidden': isEditable}, className)}>{value}</span>
+      <span
+        className={getActiveClasses(
+          'pl-2 text-indigo-800 font-medium mb-px pb-px',
+          { hidden: isEditable },
+          className
+        )}
+      >
+        {value}
+      </span>
    </>
  )
 }
--- a/web/src/components/Part2Cell/Part2Cell.js
+++ b/web/src/components/Part2Cell/Part2Cell.js
@@ -5,7 +5,11 @@ import { useAuth } from '@redwoodjs/auth'
 import PartProfile from 'src/components/PartProfile'

 export const QUERY = gql`
-  query FIND_PART_BY_USERNAME_TITLE($userName: String!, $partTitle: String, $currentUserId: String) {
+  query FIND_PART_BY_USERNAME_TITLE(
+    $userName: String!
+    $partTitle: String
+    $currentUserId: String
+  ) {
    userPart: userName(userName: $userName) {
      id
      name
@@ -42,7 +46,7 @@ export const QUERY = gql`

 const UPDATE_PART_MUTATION = gql`
  mutation UpdatePartMutation($id: String!, $input: UpdatePartInput!) {
-    updatePart:updatePart(id: $id, input: $input) {
+    updatePart: updatePart(id: $id, input: $input) {
      id
      title
      user {
@@ -66,7 +70,7 @@ const CREATE_PART_MUTATION = gql`
 `
 const TOGGLE_REACTION_MUTATION = gql`
  mutation ToggleReactionMutation($input: TogglePartReactionInput!) {
-    togglePartReaction(input: $input){
+    togglePartReaction(input: $input) {
      id
      emote
    }
@@ -87,23 +91,33 @@ export const Empty = () => <div>Empty</div>

 export const Failure = ({ error }) => <div>Error: {error.message}</div>

-export const Success = ({ userPart, variables: {isEditable}, refetch}) => {
+export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
  const { currentUser } = useAuth()
  const { addMessage } = useFlash()
  const [updateUser, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
-    onCompleted: ({updatePart}) => {
-      navigate(routes.part2({userName: updatePart.user.userName, partTitle: updatePart.title}))
+    onCompleted: ({ updatePart }) => {
+      navigate(
+        routes.part2({
+          userName: updatePart.user.userName,
+          partTitle: updatePart.title,
+        })
+      )
      addMessage('Part updated.', { classes: 'rw-flash-success' })
    },
  })
  const [createUser] = useMutation(CREATE_PART_MUTATION, {
-    onCompleted: ({createPart}) => {
-      navigate(routes.part2({userName: createPart?.user?.userName, partTitle: createPart?.title}))
+    onCompleted: ({ createPart }) => {
+      navigate(
+        routes.part2({
+          userName: createPart?.user?.userName,
+          partTitle: createPart?.title,
+        })
+      )
      addMessage('Part Created.', { classes: 'rw-flash-success' })
    },
  })
  const onSave = (id, input) => {
-    if(!id) {
+    if (!id) {
      createUser({ variables: { input } })
      return
    }
@@ -111,30 +125,42 @@ export const Success = ({ userPart, variables: {isEditable}, refetch}) => {
  }

  const [toggleReaction] = useMutation(TOGGLE_REACTION_MUTATION, {
-    onCompleted: () => refetch()
+    onCompleted: () => refetch(),
  })
-  const onReaction = (emote) => toggleReaction({variables: {input: {
-    emote,
-    userId: currentUser.sub,
-    partId: userPart?.Part?.id,
-  }}})
+  const onReaction = (emote) =>
+    toggleReaction({
+      variables: {
+        input: {
+          emote,
+          userId: currentUser.sub,
+          partId: userPart?.Part?.id,
+        },
+      },
+    })

  const [createComment] = useMutation(CREATE_COMMENT_MUTATION, {
-    onCompleted: () => refetch()
+    onCompleted: () => refetch(),
  })
-  const onComment = (text) => createComment({variables: {input: {
-    text,
-    userId: currentUser.sub,
-    partId: userPart?.Part?.id,
-  }}})
+  const onComment = (text) =>
+    createComment({
+      variables: {
+        input: {
+          text,
+          userId: currentUser.sub,
+          partId: userPart?.Part?.id,
+        },
+      },
+    })

-  return <PartProfile
-    userPart={userPart}
-    onSave={onSave}
-    loading={loading}
-    error={error}
-    isEditable={isEditable}
-    onReaction={onReaction}
-    onComment={onComment}
-  />
+  return (
+    <PartProfile
+      userPart={userPart}
+      onSave={onSave}
+      loading={loading}
+      error={error}
+      isEditable={isEditable}
+      onReaction={onReaction}
+      onComment={onComment}
+    />
+  )
 }
--- a/web/src/components/PartProfile/PartProfile.js
+++ b/web/src/components/PartProfile/PartProfile.js
@@ -1,58 +1,69 @@
-import {useState, useEffect} from 'react'
+import { useState, useEffect } from 'react'
 import { useAuth } from '@redwoodjs/auth'
 import { Link, navigate, routes } from '@redwoodjs/router'
-import Editor from "rich-markdown-editor";
+import Editor from 'rich-markdown-editor'

 import ImageUploader from 'src/components/ImageUploader'
 import Breadcrumb from 'src/components/Breadcrumb'
 import EmojiReaction from 'src/components/EmojiReaction'
 import Button from 'src/components/Button'
 import { countEmotes } from 'src/helpers/emote'
-import { getActiveClasses } from 'get-active-classes';
+import { getActiveClasses } from 'get-active-classes'

 const PartProfile = ({
-    userPart,
-    isEditable,
-    onSave,
-    loading,
-    error,
-    onReaction,
-    onComment,
-  }) => {
+  userPart,
+  isEditable,
+  onSave,
+  loading,
+  error,
+  onReaction,
+  onComment,
+}) => {
  const [comment, setComment] = useState('')
  const { currentUser } = useAuth()
  const canEdit = currentUser?.sub === userPart.id
  const part = userPart?.Part
  const emotes = countEmotes(part?.Reaction)
-  const userEmotes = part?.userReactions.map(({emote}) => emote)
-  useEffect(() => {isEditable &&
-    !canEdit &&
-    navigate(routes.part2({userName: userPart.userName, partTitle: part.title}))},
-  [currentUser])
+  const userEmotes = part?.userReactions.map(({ emote }) => emote)
+  useEffect(() => {
+    isEditable &&
+      !canEdit &&
+      navigate(
+        routes.part2({ userName: userPart.userName, partTitle: part.title })
+      )
+  }, [currentUser])
  const [input, setInput] = useState({
    title: part?.title,
    mainImage: part?.mainImage,
    description: part?.description,
    userId: userPart?.id,
  })
-  const setProperty = (property, value) => setInput({
-    ...input,
-    [property]: value,
-  })
-  const onTitleChange = ({target}) => setProperty('title', target.value.replace(/([^a-zA-Z\d_:])/g, '-'))
-  const onDescriptionChange = (description) => setProperty('description', description())
-  const onImageUpload = ({cloudinaryPublicId}) => setProperty('mainImage', cloudinaryPublicId)
+  const setProperty = (property, value) =>
+    setInput({
+      ...input,
+      [property]: value,
+    })
+  const onTitleChange = ({ target }) =>
+    setProperty('title', target.value.replace(/([^a-zA-Z\d_:])/g, '-'))
+  const onDescriptionChange = (description) =>
+    setProperty('description', description())
+  const onImageUpload = ({ cloudinaryPublicId }) =>
+    setProperty('mainImage', cloudinaryPublicId)
  const onEditSaveClick = () => {
    if (isEditable) {
      input.title && onSave(part?.id, input)
      return
    }
-    navigate(routes.editPart2({userName: userPart.userName, partTitle: part.title}))
+    navigate(
+      routes.editPart2({ userName: userPart.userName, partTitle: part.title })
+    )
  }
  return (
    <>
-      <div className="grid mt-20 gap-8" style={{gridTemplateColumns: 'auto 12rem minmax(12rem, 42rem) auto'}}>
-
+      <div
+        className="grid mt-20 gap-8"
+        style={{ gridTemplateColumns: 'auto 12rem minmax(12rem, 42rem) auto' }}
+      >
        {/* Side column */}
        <aside className="col-start-2 relative">
          <ImageUploader
@@ -62,7 +73,11 @@ const PartProfile = ({
            imageUrl={userPart.image}
            width={300}
          />
-          <h4 className="text-indigo-800 text-xl underline text-right py-4"><Link to={routes.user2({userName: userPart.userName})}>{userPart?.name}</Link></h4>
+          <h4 className="text-indigo-800 text-xl underline text-right py-4">
+            <Link to={routes.user2({ userName: userPart.userName })}>
+              {userPart?.name}
+            </Link>
+          </h4>
          <div className="h-px bg-indigo-200 mb-4" />
          <EmojiReaction
            emotes={emotes}
@@ -85,29 +100,43 @@ const PartProfile = ({
          >
            Open IDE
          </Button>
-          {canEdit && <Button
-            className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 relative z-20"
-            shouldAnimateHover
-            iconName={isEditable ? 'save' : 'pencil'}
-            onClick={onEditSaveClick}
-          >
-            {isEditable ? 'Save Details' : 'Edit Details'}
-          </Button>}
-          {isEditable && <div className="absolute inset-0 bg-gray-300 opacity-75 z-10 transform scale-x-110 -ml-1 -mt-2" />}
+          {canEdit && (
+            <Button
+              className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 relative z-20"
+              shouldAnimateHover
+              iconName={isEditable ? 'save' : 'pencil'}
+              onClick={onEditSaveClick}
+            >
+              {isEditable ? 'Save Details' : 'Edit Details'}
+            </Button>
+          )}
+          {isEditable && (
+            <div className="absolute inset-0 bg-gray-300 opacity-75 z-10 transform scale-x-110 -ml-1 -mt-2" />
+          )}
        </aside>

        {/* main project center column */}
        <section className="col-start-3">
-          <Breadcrumb className="inline" onPartTitleChange={isEditable && onTitleChange} userName={userPart.userName} partTitle={input?.title}/>
-          { !!(input?.mainImage || isEditable) && <ImageUploader
-            className="rounded-lg shadow-md border-2 border-gray-200 border-solid mt-8"
-            onImageUpload={onImageUpload}
-            aspectRatio={16/9}
-            isEditable={isEditable}
-            imageUrl={input?.mainImage}
-            width={1010}
-          />}
-          <div name="description" className="markdown-overrides rounded-lg shadow-md bg-white p-12 my-8 min-h-md">
+          <Breadcrumb
+            className="inline"
+            onPartTitleChange={isEditable && onTitleChange}
+            userName={userPart.userName}
+            partTitle={input?.title}
+          />
+          {!!(input?.mainImage || isEditable) && (
+            <ImageUploader
+              className="rounded-lg shadow-md border-2 border-gray-200 border-solid mt-8"
+              onImageUpload={onImageUpload}
+              aspectRatio={16 / 9}
+              isEditable={isEditable}
+              imageUrl={input?.mainImage}
+              width={1010}
+            />
+          )}
+          <div
+            name="description"
+            className="markdown-overrides rounded-lg shadow-md bg-white p-12 my-8 min-h-md"
+          >
            <Editor
              defaultValue={part?.description || ''}
              readOnly={!isEditable}
@@ -115,56 +144,66 @@ const PartProfile = ({
            />
          </div>

-
-
          {/* comments */}
-          { !isEditable && <>
-            <div className="h-px bg-indigo-200 mt-8" />
-            <h3 className="text-indigo-800 text-lg font-roboto tracking-wider mb-4" >Comments</h3>
+          {!isEditable && (
+            <>
+              <div className="h-px bg-indigo-200 mt-8" />
+              <h3 className="text-indigo-800 text-lg font-roboto tracking-wider mb-4">
+                Comments
+              </h3>

-            <ul>
-              {part?.Comment.map(({text, user, id}) => (
-                <li key={id} className="flex mb-6">
-                  <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow flex-shrink-0">
-                    <ImageUploader
-                      className=""
-                      onImageUpload={() => {}}
-                      aspectRatio={1}
-                      imageUrl={user?.image}
-                      width={50}
+              <ul>
+                {part?.Comment.map(({ text, user, id }) => (
+                  <li key={id} className="flex mb-6">
+                    <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow flex-shrink-0">
+                      <ImageUploader
+                        className=""
+                        onImageUpload={() => {}}
+                        aspectRatio={1}
+                        imageUrl={user?.image}
+                        width={50}
+                      />
+                    </div>
+                    <div className="ml-4 font-roboto">
+                      <div className="text-gray-800 font-bold text-lg mb-1">
+                        <Link to={routes.user2({ userName: user.userName })}>
+                          {user.userName}
+                        </Link>
+                      </div>
+                      <div className="text-gray-700 p-3 rounded bg-gray-200 shadow">
+                        {text}
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+              {currentUser && (
+                <>
+                  <div className="mt-12 ml-12">
+                    <textarea
+                      className="w-full h-32 rounded-lg shadow-inner outline-none resize-none p-3"
+                      placeholder="Leave a comment"
+                      value={comment}
+                      onChange={({ target }) => setComment(target.value)}
                    />
                  </div>
-                  <div className="ml-4 font-roboto">
-                    <div className="text-gray-800 font-bold text-lg mb-1"><Link to={routes.user2({userName: user.userName})}>
-                      {user.userName}
-                    </Link></div>
-                    <div className="text-gray-700 p-3 rounded bg-gray-200 shadow">
-                      {text}
-                    </div>
-                  </div>
-                </li>
-              ))}
-            </ul>
-            {currentUser && <>
-              <div className="mt-12 ml-12">
-                <textarea
-                  className="w-full h-32 rounded-lg shadow-inner outline-none resize-none p-3"
-                  placeholder="Leave a comment"
-                  value={comment}
-                  onChange={({target}) => setComment(target.value)}
-                />
-              </div>
-              <Button
-                className={getActiveClasses("ml-auto hover:shadow-lg bg-gray-300 mt-4 mb-20", {'bg-indigo-200': currentUser})}
-                shouldAnimateHover
-                disabled={!currentUser}
-                iconName={'save'}
-                onClick={() => onComment(comment)}
-              >Comment</Button>
-            </>}
-          </>}
+                  <Button
+                    className={getActiveClasses(
+                      'ml-auto hover:shadow-lg bg-gray-300 mt-4 mb-20',
+                      { 'bg-indigo-200': currentUser }
+                    )}
+                    shouldAnimateHover
+                    disabled={!currentUser}
+                    iconName={'save'}
+                    onClick={() => onComment(comment)}
+                  >
+                    Comment
+                  </Button>
+                </>
+              )}
+            </>
+          )}
        </section>
-
      </div>
    </>
  )
--- a/web/src/components/Parts/Parts.js
+++ b/web/src/components/Parts/Parts.js
@@ -4,14 +4,19 @@ import { countEmotes } from 'src/helpers/emote'
 import ImageUploader from 'src/components/ImageUploader'

 const PartsList = ({ parts }) => {
-
  return (
    <section className="max-w-6xl mx-auto mt-20">
-      <ul className="grid gap-x-8 gap-y-12 items-center mx-4 relative" style={{gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))'}}>
-        {parts.map(({title, mainImage, user, Reaction}) => (
-          <li className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150" key={`${user?.userName}--${title}`}>
+      <ul
+        className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
+        style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
+      >
+        {parts.map(({ title, mainImage, user, Reaction }) => (
+          <li
+            className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150"
+            key={`${user?.userName}--${title}`}
+          >
            <Link
-              to={routes.part2({userName: user?.userName, partTitle: title})}
+              to={routes.part2({ userName: user?.userName, partTitle: title })}
            >
              <div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
                <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow">
@@ -23,7 +28,9 @@ const PartsList = ({ parts }) => {
                    width={50}
                  />
                </div>
-                <span className="font-ropa-sans ml-3 text-lg text-indigo-900">{title}</span>
+                <span className="font-ropa-sans ml-3 text-lg text-indigo-900">
+                  {title}
+                </span>
              </div>
              <div className="w-full overflow-hidden relative rounded-b-lg">
                <ImageUploader
@@ -33,18 +40,27 @@ const PartsList = ({ parts }) => {
                  imageUrl={mainImage}
                  width={700}
                />
-                <div className="absolute inset-0" style={{background: 'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)'}} />
+                <div
+                  className="absolute inset-0"
+                  style={{
+                    background:
+                      'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)',
+                  }}
+                />
              </div>
-              <div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">{countEmotes(Reaction).map(({emoji, count}) => (
-                <div key={emoji} className="h-8 w-8 overflow-hidden ml-2 p-1 rounded-full bg-opacity-75 bg-gray-200 border border-gray-300 shadow-md flex items-center justify-between">
-                  <div className="-ml-px text-sm w-1">
-                    {emoji}
+              <div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">
+                {countEmotes(Reaction).map(({ emoji, count }) => (
+                  <div
+                    key={emoji}
+                    className="h-8 w-8 overflow-hidden ml-2 p-1 rounded-full bg-opacity-75 bg-gray-200 border border-gray-300 shadow-md flex items-center justify-between"
+                  >
+                    <div className="-ml-px text-sm w-1">{emoji}</div>
+                    <div className="text-sm pl-1 font-ropa-sans text-gray-800">
+                      {count}
+                    </div>
                  </div>
-                  <div className="text-sm pl-1 font-ropa-sans text-gray-800">
-                    {count}
-                  </div>
-                </div>
-              ))}</div>
+                ))}
+              </div>
            </Link>
          </li>
        ))}
--- a/web/src/components/ProfileTextInput/ProfileTextInput.js
+++ b/web/src/components/ProfileTextInput/ProfileTextInput.js
@@ -1,22 +1,30 @@
-import {Fragment} from 'react'
+import { Fragment } from 'react'

 import InputText from 'src/components/InputText'

-const ProfileTextInput = ({fields, isEditable, onChange= () => {}}) => {
+const ProfileTextInput = ({ fields, isEditable, onChange = () => {} }) => {
  return (
    <div>
-      <div className="grid items-center" style={{gridTemplateColumns: 'auto 1fr'}}>
-        {Object.entries(fields).map(([property, value]) => (<Fragment key={property}>
-          <span className="capitalize text-gray-500 text-sm align-middle my-3">{property}:</span>
+      <div
+        className="grid items-center"
+        style={{ gridTemplateColumns: 'auto 1fr' }}
+      >
+        {Object.entries(fields).map(([property, value]) => (
+          <Fragment key={property}>
+            <span className="capitalize text-gray-500 text-sm align-middle my-3">
+              {property}:
+            </span>

-          <InputText
-            className="text-xl"
-            value={value}
-            onChange={({target}) => onChange({...fields, [property]: target.value})}
-            isEditable={isEditable}
-          />
-
-        </Fragment>))}
+            <InputText
+              className="text-xl"
+              value={value}
+              onChange={({ target }) =>
+                onChange({ ...fields, [property]: target.value })
+              }
+              isEditable={isEditable}
+            />
+          </Fragment>
+        ))}
      </div>
    </div>
  )
--- a/web/src/components/Svg/Svg.js
+++ b/web/src/components/Svg/Svg.js
@@ -1,32 +1,113 @@
-const Svg = ({name, className: className2, strokeWidth = 2}) => {
-
+const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
  const svgs = {
-    "chevron-down": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M19 9l-7 7-7-7" />
-    </svg>,
-    "dots-vertical": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-    </svg>,
-    "pencil": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-    </svg>,
-    "plus":<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-    </svg>,
-    "plus-circle": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>,
-    "save": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-    </svg>,
-    "terminal": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-    </svg>,
+    'chevron-down': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M19 9l-7 7-7-7"
+        />
+      </svg>
+    ),
+    'dots-vertical': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+        />
+      </svg>
+    ),
+    pencil: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+        />
+      </svg>
+    ),
+    plus: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+        />
+      </svg>
+    ),
+    'plus-circle': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    ),
+    save: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+        />
+      </svg>
+    ),
+    terminal: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+        />
+      </svg>
+    ),
  }

-  return <div className={className2 || "h-10 w-10"}>
-    {svgs[name]}
-  </div>
+  return <div className={className2 || 'h-10 w-10'}>{svgs[name]}</div>
 }

 export default Svg
--- a/web/src/components/User2Cell/User2Cell.js
+++ b/web/src/components/User2Cell/User2Cell.js
@@ -18,6 +18,6 @@ export const Loading = () => <div>Loading...</div>

 export const Empty = () => <div>User not found</div>

-export const Success = ({user}) => {
+export const Success = ({ user }) => {
  return <UserProfile user={user} />
 }
--- a/web/src/components/UserProfile/UserProfile.js
+++ b/web/src/components/UserProfile/UserProfile.js
@@ -1,39 +1,41 @@
-import {useState, useEffect} from 'react'
+import { useState, useEffect } from 'react'
 import { useAuth } from '@redwoodjs/auth'
 import { navigate, routes } from '@redwoodjs/router'
-import Editor from "rich-markdown-editor";
+import Editor from 'rich-markdown-editor'

 import ImageUploader from 'src/components/ImageUploader'
 import Button from 'src/components/Button'
 import ProfileTextInput from 'src/components/ProfileTextInput'

-
-const UserProfile = ({user, isEditable, loading, onSave, error}) => {
+const UserProfile = ({ user, isEditable, loading, onSave, error }) => {
  const { currentUser } = useAuth()
  const canEdit = currentUser?.sub === user.id
-  useEffect(() => {isEditable &&
-    !canEdit &&
-    navigate(routes.user2({userName: user.userName}))},
-  [currentUser])
+  useEffect(() => {
+    isEditable &&
+      !canEdit &&
+      navigate(routes.user2({ userName: user.userName }))
+  }, [currentUser])
  const [input, setInput] = useState({
    userName: user.userName,
    name: user.name,
    bio: user.bio,
    image: user.image,
  })
-  const {userName, name} = input
-  const editableTextFields = {userName, name}
+  const { userName, name } = input
+  const editableTextFields = { userName, name }
  return (
    <>
      <section className="max-w-2xl mx-auto mt-20 ">
-        <div className="flex" >
+        <div className="flex">
          <div className="w-40 flex-shrink-0">
            <ImageUploader
              className="rounded-half rounded-br-lg shadow-md border-2 border-gray-200 border-solid"
-              onImageUpload={({cloudinaryPublicId: image}) => setInput({
-                ...input,
-                image,
-              })}
+              onImageUpload={({ cloudinaryPublicId: image }) =>
+                setInput({
+                  ...input,
+                  image,
+                })
+              }
              aspectRatio={1}
              isEditable={isEditable}
              imageUrl={user.image}
@@ -41,29 +43,53 @@ const UserProfile = ({user, isEditable, loading, onSave, error}) => {
            />
          </div>
          <div className="ml-6 flex flex-col justify-between">
-            <ProfileTextInput fields={editableTextFields} onChange={({userName, name}) => setInput({
-              ...input,
-              name,
-              userName: userName.replace(/([^a-zA-Z\d_:])/g, '-'),
-            })} isEditable={isEditable}/>
-            {isEditable ?
-              <Button className="bg-indigo-200" iconName="plus" onClick={() => onSave(user.userName, input)}>Save Profile</Button> : // TODO replace pencil with a save icon
-              canEdit ?
-              <Button className="bg-indigo-200" iconName="pencil" onClick={() => navigate(routes.editUser2({userName: user.userName}))}>Edit Profile</Button>:
-              null
-            }
+            <ProfileTextInput
+              fields={editableTextFields}
+              onChange={({ userName, name }) =>
+                setInput({
+                  ...input,
+                  name,
+                  userName: userName.replace(/([^a-zA-Z\d_:])/g, '-'),
+                })
+              }
+              isEditable={isEditable}
+            />
+            {isEditable ? (
+              <Button
+                className="bg-indigo-200"
+                iconName="plus"
+                onClick={() => onSave(user.userName, input)}
+              >
+                Save Profile
+              </Button> // TODO replace pencil with a save icon
+            ) : canEdit ? (
+              <Button
+                className="bg-indigo-200"
+                iconName="pencil"
+                onClick={() =>
+                  navigate(routes.editUser2({ userName: user.userName }))
+                }
+              >
+                Edit Profile
+              </Button>
+            ) : null}
          </div>
        </div>
        <div className="mt-10">
          <h3 className="text-3xl text-gray-500 font-ropa-sans">Bio:</h3>
-          <div name="description" className="markdown-overrides rounded-lg shadow-md bg-white p-12 my-6 min-h-md">
+          <div
+            name="description"
+            className="markdown-overrides rounded-lg shadow-md bg-white p-12 my-6 min-h-md"
+          >
            <Editor
              defaultValue={user.bio || ''}
              readOnly={!isEditable}
-              onChange={(bioFn) => setInput({
-                ...input,
-                bio: bioFn(),
-              })}
+              onChange={(bioFn) =>
+                setInput({
+                  ...input,
+                  bio: bioFn(),
+                })
+              }
            />
          </div>
        </div>