beam refactor

lifeparticle · Oct 25, 2023 · 06423d7 · 06423d7
1 parent 2a21df8
commit 06423d7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git a/ui/src/components/General/Beam/index.tsx b/ui/src/components/General/Beam/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Drawer, Space } from "antd";
 import Icon from "components/General/Icon";
 import style from "./Beam.module.scss";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { ResponsiveButton } from "../FormComponents";
 import { BeamDetail } from "components/Hoc/withPageTitle/utils/constants";
 
@@ -13,6 +13,8 @@ interface BeamProps {
 const Beam: React.FC<BeamProps> = ({ beamObject }) => {
 	const [open, setOpen] = useState(false);
 
+	const [searchParams] = useSearchParams();
+
 	const showDrawer = () => {
 		setOpen(true);
 	};
@@ -21,6 +23,27 @@ const Beam: React.FC<BeamProps> = ({ beamObject }) => {
 		setOpen(false);
 	};
 
+	const buildURL = (beam: BeamDetail) => {
+		const url = beam.url;
+		let params = "";
+
+		if (beam.queryParams) {
+			beam.queryParams.forEach((queryParam, index, array) => {
+				params += `${queryParam.map.to}=${encodeURIComponent(
+					searchParams.get(queryParam.map.from) as string
+				)}`;
+
+				if (index !== array.length - 1) {
+					params += "&";
+				}
+			});
+		}
+
+		console.log(`${url}?${params}`);
+
+		return `${url}?${params}`;
+	};
+
 	const navigate = useNavigate();
 
 	if (beamObject.length === 0) return null;
@@ -44,11 +67,7 @@ const Beam: React.FC<BeamProps> = ({ beamObject }) => {
 						<ResponsiveButton
 							key={beam.name}
 							onClick={() => {
-								navigate(
-									`${beam.url}?color=${encodeURIComponent(
-										beam.queryParams?.color as string
-									)}`
-								);
+								navigate(buildURL(beam));
 								setOpen(false);
 							}}
 						>

diff --git a/ui/src/components/Hoc/withPageTitle/utils/constants.ts b/ui/src/components/Hoc/withPageTitle/utils/constants.ts
@@ -8,10 +8,19 @@ interface Help {
 	[key: string]: HelpEntry;
 }
 
+interface MapDetail {
+	from: string;
+	to: string;
+}
+
+interface QueryParamDetail {
+	map: MapDetail;
+}
+
 interface BeamDetail {
-	name?: string;
-	url?: string;
-	queryParams?: { [key: string]: string }; // Change queryParams to accept key-value pairs
+	name: string;
+	url: string;
+	queryParams: QueryParamDetail[];
 }
 
 interface Beam {
@@ -50,21 +59,17 @@ const BEAM: Beam = {
 		{
 			name: routesById.shadesandtints.title,
 			url: routesById.shadesandtints.path,
-			queryParams: {
-				color: "",
-			},
+			queryParams: [{ map: { from: "color", to: "color" } }],
 		},
 	],
 	[routesById.shadesandtints.id]: [
 		{
 			name: routesById.colorpicker.title,
 			url: routesById.colorpicker.path,
-			queryParams: {
-				color: "",
-			},
+			queryParams: [{ map: { from: "color", to: "color" } }],
 		},
 	],
 };
 
-export type { HelpEntry, BeamDetail, Beam };
+export type { HelpEntry, BeamDetail, Beam, QueryParamDetail };
 export { HELP, NO_PADDING, NO_TITLE, BEAM };
diff --git a/ui/src/components/Hoc/withPageTitle/utils/hooks.ts b/ui/src/components/Hoc/withPageTitle/utils/hooks.ts
@@ -1,5 +1,5 @@
 import { routes } from "data/routeData";
-import { useLocation, useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { BEAM, HELP } from "./constants";
 
 const usePageTitle = () => {
@@ -12,18 +12,11 @@ const usePageTitle = () => {
 
 	const { title, description, id } = page;
 
-	const searchParams = useSearchParams();
-	const color = searchParams[0].get("color") || "";
-
-	const beams = BEAM[id]
-		? BEAM[id].map((beam) => ({ ...beam, queryParams: { color } }))
-		: [];
-
 	return {
 		title,
 		description,
 		helpObject: HELP[id] || {},
-		beamObject: beams,
+		beamObject: BEAM[id],
 		url: `https://binarytree.dev${pathname}`,
 	};
 };