From a159c10a40061272bd8837a81fa32bc5b941b04c Mon Sep 17 00:00:00 2001 From: Asman Umbetov Date: Sat, 25 Nov 2023 12:00:00 +0300 Subject: [PATCH] Adds prettie & pre-commit hook --- .husky/pre-commit | 6 ++ .npmrc | 1 + .prettierrc.cjs | 12 +++ package.json | 8 +- src/contexts/NotificationContextProvider.tsx | 85 ++++++++++++-------- src/contexts/NotificationsContext.ts | 6 +- src/hooks/useLocalStorage.ts | 3 +- src/hooks/useNotifications.ts | 2 +- src/sockets/socket.ts | 2 +- yarn.lock | 10 +++ 10 files changed, 95 insertions(+), 40 deletions(-) create mode 100755 .husky/pre-commit create mode 100644 .npmrc create mode 100644 .prettierrc.cjs diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..3e9ba1a --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,6 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +yarn format +yarn lint + diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..214c29d --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +registry=https://registry.npmjs.org/ diff --git a/.prettierrc.cjs b/.prettierrc.cjs new file mode 100644 index 0000000..1b15ece --- /dev/null +++ b/.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", +}; diff --git a/package.json b/package.json index 0e235c7..654f9c9 100644 --- a/package.json +++ b/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": [ diff --git a/src/contexts/NotificationContextProvider.tsx b/src/contexts/NotificationContextProvider.tsx index 1a46d26..a704fc2 100644 --- a/src/contexts/NotificationContextProvider.tsx +++ b/src/contexts/NotificationContextProvider.tsx @@ -8,23 +8,38 @@ export type Notification = { timer?: ReturnType } -export default function NotificationContextProvider({ children }: {children: ReactNode}) { - const [notifications, setNotifications] = useState>>(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>>( + 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 { @@ -32,20 +47,27 @@ export default function NotificationContextProvider({ children }: {children: Rea 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 ( {children} @@ -63,7 +85,7 @@ export default function NotificationContextProvider({ children }: {children: Rea > {transitions((notifStyles, notif, state) => { return ( - (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]) diff --git a/src/contexts/NotificationsContext.ts b/src/contexts/NotificationsContext.ts index ab55bbe..dd0a213 100644 --- a/src/contexts/NotificationsContext.ts +++ b/src/contexts/NotificationsContext.ts @@ -5,4 +5,8 @@ type NotificationContextValue = { addNotification(notif: Notification): void } -export const NotificatoinsContext = createContext({ addNotification: () => {/* */} }) +export const NotificatoinsContext = createContext({ + addNotification: () => { + /* */ + }, +}) diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts index 56aefca..fc3b2f8 100644 --- a/src/hooks/useLocalStorage.ts +++ b/src/hooks/useLocalStorage.ts @@ -17,8 +17,7 @@ export function useLocalStorage(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)) diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts index 6b276c1..8a91051 100644 --- a/src/hooks/useNotifications.ts +++ b/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 } } diff --git a/src/sockets/socket.ts b/src/sockets/socket.ts index 9c2e6d0..2c62e2b 100644 --- a/src/sockets/socket.ts +++ b/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, }) diff --git a/yarn.lock b/yarn.lock index 0017534..3f2c233 100644 --- a/yarn.lock +++ b/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== + iconv-lite@0.4.24: 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"