From 0fc0b83602c67150cb9017a0695065a614bf0eac Mon Sep 17 00:00:00 2001
From: Clemens Solar <git@clemens.solar>
Date: Sun, 21 Jan 2024 21:26:51 +0100
Subject: [PATCH] fix: use different methods to handle changing parameters

---
 src/components/Customizer.tsx | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/Customizer.tsx b/src/components/Customizer.tsx
index f3d10b9..d0a9b7b 100644
--- a/src/components/Customizer.tsx
+++ b/src/components/Customizer.tsx
@@ -20,15 +20,16 @@ type Props = {
 };
 
 export default function Customizer({ parameters, onChange }: Props) {
-  const handleParameterChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    newValue?
-  ) => {
+  const changeParameter = (name: string, newValue?) => {
     const newParameters = parameters.map((parameter) => {
-      if (parameter.name === event.target.name) {
+      if (parameter.name === name) {
+        if (parameter.type === 'number') {
+          newValue = Number(newValue);
+        }
+
         return {
           ...parameter,
-          value: newValue || event.target.value,
+          value: newValue,
         };
       }
       return parameter;
@@ -36,6 +37,24 @@ export default function Customizer({ parameters, onChange }: Props) {
     onChange(newParameters);
   };
 
+  const handleParameterChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    newValue?
+  ) => {
+    changeParameter(event.target.name, event.target.value);
+  };
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    changeParameter(event.target.name, event.target.checked);
+  };
+
+  const handleAutocompleteChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    newValue?
+  ) => {
+    changeParameter(event.target.name, newValue);
+  };
+
   // Group parameters
   const groups = useMemo(
     () =>
@@ -121,7 +140,7 @@ export default function Customizer({ parameters, onChange }: Props) {
                       options={[]}
                       multiple
                       value={parameter.value as string[] | number[] | boolean[]}
-                      onChange={handleParameterChange}
+                      onChange={handleAutocompleteChange}
                       renderInput={(params) => {
                         return (
                           <TextField
@@ -152,7 +171,7 @@ export default function Customizer({ parameters, onChange }: Props) {
                         control={
                           <Checkbox
                             name={parameter.name}
-                            onChange={handleParameterChange}
+                            onChange={handleCheckboxChange}
                             checked={parameter.value === true}
                           />
                         }