Add Pre-Commit Hook (#67)

* testing husky * testing husky * testing husky * testing husky * testing husky * testing husky * testing husky * testing husky * testing husky * chore: Update README.md with linting instructions
Bendomey · Mar 10, 2024 · 79a2ee1 · 79a2ee1
1 parent 19729ef
commit 79a2ee1
Show file tree

Hide file tree

Showing 18 changed files with 728 additions and 522 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+yarn format && git add .
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ mfoni is a platform revolutionizing event photography, our app empowers photogra
 
 In an era with abundant public events, we address the challenge of strangers missing out on their event photos. By leveraging advertising, photographers direct users to our platform, where cutting-edge facial recognition technology ensures a seamless connection between photographers and event attendees. Capture and relive moments effortlessly with our innovative image recognition and facial identification features
 
-# Run
+## Run
 
 > Run both frontend and api simultaneously with make
 > `make run`
@@ -19,6 +19,11 @@ In an era with abundant public events, we address the challenge of strangers mis
 
 `infrastructure` - Where our terraform/ansible configuration files live.
 
+## Linting
+
+In our development environment, we utilize pre-commit hooks to automatically format and lint your changes. To enable this feature, you'll need to run `yarn install` in the root directory to install the Husky package.
+> Skipping this step could result in errors when committing your changes.
+
 ## Tech Stack + Features
 
 ### Frameworks

diff --git a/apps/client/app/components/Content/index.tsx b/apps/client/app/components/Content/index.tsx
@@ -35,7 +35,10 @@ export const Content = ({content, showFlyout = false}: Props) => {
           </div>
           <div className="group-hover:flex hidden flex-row items-center justify-between">
             {showFlyout ? (
-              <FlyoutContainer intendedPosition='y' FlyoutContent={PhotographerCreatorCard}>
+              <FlyoutContainer
+                intendedPosition="y"
+                FlyoutContent={PhotographerCreatorCard}
+              >
                 <div className="flex items-center">
                   <img
                     className="inline-block h-7 w-7 rounded-full"

diff --git a/apps/client/app/components/animation/Underline.tsx b/apps/client/app/components/animation/Underline.tsx
@@ -1,12 +1,10 @@
-
-
-export const AnimateUnderline = ({ show = false  }: { show?: boolean }) => {
-    return (
-        <span
-            style={{
-                transform: show ? 'scaleX(1)' : 'scaleX(0)',
-            }}
-            className="absolute -bottom-2 -left-2 -right-2 h-1 origin-left scale-x-0 rounded-full bg-blue-300 transition-transform duration-300 ease-out"
-        />
-    )
-}
+export const AnimateUnderline = ({show = false}: {show?: boolean}) => {
+  return (
+    <span
+      style={{
+        transform: show ? 'scaleX(1)' : 'scaleX(0)',
+      }}
+      className="absolute -bottom-2 -left-2 -right-2 h-1 origin-left scale-x-0 rounded-full bg-blue-300 transition-transform duration-300 ease-out"
+    />
+  )
+}
diff --git a/apps/client/app/components/button/index.tsx b/apps/client/app/components/button/index.tsx
@@ -15,7 +15,7 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
     | 'light'
     | 'dark'
     | 'link'
-  size?: 'sm' | 'md' | 'lg' | "xl"
+  size?: 'sm' | 'md' | 'lg' | 'xl'
   type?: 'button' | 'submit' | 'reset'
   externalClassName?: string
 }

diff --git a/apps/client/app/components/flyout/flyout-container.tsx b/apps/client/app/components/flyout/flyout-container.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react'
-import { useBoolean } from '@/hooks/use-boolean.ts'
-import { AnimatePresence, motion } from 'framer-motion'
+import {useBoolean} from '@/hooks/use-boolean.ts'
+import {AnimatePresence, motion} from 'framer-motion'
 
 type Props = {
   children: React.ReactNode
@@ -14,132 +14,162 @@ type Props = {
    * x - left or right depending on screen positioning
    * @default "x"
    */
-  intendedPosition: "x" | "y"
+  intendedPosition: 'x' | 'y'
   arrowColor?: string
 }
 
-export const FlyoutContainer = ({ children, FlyoutContent, intendedPosition = "y", arrowColor = "bg-black" }: Props) => {
-  const { value: open, setValue: setOpen } = useBoolean(false)
-  const [position, setPosition] = React.useState<"top" | "bottom" | "left" | "right">("bottom")
+export const FlyoutContainer = ({
+  children,
+  FlyoutContent,
+  intendedPosition = 'y',
+  arrowColor = 'bg-black',
+}: Props) => {
+  const {value: open, setValue: setOpen} = useBoolean(false)
+  const [position, setPosition] = React.useState<
+    'top' | 'bottom' | 'left' | 'right'
+  >('bottom')
 
   React.useEffect(() => {
     //set initial position
-    if (intendedPosition === "x") {
-      setPosition("right")
+    if (intendedPosition === 'x') {
+      setPosition('right')
     } else {
-      setPosition("bottom")
+      setPosition('bottom')
     }
   }, [])
 
   const showFlyout = FlyoutContent && open
 
-  const handleMouseEnter = React.useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    if (intendedPosition === "x") {
-      const { x } = e.currentTarget.getBoundingClientRect()
-      const { innerWidth } = window
+  const handleMouseEnter = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      if (intendedPosition === 'x') {
+        const {x} = e.currentTarget.getBoundingClientRect()
+        const {innerWidth} = window
 
-      if (x > innerWidth / 2) {
-        setPosition("left")
+        if (x > innerWidth / 2) {
+          setPosition('left')
+        } else {
+          setPosition('right')
+        }
       } else {
-        setPosition("right")
-      }
-    } else {
-      const { y } = e.currentTarget.getBoundingClientRect()
-      const { innerHeight } = window
+        const {y} = e.currentTarget.getBoundingClientRect()
+        const {innerHeight} = window
 
-      if (y > innerHeight / 2) {
-        setPosition("top")
-      } else {
-        setPosition("bottom")
+        if (y > innerHeight / 2) {
+          setPosition('top')
+        } else {
+          setPosition('bottom')
+        }
       }
-    }
-    setOpen(true)
-  }, [])
+      setOpen(true)
+    },
+    [],
+  )
 
   const flyoutPosition = React.useMemo(() => {
-
     switch (position) {
       case 'top':
         return `bottom-7 left-1/2`
       case 'bottom':
         return `top-7 left-1/2`
-        case 'left':
-          return "right-36 top-1/2"
-        case 'right':
-          return "left-36 top-1/2"
-        default:
-          return ""
+      case 'left':
+        return 'right-36 top-1/2'
+      case 'right':
+        return 'left-36 top-1/2'
+      default:
+        return ''
     }
   }, [position])
 
   const flyoutContentContainer = React.useMemo(() => {
     switch (position) {
       case 'top':
-        return "flex-col-reverse"
+        return 'flex-col-reverse'
       case 'bottom':
-        return "flex-col"
-        case 'left':
-          return "flex-row-reverse"
-        case 'right':
-          return "flex-row"
-        default:
-          return ""
+        return 'flex-col'
+      case 'left':
+        return 'flex-row-reverse'
+      case 'right':
+        return 'flex-row'
+      default:
+        return ''
     }
   }, [position])
 
   const arrowPosition = React.useMemo(() => {
     switch (position) {
       case 'top':
-        return "-translate-x-1/2 -translate-y-1/2"
+        return '-translate-x-1/2 -translate-y-1/2'
       case 'bottom':
-        return "translate-x-1/2 translate-y-1/2"
-        case 'left':
-          return "-translate-x-1/2 -translate-y-1/2"
-        case 'right':
-          return "translate-x-1/2 "
-        default:
-          return ""
+        return 'translate-x-1/2 translate-y-1/2'
+      case 'left':
+        return '-translate-x-1/2 -translate-y-1/2'
+      case 'right':
+        return 'translate-x-1/2 '
+      default:
+        return ''
     }
   }, [position])
 
   return (
     <div
       onMouseEnter={handleMouseEnter}
       onMouseLeave={() => setOpen(false)}
-
       className="relative w-fit h-fit cursor-pointer"
     >
-      <div className="relative text-white">
-        {children}
-      </div>
+      <div className="relative text-white">{children}</div>
       <AnimatePresence>
         {showFlyout ? (
           <motion.div
-            initial={{ 
-              opacity: 0, 
-              x: intendedPosition === "x" ? position === "left" ? -15 : 15 : undefined, 
-              y: intendedPosition === "y" ? position === "top" ? -15 : 15 : undefined 
+            initial={{
+              opacity: 0,
+              x:
+                intendedPosition === 'x'
+                  ? position === 'left'
+                    ? -15
+                    : 15
+                  : undefined,
+              y:
+                intendedPosition === 'y'
+                  ? position === 'top'
+                    ? -15
+                    : 15
+                  : undefined,
             }}
-            animate={{ 
-              opacity: 1, 
-              x: intendedPosition === "x" ? 0 : undefined, 
-              y: intendedPosition === "y" ? 0 : undefined 
+            animate={{
+              opacity: 1,
+              x: intendedPosition === 'x' ? 0 : undefined,
+              y: intendedPosition === 'y' ? 0 : undefined,
             }}
-            exit={{ 
-              opacity: 0, 
-              x: intendedPosition === "x" ? position === "left" ? -15 : 15 : undefined, 
-              y: intendedPosition === "y" ? position === "top" ? -15 : 15 : undefined 
+            exit={{
+              opacity: 0,
+              x:
+                intendedPosition === 'x'
+                  ? position === 'left'
+                    ? -15
+                    : 15
+                  : undefined,
+              y:
+                intendedPosition === 'y'
+                  ? position === 'top'
+                    ? -15
+                    : 15
+                  : undefined,
             }}
-            style={{ 
-              translateY: intendedPosition === "x" ? '-50%' : undefined, 
-              translateX: intendedPosition === "y" ? '-50%' : undefined 
+            style={{
+              translateY: intendedPosition === 'x' ? '-50%' : undefined,
+              translateX: intendedPosition === 'y' ? '-50%' : undefined,
             }}
-            transition={{ duration: 0.3, ease: 'easeOut' }}
+            transition={{duration: 0.3, ease: 'easeOut'}}
             className={`absolute z-10 ${flyoutPosition} text-white  "`}
           >
             <div className="absolute -top-6 left-0 right-0 h-6 bg-transparent" />
-            <div className={`flex ${flyoutContentContainer} items-center w-full`}>
-              <div className={`h-4 w-4 ${arrowPosition} rotate-45 ${arrowColor}`} />
+            <div
+              className={`flex ${flyoutContentContainer} items-center w-full`}
+            >
+              <div
+                className={`h-4 w-4 ${arrowPosition} rotate-45 ${arrowColor}`}
+              />
               <FlyoutContent />
             </div>
           </motion.div>

diff --git a/apps/client/app/modules/account/verify/components/verify-phone-step/send.tsx b/apps/client/app/modules/account/verify/components/verify-phone-step/send.tsx
@@ -1,17 +1,17 @@
-import { useUpdatePhone } from '@/api/users/index.ts'
-import { Button } from '@/components/button/index.tsx'
-import { yupResolver } from '@hookform/resolvers/yup'
+import {useUpdatePhone} from '@/api/users/index.ts'
+import {Button} from '@/components/button/index.tsx'
+import {yupResolver} from '@hookform/resolvers/yup'
 import * as Yup from 'yup'
-import { useForm } from 'react-hook-form'
-import { classNames } from '@/lib/classNames.ts'
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
-import { errorMessagesWrapper } from '@/constants/error-messages.ts'
-import { toast } from 'react-hot-toast'
-import { useEffect } from 'react'
-import { useAuth } from '@/providers/auth/index.tsx'
-import { useQueryClient } from '@tanstack/react-query'
-import { QUERY_KEYS } from '@/constants/index.ts'
-import { Loader } from '@/components/loader/index.tsx'
+import {useForm} from 'react-hook-form'
+import {classNames} from '@/lib/classNames.ts'
+import {ExclamationCircleIcon} from '@heroicons/react/24/outline'
+import {errorMessagesWrapper} from '@/constants/error-messages.ts'
+import {toast} from 'react-hot-toast'
+import {useEffect} from 'react'
+import {useAuth} from '@/providers/auth/index.tsx'
+import {useQueryClient} from '@tanstack/react-query'
+import {QUERY_KEYS} from '@/constants/index.ts'
+import {Loader} from '@/components/loader/index.tsx'
 
 const schema = Yup.object().shape({
   phoneNumber: Yup.string()
@@ -28,15 +28,15 @@ interface Props {
   setPage: React.Dispatch<React.SetStateAction<'SendOTP' | 'VerifyOTP'>>
 }
 
-export const SendOtp = ({ setPage }: Props) => {
-  const { currentUser } = useAuth()
+export const SendOtp = ({setPage}: Props) => {
+  const {currentUser} = useAuth()
   const queryClient = useQueryClient()
-  const { mutate, isPending: isLoading } = useUpdatePhone()
+  const {mutate, isPending: isLoading} = useUpdatePhone()
 
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: {errors},
     setValue,
   } = useForm<FormValues>({
     resolver: yupResolver(schema),
@@ -96,7 +96,7 @@ export const SendOtp = ({ setPage }: Props) => {
             </div>
             <input
               type="text"
-              {...register('phoneNumber', { required: true })}
+              {...register('phoneNumber', {required: true})}
               className={classNames(
                 'block w-full rounded-md border-0 py-3 pl-16 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6',
                 errors.phoneNumber ? 'ring-red-500' : 'ring-gray-300',
@@ -114,8 +114,6 @@ export const SendOtp = ({ setPage }: Props) => {
           </div>
         </div>
 
-
-
         {isLoading ? (
           <div className="mt-10 flex justify-center items-center">
             <Loader color="fill-blue-600" />