diff --git a/package.json b/package.json index 9b587d6..a1b675a 100644 --- a/package.json +++ b/package.json @@ -38,9 +38,8 @@ "react-dom": "^18.2.0", "react-dropdown-select": "^4.4.2", "react-ga4": "^2.1.0", - "react-hotkeys-hook": "^3.2.1", - "react-use": "^17.4.2", - "recoil": "^0.7.6", + "react-hotkeys-hook": "^4.4.3", + "recoil": "^0.7.7", "recoil-sync": "^0.2.0", "svg2png-converter": "^1.0.2", "tinycolor2": "^1.4.2" diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index 13427fc..a7b7fe4 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -6,7 +6,6 @@ import { ReactNode, } from "react"; import { useRecoilState } from "recoil"; -import { useDebounce } from "react-use"; import { useHotkeys } from "react-hotkeys-hook"; import { Command, @@ -16,6 +15,7 @@ import { } from "@phosphor-icons/react"; import ReactGA from "react-ga4"; +import { useDebounce } from "@/hooks"; import { searchQueryAtom } from "@/state"; import "./SearchInput.css"; @@ -33,7 +33,7 @@ const SearchInput = (_: SearchInputProps) => { const inputRef = useRef() as MutableRefObject; - useHotkeys("ctrl+k,cmd+k", (e) => { + useHotkeys("ctrl+k,meta+k", (e) => { e.preventDefault(); if (!e.repeat) { inputRef.current?.focus(); diff --git a/src/hooks/index.ts b/src/hooks/index.ts index eb8c161..a8ff9b8 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,7 +1,6 @@ export { default as useCSSVariables } from "./useCSSVariables"; export { default as useDebounce } from "./useDebounce"; export { default as useEvent } from "./useEvent"; -export { default as useIconParameters } from "./useIconParameters"; export { default as useLocalStorage } from "./useLocalStorage"; export { default as useMediaQuery } from "./useMediaQuery"; export { default as usePersistSettings } from "./usePersistSettings"; diff --git a/src/hooks/useIconParameters.ts b/src/hooks/useIconParameters.ts deleted file mode 100644 index 58f1138..0000000 --- a/src/hooks/useIconParameters.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { useEffect } from "react"; -import { useSearchParam } from "react-use"; -import { useSetRecoilState } from "recoil"; -import TinyColor from "tinycolor2"; -import { IconStyle } from "@phosphor-icons/core"; - -import { iconColorAtom, iconWeightAtom, iconSizeAtom } from "../state/atoms"; - -export default () => { - const weight = useSearchParam("weight")?.replace(/["']/g, ""); - const size = useSearchParam("size")?.replace(/["']/g, ""); - const color = useSearchParam("color")?.replace(/["']/g, ""); - - const setColor = useSetRecoilState(iconColorAtom); - const setWeight = useSetRecoilState(iconWeightAtom); - const setSize = useSetRecoilState(iconSizeAtom); - - useEffect(() => { - if (weight) { - if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle); - } - }, [weight, setWeight]); - - useEffect(() => { - if (size) { - const normalizedSize = parseInt(size); - if (typeof normalizedSize === "number" && isFinite(normalizedSize)) - setSize(Math.min(Math.max(normalizedSize, 16), 96)); - } - }, [size, setSize]); - - useEffect(() => { - if (color) { - const normalizedColor = TinyColor(color); - if (normalizedColor.isValid()) setColor(normalizedColor.toHexString()); - } - }, [color, setColor]); - - useEffect(() => { - if (!weight && !size && !color) { - const persistedState = JSON.parse( - window.localStorage.getItem("__phosphor_settings__") || "null" - ); - - if (!!persistedState) { - const { weight, size, color } = persistedState; - if (weight) { - if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle); - } - if (size) { - const normalizedSize = parseInt(size); - if (typeof normalizedSize === "number" && isFinite(normalizedSize)) - setSize(Math.min(Math.max(normalizedSize, 16), 96)); - } - if (color) { - const normalizedColor = TinyColor(color); - if (normalizedColor.isValid()) - setColor(normalizedColor.toHexString()); - } - } - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); -}; diff --git a/src/hooks/useThrottled.ts b/src/hooks/useThrottled.ts index beb40c1..0042768 100644 --- a/src/hooks/useThrottled.ts +++ b/src/hooks/useThrottled.ts @@ -1,21 +1,21 @@ -import { useRef, useEffect, useCallback } from "react"; +import { useRef, useEffect, useCallback, DependencyList } from "react"; -type Callback = (...args: any) => void; +type Callback> = (...args: T) => void; -export default ( - callback: Callback, +const useThrottled = >( + callback: Callback, delay: number, - dependencies: any[] = [] -) => { + dependencies: DependencyList = [] +): ((...args: T) => void) => { const throttleRef = useRef(false); - const callbackRef = useRef(callback); + const callbackRef = useRef>(callback); // Update the callback to be used, if it ever changes useEffect(() => { callbackRef.current = callback; }, [callback]); - return useCallback( + return useCallback>( (...args) => { if (throttleRef.current) return; @@ -29,3 +29,5 @@ export default ( [delay, ...dependencies] ); }; + +export default useThrottled; diff --git a/src/hooks/useTimeoutFn.ts b/src/hooks/useTimeoutFn.ts index f2f617a..7ff5288 100644 --- a/src/hooks/useTimeoutFn.ts +++ b/src/hooks/useTimeoutFn.ts @@ -1,6 +1,10 @@ import { useCallback, useEffect, useRef } from "react"; -export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void]; +export type UseTimeoutFnReturn = [ + isReady: () => boolean | null, + clear: () => void, + set: () => void +]; export default function useTimeoutFn( fn: Function, diff --git a/src/hooks/useTransientState.ts b/src/hooks/useTransientState.ts index b388185..e4ee9f1 100644 --- a/src/hooks/useTransientState.ts +++ b/src/hooks/useTransientState.ts @@ -1,11 +1,11 @@ /* eslint-disable */ import { useState, useEffect } from "react"; -import { useTimeoutFn } from "react-use"; +import useTimeoutFn from "./useTimeoutFn"; export default ( baseState: T, ms: number = 1000 -): [T, (transientValue: T) => void] => { +): [value: T, set: (transientValue: T) => void] => { const [value, setValue] = useState(baseState); const [, cancel, restart] = useTimeoutFn(() => setValue(baseState), ms);