From af7a2dd8cac92d979cdc733bf1d2f5cfce2e024e Mon Sep 17 00:00:00 2001
From: jLynx <admin@jlynx.net>
Date: Mon, 9 Dec 2024 22:36:52 +1300
Subject: [PATCH] feat: implement UI configuration modal and refactor UI state
 management (#80)

---
 src/components/Controller/Controller.tsx      | 91 +++----------------
 .../UIConfigurationModal.tsx                  | 82 +++++++++++++++++
 src/hooks/useUIConfig.ts                      | 32 +++++++
 3 files changed, 126 insertions(+), 79 deletions(-)
 create mode 100644 src/components/UIConfigurationModal/UIConfigurationModal.tsx
 create mode 100644 src/hooks/useUIConfig.ts

diff --git a/src/components/Controller/Controller.tsx b/src/components/Controller/Controller.tsx
index 1c22a6b..f0c1f8a 100644
--- a/src/components/Controller/Controller.tsx
+++ b/src/components/Controller/Controller.tsx
@@ -3,7 +3,6 @@
 import {
   faRotate,
   faCheckCircle,
-  faGears,
   faGear,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -21,13 +20,15 @@ import { useSerial } from "@/components/SerialLoader/SerialLoader";
 import ToggleSwitch from "@/components/ToggleSwitch/ToggleSwitch";
 import { useDeviceSetup } from "@/hooks/useDeviceSetup";
 import { useScreenFrame } from "@/hooks/useScreenFrame";
-import { ConfigItem, ILatestVersions, IUIConfig } from "@/types";
+import { useUIConfig } from "@/hooks/useUIConfig";
+import { ILatestVersions } from "@/types";
 import { downloadFileFromUrl, useWriteCommand } from "@/utils/serialUtils";
 import {
   getVersionType,
   nightlyVersionFormat,
   stableVersionFormat,
 } from "@/utils/versionUtils";
+import UIConfigurationModal from "../UIConfigurationModal/UIConfigurationModal";
 
 const Controller = () => {
   const [consoleMessageList, setConsoleMessageList] = useState<string>("");
@@ -49,37 +50,6 @@ const Controller = () => {
 
   const [UIConfigurationOpen, setUIConfigurationOpen] =
     useState<boolean>(false);
-  const [UIConfig, setUiConfig] = useState<IUIConfig>({
-    screenHide: false,
-    controlButtonsHide: false,
-    fileSystemHide: false,
-    serialConsoleHide: false,
-    firmwareManagerHide: false,
-  });
-
-  const uiConfigItems: ConfigItem[] = [
-    {
-      key: "controlButtonsHide",
-      label: "Hide Control Buttons",
-    },
-    {
-      key: "screenHide",
-      label: "Hide Screen",
-      onToggle: () => toggleLiveScreen(!UIConfig.screenHide),
-    },
-    {
-      key: "fileSystemHide",
-      label: "Hide File System",
-    },
-    {
-      key: "serialConsoleHide",
-      label: "Hide Serial Console",
-    },
-    {
-      key: "firmwareManagerHide",
-      label: "Hide Firmware Manager",
-    },
-  ];
 
   const { serial, consoleMessage } = useSerial();
   const { write, uploadFile, disableTransmitAction, setLoadingFrame } =
@@ -92,6 +62,7 @@ const Controller = () => {
     setLatestVersion,
   });
   const { canvasRef, renderFrame } = useScreenFrame();
+  const { UIConfig, setUiConfig, handleUpdateUiHide } = useUIConfig();
 
   const sendCommand = async () => {
     await write(command, false);
@@ -282,17 +253,6 @@ const Controller = () => {
     }
   };
 
-  const handleUpdateUiHide = (
-    value: boolean,
-    key: keyof IUIConfig,
-    setInState: (stateValue: boolean) => void
-  ) => {
-    const updatedValue = !value;
-    const newConfig = { ...UIConfig, [key]: updatedValue };
-    localStorage.setItem("uiConfig", JSON.stringify(newConfig));
-    setInState(updatedValue);
-  };
-
   const toggleLiveScreen = (shouldUpdate: boolean) => {
     if (!shouldUpdate) write("screenframeshort", false);
     setAutoUpdateFrame(!shouldUpdate);
@@ -321,13 +281,6 @@ const Controller = () => {
     }
   }, [consoleMessageList]);
 
-  useEffect(() => {
-    const storedConfig = localStorage.getItem("uiConfig");
-    if (storedConfig) {
-      setUiConfig(JSON.parse(storedConfig));
-    }
-  }, []);
-
   return (
     <>
       {setupComplete ? (
@@ -493,34 +446,14 @@ const Controller = () => {
           />
         )}
       </Modal>
-      <Modal
-        title="UI Configuration"
-        isModalOpen={UIConfigurationOpen}
-        closeModal={() => setUIConfigurationOpen(false)}
-        className="w-[20%]"
-      >
-        <div className="mb-3 flex flex-col items-center justify-center rounded-lg p-4 font-medium text-white outline-none focus:ring-0 md:items-start">
-          <div className="flex w-full flex-col items-start justify-start gap-5">
-            {uiConfigItems.map((item) => (
-              <ToggleSwitch
-                key={item.key}
-                toggleLabel={item.label}
-                isToggle={UIConfig[item.key]}
-                toggleSwitch={() => {
-                  handleUpdateUiHide(
-                    UIConfig[item.key],
-                    item.key,
-                    (updatedValue) => {
-                      setUiConfig({ ...UIConfig, [item.key]: updatedValue });
-                      item.onToggle?.();
-                    }
-                  );
-                }}
-              />
-            ))}
-          </div>
-        </div>
-      </Modal>
+      <UIConfigurationModal
+        isOpen={UIConfigurationOpen}
+        onClose={() => setUIConfigurationOpen(false)}
+        UIConfig={UIConfig}
+        setUiConfig={setUiConfig}
+        handleUpdateUiHide={handleUpdateUiHide}
+        toggleLiveScreen={toggleLiveScreen}
+      />
     </>
   );
 };
diff --git a/src/components/UIConfigurationModal/UIConfigurationModal.tsx b/src/components/UIConfigurationModal/UIConfigurationModal.tsx
new file mode 100644
index 0000000..e6df283
--- /dev/null
+++ b/src/components/UIConfigurationModal/UIConfigurationModal.tsx
@@ -0,0 +1,82 @@
+import Modal from "@/components/Modal/Modal";
+import ToggleSwitch from "@/components/ToggleSwitch/ToggleSwitch";
+import { ConfigItem, IUIConfig } from "@/types";
+
+interface IUIConfigurationModal {
+  isOpen: boolean;
+  onClose: () => void;
+  UIConfig: IUIConfig;
+  setUiConfig: (config: IUIConfig) => void;
+  handleUpdateUiHide: (
+    value: boolean,
+    key: keyof IUIConfig,
+    setInState: (stateValue: boolean) => void
+  ) => void;
+  toggleLiveScreen: (shouldUpdate: boolean) => void;
+}
+
+const UIConfigurationModal: React.FC<IUIConfigurationModal> = ({
+  isOpen,
+  onClose,
+  UIConfig,
+  setUiConfig,
+  handleUpdateUiHide,
+  toggleLiveScreen,
+}) => {
+  const uiConfigItems: ConfigItem[] = [
+    {
+      key: "controlButtonsHide",
+      label: "Hide Control Buttons",
+    },
+    {
+      key: "screenHide",
+      label: "Hide Screen",
+      onToggle: () => toggleLiveScreen(!UIConfig.screenHide),
+    },
+    {
+      key: "fileSystemHide",
+      label: "Hide File System",
+    },
+    {
+      key: "serialConsoleHide",
+      label: "Hide Serial Console",
+    },
+    {
+      key: "firmwareManagerHide",
+      label: "Hide Firmware Manager",
+    },
+  ];
+
+  return (
+    <Modal
+      title="UI Configuration"
+      isModalOpen={isOpen}
+      closeModal={onClose}
+      className="w-[20%]"
+    >
+      <div className="mb-3 flex flex-col items-center justify-center rounded-lg p-4 font-medium text-white outline-none focus:ring-0 md:items-start">
+        <div className="flex w-full flex-col items-start justify-start gap-5">
+          {uiConfigItems.map((item) => (
+            <ToggleSwitch
+              key={item.key}
+              toggleLabel={item.label}
+              isToggle={UIConfig[item.key]}
+              toggleSwitch={() => {
+                handleUpdateUiHide(
+                  UIConfig[item.key],
+                  item.key,
+                  (updatedValue) => {
+                    setUiConfig({ ...UIConfig, [item.key]: updatedValue });
+                    item.onToggle?.();
+                  }
+                );
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default UIConfigurationModal;
diff --git a/src/hooks/useUIConfig.ts b/src/hooks/useUIConfig.ts
new file mode 100644
index 0000000..36cd56e
--- /dev/null
+++ b/src/hooks/useUIConfig.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { IUIConfig } from "@/types";
+
+export const useUIConfig = () => {
+  const [UIConfig, setUiConfig] = useState<IUIConfig>({
+    screenHide: false,
+    controlButtonsHide: false,
+    fileSystemHide: false,
+    serialConsoleHide: false,
+    firmwareManagerHide: false,
+  });
+
+  const handleUpdateUiHide = (
+    value: boolean,
+    key: keyof IUIConfig,
+    setInState: (stateValue: boolean) => void
+  ) => {
+    const updatedValue = !value;
+    const newConfig = { ...UIConfig, [key]: updatedValue };
+    localStorage.setItem("uiConfig", JSON.stringify(newConfig));
+    setInState(updatedValue);
+  };
+
+  useEffect(() => {
+    const storedConfig = localStorage.getItem("uiConfig");
+    if (storedConfig) {
+      setUiConfig(JSON.parse(storedConfig));
+    }
+  }, []);
+
+  return { UIConfig, setUiConfig, handleUpdateUiHide };
+};