Adds prettie & pre-commit hook

.github/workflows/deploy.yml

@@ -1,17 +1,14 @@
-name: Deploy to Render 
+name: Deploy to Render
 
-on:
-  push:
-    branches: [ master ]
+on: [push]
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
       - name: Deploy to production
-        uses: johnbeynon/render-deploy-action@v0.0.8
+        uses: fastndead/render-deploy-action@0.0.8-pre
         with:
           service-id: ${{ secrets.SERVICE_ID }}
           api-key: ${{ secrets.RENDER_API_KEY }}
-
-
+          wait-for-success: true

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn format
+yarn lint
+

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

.prettierrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  printWidth: 100,
+  semi: false,
+  trailingComma: "es5",
+  useTabs: false,
+  tabWidth: 2,
+  singleQuote: true,
+  quoteProps: "consistent",
+  jsxSingleQuote: true,
+  arrowParens: "always",
+  endOfLine: "lf",
+};

package.json

@@ -11,7 +11,9 @@
     "dev:server": "npx tsc --watch & nodemon -q build/server/index.js && fg",
     "test": "react-scripts test",
     "lint": "eslint src/**/*.{ts,tsx} --fix",
-    "eject": "react-scripts eject"
+    "format": "prettier --write src/**/*.{ts,tsx}",
+    "eject": "react-scripts eject",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@react-spring/web": "^9.7.1",
@@ -45,9 +47,11 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "nodemon": "^2.0.20",
+    "prettier": "^3.1.0",
     "stylelint": "^15.2.0",
     "stylelint-config-standard": "^30.0.1",
-    "tailwindcss": "^3.2.7"
+    "tailwindcss": "^3.2.7",
+    "husky": "^8.0.0"
   },
   "eslintConfig": {
     "extends": [

src/contexts/NotificationContextProvider.tsx

@@ -8,44 +8,66 @@ export type Notification = {
   timer?: ReturnType<typeof setTimeout>
 }
 
-export default function NotificationContextProvider({ children }: {children: ReactNode}) {
-  const [notifications, setNotifications] = useState<Map<string, Omit<Notification,'text'>>>(new Map())
-
-  const handleDismissFactory = useCallback((key: string) => () => {
-    setNotifications((prev) => {
-      prev.delete(key)
-      return new Map(prev)
-    })
-  }, [setNotifications])
+export default function NotificationContextProvider({ children }: { children: ReactNode }) {
+  const [notifications, setNotifications] = useState<Map<string, Omit<Notification, 'text'>>>(
+    new Map()
+  )
 
-  const addNotification = useCallback((notification: Notification) => {
-    const timer = setTimeout(() => {handleDismissFactory(notification.text)()}, 2000)
+  const handleDismissFactory = useCallback(
+    (key: string) => () => {
+      setNotifications((prev) => {
+        prev.delete(key)
+        return new Map(prev)
+      })
+    },
+    [setNotifications]
+  )
 
-    setNotifications((prev) => new Map([...prev, [notification.text, { type: notification.type, timer }]])) 
-  }, [setNotifications, handleDismissFactory])
+  const addNotification = useCallback(
+    (notification: Notification) => {
+      const timer = setTimeout(() => {
+        handleDismissFactory(notification.text)()
+      }, 2000)
+
+      setNotifications(
+        (prev) => new Map([...prev, [notification.text, { type: notification.type, timer }]])
+      )
+    },
+    [setNotifications, handleDismissFactory]
+  )
 
-  const formattedNotificatoins = useMemo(() => Array.from(notifications).map(item => ({ text: item[0], ...item[1] })), [notifications])
+  const formattedNotificatoins = useMemo(
+    () => Array.from(notifications).map((item) => ({ text: item[0], ...item[1] })),
+    [notifications]
+  )
 
   const [transitions, api] = useTransition(formattedNotificatoins, () => {
     return {
       key: (item: Notification) => item.text,
       from: { opacity: 0, y: -30 },
       enter: { opacity: 1, y: 0 },
       leave: { opacity: 0, y: -30 },
-      config: { tension: 310, friction: 20, mass: 2 }, 
-    } 
+      config: { tension: 310, friction: 20, mass: 2 },
+    }
   })
 
-  const handleMouseEnter = useCallback((key: string) => {
-    clearTimeout(notifications.get(key)?.timer)
-  }, [notifications])
-
-  const handleMouseLeave = useCallback((key: string) => {
-    const timer = setTimeout(() => {handleDismissFactory(key)()}, 2000)
-    const notification = notifications.get(key) || {} as Notification
-    notifications.set(key, { ...notification, timer } )
+  const handleMouseEnter = useCallback(
+    (key: string) => {
+      clearTimeout(notifications.get(key)?.timer)
+    },
+    [notifications]
+  )
 
-  }, [handleDismissFactory, notifications])
+  const handleMouseLeave = useCallback(
+    (key: string) => {
+      const timer = setTimeout(() => {
+        handleDismissFactory(key)()
+      }, 2000)
+      const notification = notifications.get(key) || ({} as Notification)
+      notifications.set(key, { ...notification, timer })
+    },
+    [handleDismissFactory, notifications]
+  )
 
   useEffect(() => {
     api.start()
@@ -54,7 +76,7 @@ export default function NotificationContextProvider({ children }: {children: Rea
   return (
     <NotificatoinsContext.Provider
       value={{
-        addNotification
+        addNotification,
       }}
     >
       {children}
@@ -63,7 +85,7 @@ export default function NotificationContextProvider({ children }: {children: Rea
       >
         {transitions((notifStyles, notif, state) => {
           return (
-            <Notification  
+            <Notification
               onDismiss={handleDismissFactory(notif.text)}
               key={state.key}
               text={notif.text}
@@ -79,7 +101,6 @@ export default function NotificationContextProvider({ children }: {children: Rea
   )
 }
 
-
 type NotificationProps = Notification & {
   style: CSSProperties
   onDismiss(): void
@@ -91,18 +112,16 @@ function Notification({ text, style, onDismiss, onMouseLeave, onMouseEnter }: No
   const [isHovered, setIsHovered] = useState<boolean>(false)
 
   const [spring] = useSpring(() => {
-    return isHovered
-      ? { scale: 1.1 }
-      : { scale: 1 }
+    return isHovered ? { scale: 1.1 } : { scale: 1 }
   }, [isHovered])
 
   const handleMouseEnter = useCallback(() => {
-    onMouseEnter && onMouseEnter() 
+    onMouseEnter && onMouseEnter()
     setIsHovered(true)
   }, [onMouseEnter, setIsHovered])
 
   const handleMouseLeave = useCallback(() => {
-    onMouseLeave && onMouseLeave() 
+    onMouseLeave && onMouseLeave()
     setIsHovered(false)
   }, [onMouseLeave, setIsHovered])
 

src/contexts/NotificationsContext.ts

@@ -5,4 +5,8 @@ type NotificationContextValue = {
   addNotification(notif: Notification): void
 }
 
-export const NotificatoinsContext = createContext<NotificationContextValue>({ addNotification: () => {/* */} })
+export const NotificatoinsContext = createContext<NotificationContextValue>({
+  addNotification: () => {
+    /* */
+  },
+})

src/hooks/useLocalStorage.ts

@@ -17,8 +17,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
 
   const setValue = (value: T | ((val: T) => T)) => {
     try {
-      const valueToStore =
-        value instanceof Function ? value(storedValue) : value
+      const valueToStore = value instanceof Function ? value(storedValue) : value
       setStoredValue(valueToStore)
       if (typeof window !== 'undefined') {
         window.localStorage.setItem(key, JSON.stringify(valueToStore))

src/hooks/useNotifications.ts

@@ -1,7 +1,7 @@
 import { NotificatoinsContext } from 'contexts/NotificationsContext'
 import { useContext } from 'react'
 
-export function useNotifications(){
+export function useNotifications() {
   const { addNotification } = useContext(NotificatoinsContext)
   return { addNotification }
 }

src/sockets/socket.ts

@@ -2,5 +2,5 @@ import io from 'socket.io-client'
 import { apiBaseUrl } from 'constants/constants'
 
 export const socket = io(`${apiBaseUrl}/`, {
-  withCredentials: true, 
+  withCredentials: true,
 })

yarn.lock

@@ -5210,6 +5210,11 @@ human-signals@^2.1.0:
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+husky@^8.0.0:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
+  integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
+
 [email protected]:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -7700,6 +7705,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
+prettier@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.0.tgz#c6d16474a5f764ea1a4a373c593b779697744d5e"
+  integrity sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz"