Parameters: refactor and add more supported params

This patch replaces the component-based URL Parameter matcher with a
hook-based approach. We now watch for, parse, and normalize URL params
for 'color', 'weight', and 'size'.

src/components/App/App.tsx

@@ -1,22 +1,22 @@
 import React, { Suspense } from "react";
 
 import "./App.css";
-import Parameters from "../Parameters/Parameters";
 import Header from "../Header/Header";
 import Toolbar from "../Toolbar/Toolbar";
 import IconGrid from "../IconGrid/IconGrid";
 import Footer from "../Footer/Footer";
 import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
 import Notice from "../Notice/Notice";
+import useIconParameters from "../../hooks/useIconParameters";
 
 const errorFallback = <Notice message="Search error" />;
-// const waitingFallback = <Notice type="wait" message="Loading..." />;
 const waitingFallback = <Notice type="none" message="" />;
 
 const App: React.FC<any> = () => {
+  useIconParameters();
+
   return (
     <React.StrictMode>
-      <Parameters />
       <Header />
       <main>
         <Toolbar />

src/components/Parameters/Parameters.tsx

@@ -1,22 +0,0 @@
-import React, { useEffect } from "react";
-import { useSearchParam } from "react-use";
-import { useSetRecoilState } from "recoil";
-import TinyColor from "tinycolor2";
-
-import { iconColorAtom } from "../../state/atoms";
-
-const Parameters: React.FC<{}> = () => {
-  const color = useSearchParam("color")?.replace(/["']/g, "");
-  const setColor = useSetRecoilState(iconColorAtom);
-
-  useEffect(() => {
-    if (color) {
-      const normalizedColor = TinyColor(color);
-      if (normalizedColor.isValid()) setColor(normalizedColor.toHexString());
-    }
-  }, [color, setColor]);
-
-  return null;
-};
-
-export default Parameters;

src/hooks/useIconParameters.ts

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { useSearchParam } from "react-use";
+import { useSetRecoilState } from "recoil";
+import TinyColor from "tinycolor2";
+import { iconColorAtom, iconWeightAtom, iconSizeAtom } from "../state/atoms";
+import { IconStyle } from "../lib";
+
+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]);
+};