Merge remote-tracking branch 'upstream/main' into work

ui/src/components/RenderProps/ListSearchResults/index.tsx

@@ -1,4 +1,3 @@
-import { useSearchParams } from "react-router-dom";
 import style from "./ListSearchResults.module.scss";
 import { ResourceType } from "components/General/ListItems/Resource/utils/types";
 import Search from "components/General/Search";
@@ -11,6 +10,7 @@ import { Typography } from "antd";
 import { filteredNews, filteredResource } from "./utils/helper";
 import { ReactElement } from "react";
 import { QUERY_KEY_NEWS } from "pages/Newsfeed/utils/constants";
+import useParamsValue from "lib/utils/hooks/useParamsValue";
 
 const { Title } = Typography;
 
@@ -22,7 +22,7 @@ const ListSearchResults = <T,>({
 	isError,
 	source = "",
 }: ListSearchResultsProps<T>): ReactElement => {
-	const [searchParams, setSearchParams] = useSearchParams();
+	const { searchParams, updateParamsValue } = useParamsValue({});
 
 	if (isError) {
 		return <Text text={API_ERROR} />;
@@ -47,8 +47,7 @@ const ListSearchResults = <T,>({
 	const categories = getCategories(items as ResourceType[], resourceName);
 
 	const onSearchCriteriaChange = (queryType: "q" | "cat", value: string) => {
-		searchParams.set(queryType, value);
-		setSearchParams(searchParams);
+		updateParamsValue(queryType, value);
 	};
 
 	return (

ui/src/lib/utils/hooks/useParamsValue.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+
+interface Params {
+	[key: string]: string;
+}
+
+const useParamsValue = (initialParams: Params) => {
+	const [searchParams, setSearchParams] = useSearchParams(initialParams);
+
+	const updateParamsValue = useCallback(
+		(key: string, value: string) => {
+			setSearchParams(
+				(prev) => {
+					prev.set(key, value);
+					return prev;
+				},
+				{ replace: true }
+			);
+		},
+		[setSearchParams]
+	);
+
+	useEffect(() => {
+		for (const key in initialParams) {
+			if (initialParams[key]) {
+				const element = initialParams[key];
+				updateParamsValue(key, element);
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return { searchParams, setSearchParams, updateParamsValue };
+};
+
+export default useParamsValue;

ui/src/pages/Colors/ColorPicker/index.tsx

@@ -7,40 +7,26 @@ 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,
 	});
 
 	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<HTMLInputElement>) => {
 		const input = e.target.value.trim();
-		setColor(input);
+		updateParamsValue("color", input);
 	};
 
 	return (
@@ -64,21 +50,17 @@ const ColorPicker: React.FC = () => {
 							<ColorFormatTags
 								currentFormat={format}
 								onSelect={(format) =>
-									setSearchParams(
-										(prev) => {
-											prev.set("format", format);
-											return prev;
-										},
-										{ replace: true }
-									)
+									updateParamsValue("format", format)
 								}
 							/>
 						</Form.Item>
 
 						<CP
 							format={format}
 							value={color}
-							onChange={setColor}
+							onChange={(value) =>
+								updateParamsValue("color", value)
+							}
 							size="xl"
 						/>
 					</Space>

ui/src/pages/Colors/ShadesAndTints/index.tsx

@@ -11,55 +11,54 @@ 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<string[]>([]);
 	const [tints, setTints] = useState<string[]>([]);
-	const [percentage, setPercentage] = useState(
-		Number(searchParams.get("percentage")) || Number(params.percentage)
-	);
 
 	const [option, setOption] = useState<SelectOption>(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"]);
 	useCombinedKeyPress(resetInputs, ["ControlLeft", "KeyR"]);
 
 	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 (
 		<div className={styles.st}>
 			<ColorInputs
 				color={color}
-				handleColorChange={(e) => 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}