From eff9150ce74e5f8fbad26150445e3e95862a85c7 Mon Sep 17 00:00:00 2001 From: lifeparticle Date: Sun, 24 Sep 2023 20:36:46 +1000 Subject: [PATCH] fix lint errors --- ui/src/lib/utils/hooks/useParamsValue.ts | 42 ++++++++++++++++++++ ui/src/lib/utils/hooks/useUrlParams.ts | 39 ------------------ ui/src/pages/Colors/ColorPicker/index.tsx | 36 +++++------------ ui/src/pages/Colors/ShadesAndTints/index.tsx | 41 ++++++++++--------- 4 files changed, 71 insertions(+), 87 deletions(-) create mode 100644 ui/src/lib/utils/hooks/useParamsValue.ts delete mode 100644 ui/src/lib/utils/hooks/useUrlParams.ts diff --git a/ui/src/lib/utils/hooks/useParamsValue.ts b/ui/src/lib/utils/hooks/useParamsValue.ts new file mode 100644 index 00000000..8a506ce7 --- /dev/null +++ b/ui/src/lib/utils/hooks/useParamsValue.ts @@ -0,0 +1,42 @@ +import { useCallback, useEffect, useRef } from "react"; +import { useSearchParams } from "react-router-dom"; + +interface Params { + [key: string]: string; +} + +const useParamsValue = (initialParams: Params) => { + const count = useRef(0); + + const [searchParams, setSearchParams] = useSearchParams(initialParams); + + const updateParamsValue = useCallback( + (key: string, value: string) => { + console.log(key, value); + setSearchParams( + (prev) => { + prev.set(key, value); + return prev; + }, + { replace: true } + ); + }, + [setSearchParams] + ); + + useEffect(() => { + if (count.current === 0) { + for (const key in initialParams) { + if (initialParams[key]) { + const element = initialParams[key]; + updateParamsValue(key, element); + } + } + count.current = 1; + } + }, [updateParamsValue, initialParams]); + + return { searchParams, setSearchParams, updateParamsValue }; +}; + +export default useParamsValue; diff --git a/ui/src/lib/utils/hooks/useUrlParams.ts b/ui/src/lib/utils/hooks/useUrlParams.ts deleted file mode 100644 index 43bb6046..00000000 --- a/ui/src/lib/utils/hooks/useUrlParams.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { useState, useEffect } from "react"; -import { useSearchParams } from "react-router-dom"; - -interface Params { - [key: string]: string | number | null; -} - -const useUrlParams = (initialParams: Params) => { - const [searchParams, setSearchParams] = useSearchParams(); - const [params, setParams] = useState(initialParams); - - useEffect(() => { - let updated = false; - const newParams = { ...params }; - - Object.keys(initialParams).forEach((key) => { - const value = searchParams.get(key); - - if (value !== null && params[key] !== value) { - newParams[key] = value; - updated = true; - } - }); - - if (updated) { - setParams(newParams); - } - }, [searchParams, initialParams, params]); - - const updateParams = (key: string, value: string | number) => { - searchParams.set(key, String(value)); - setSearchParams(searchParams); - setParams((prevParams) => ({ ...prevParams, [key]: value })); - }; - - return [params, updateParams, searchParams] as const; -}; - -export default useUrlParams; diff --git a/ui/src/pages/Colors/ColorPicker/index.tsx b/ui/src/pages/Colors/ColorPicker/index.tsx index 946872f7..bdf4a710 100644 --- a/ui/src/pages/Colors/ColorPicker/index.tsx +++ b/ui/src/pages/Colors/ColorPicker/index.tsx @@ -7,14 +7,14 @@ import ColorFormatTags from "./components/ColorFormatTags"; import Clipboard from "components/RenderProps/Clipboard"; import ClipboardButton from "components/General/ClipboardButton"; import DisplayColors from "./components/DisplayColors"; -import { FormatType } from "./utils/types"; -import { calculateColors, determineFormat } from "./utils/helper"; +import { calculateColors } from "./utils/helper"; import CopyInput from "components/Layouts/CopyInput"; import { ResponsiveInputWithLabel } from "components/General/FormComponents"; -import { useSearchParams } from "react-router-dom"; +import useParamsValue from "lib/utils/hooks/useParamsValue"; +import { FormatType } from "./utils/types"; const ColorPicker: React.FC = () => { - const [searchParams, setSearchParams] = useSearchParams({ + const { searchParams, updateParamsValue } = useParamsValue({ color: INITIAL_COLOR, format: INITIAL_FORMAT, }); @@ -22,25 +22,11 @@ const ColorPicker: React.FC = () => { const color = String(searchParams.get("color")); const format = String(searchParams.get("format")) as FormatType; - console.log(color, format); - const colors = useMemo(() => calculateColors(color), [color]); - console.log(colors); - - const setColor = (color: string) => { - setSearchParams( - (prev) => { - prev.set("color", color); - prev.set("format", determineFormat(color)); - return prev; - }, - { replace: true } - ); - }; const onInputChange = (e: ChangeEvent) => { const input = e.target.value.trim(); - setColor(input); + updateParamsValue("color", input); }; return ( @@ -64,13 +50,7 @@ const ColorPicker: React.FC = () => { - setSearchParams( - (prev) => { - prev.set("format", format); - return prev; - }, - { replace: true } - ) + updateParamsValue("format", format) } /> @@ -78,7 +58,9 @@ const ColorPicker: React.FC = () => { + updateParamsValue("color", value) + } size="xl" /> diff --git a/ui/src/pages/Colors/ShadesAndTints/index.tsx b/ui/src/pages/Colors/ShadesAndTints/index.tsx index 75a55e73..fc9c70d1 100644 --- a/ui/src/pages/Colors/ShadesAndTints/index.tsx +++ b/ui/src/pages/Colors/ShadesAndTints/index.tsx @@ -11,29 +11,26 @@ import { SelectOption } from "./utils/types"; import PageGrid from "components/Layouts/PageGrid"; import Colors from "./components/Colors"; import ColorInputs from "./components/ColorInputs"; -import useUrlParams from "lib/utils/hooks/useUrlParams"; +import useParamsValue from "lib/utils/hooks/useParamsValue"; const ShadesAndTints: React.FC = () => { - const [params, updateUrlParam, searchParams] = useUrlParams({ + const { searchParams, updateParamsValue } = useParamsValue({ color: DEFAULT_COLOR, - percentage: DEFAULT_NUM_SHADES, + percentage: DEFAULT_NUM_SHADES.toString(), }); - const [color, setColor] = useState( - searchParams.get("color") || (params.color as string) - ); + const color = String(searchParams.get("color")); + const percentage = String(searchParams.get("percentage")); + const [shades, setShades] = useState([]); const [tints, setTints] = useState([]); - const [percentage, setPercentage] = useState( - Number(searchParams.get("percentage")) || Number(params.percentage) - ); const [option, setOption] = useState(OUTPUT_FORMAT[0]); const [isPending, startTransition] = useTransition(); const resetInputs = () => { - setColor(DEFAULT_COLOR); - setPercentage(DEFAULT_NUM_SHADES); + updateParamsValue("color", DEFAULT_COLOR); + updateParamsValue("percentage", DEFAULT_NUM_SHADES.toString()); }; useCombinedKeyPress(resetInputs, ["ControlLeft", "KeyE"]); @@ -41,25 +38,27 @@ const ShadesAndTints: React.FC = () => { useEffect(() => { startTransition(() => { - const { shades, tints } = generateShadesForColor(color, percentage); + const { shades, tints } = generateShadesForColor( + color, + Number(percentage) + ); setShades(shades); setTints(tints); }); }, [color, percentage]); - useEffect(() => { - updateUrlParam("color", color); - updateUrlParam("percentage", String(percentage)); - }, [color, percentage]); - return (
setColor(e.target.value)} - handlePercentageChange={(num) => num && setPercentage(num)} - setColor={setColor} - percentage={percentage} + handleColorChange={(e) => + updateParamsValue("color", e.target.value) + } + handlePercentageChange={(num) => + num && updateParamsValue("percentage", num.toString()) + } + setColor={(value) => updateParamsValue("color", value)} + percentage={Number(percentage)} handleOutputFormatChange={setOption} option={option} shades={shades}