From 6d31f089dde936e75f588220c026d680529604d6 Mon Sep 17 00:00:00 2001
From: jLynx <admin@jlynx.net>
Date: Sun, 14 Jan 2024 21:37:57 +1300
Subject: [PATCH 1/4] init

---
 src/components/DeviceButtons/DeviceButtons.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DeviceButtons/DeviceButtons.tsx b/src/components/DeviceButtons/DeviceButtons.tsx
index ba39acc..c650d5d 100644
--- a/src/components/DeviceButtons/DeviceButtons.tsx
+++ b/src/components/DeviceButtons/DeviceButtons.tsx
@@ -13,6 +13,7 @@ export const DeviceButtons = ({
   const disableTransmitAction = false;
 
   useEffect(() => {
+    // Why is this not updating?
     console.log(disableTransmitAction);
   }, [disableTransmitAction]);
 

From 8b0c00dfb5a9a11b66d31c5e4abaa07b2970e063 Mon Sep 17 00:00:00 2001
From: jLynx <admin@jlynx.net>
Date: Sun, 14 Jan 2024 21:48:37 +1300
Subject: [PATCH 2/4] WIP

---
 src/components/DeviceButtons/DeviceButtons.tsx | 8 ++++----
 src/utils/serialUtils.tsx                      | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/DeviceButtons/DeviceButtons.tsx b/src/components/DeviceButtons/DeviceButtons.tsx
index c650d5d..99910c4 100644
--- a/src/components/DeviceButtons/DeviceButtons.tsx
+++ b/src/components/DeviceButtons/DeviceButtons.tsx
@@ -7,10 +7,10 @@ export const DeviceButtons = ({
 }: {
   autoUpdateFrame: boolean;
 }) => {
-  // const { write, disableTransmitAction } = useWriteCommand();
-  const { write } = useWriteCommand();
+  const { write, disableTransmitAction, loadingFrame } = useWriteCommand();
+  // const { write } = useWriteCommand();
 
-  const disableTransmitAction = false;
+  // const disableTransmitAction = false;
 
   useEffect(() => {
     // Why is this not updating?
@@ -27,7 +27,7 @@ export const DeviceButtons = ({
           <div></div>
           <HotkeyButton
             label="Left"
-            disabled={disableTransmitAction}
+            disabled={loadingFrame}
             onClickFunction={() => write("button 2", autoUpdateFrame)}
             className="h-16 w-16 bg-green-500"
             shortcutKeys={"ArrowLeft"}
diff --git a/src/utils/serialUtils.tsx b/src/utils/serialUtils.tsx
index 43e5ad6..24e5ded 100644
--- a/src/utils/serialUtils.tsx
+++ b/src/utils/serialUtils.tsx
@@ -158,6 +158,7 @@ export const useWriteCommand = () => {
     downloadFile,
     uploadFile,
     disableTransmitAction,
+    loadingFrame,
     setLoadingFrame,
   };
 };

From 0abcef2fc95cac0b5fe554b7df4b31b0dbac5540 Mon Sep 17 00:00:00 2001
From: jLynx <admin@jlynx.net>
Date: Sun, 14 Jan 2024 22:18:03 +1300
Subject: [PATCH 3/4] WIP

---
 src/app/page.tsx                              |  9 ++++---
 .../DeviceButtons/DeviceButtons.tsx           | 17 ++++++++-----
 .../SharedStateContext/SharedStateContext.tsx | 24 +++++++++++++++++++
 src/utils/serialUtils.tsx                     | 18 +++++++++++---
 4 files changed, 56 insertions(+), 12 deletions(-)
 create mode 100644 src/components/SharedStateContext/SharedStateContext.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6fe5fb1..d22e81b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@
 import dynamic from "next/dynamic";
 import Controller from "@/components/Controller/Controller";
 import { Loader } from "@/components/Loader/Loader";
+import SharedStateProvider from "@/components/SharedStateContext/SharedStateContext";
 
 const Home = () => {
   const SerialLoader = dynamic(
@@ -16,9 +17,11 @@ const Home = () => {
   return (
     <>
       <main className="flex h-full min-h-screen flex-col items-center justify-between p-1">
-        <SerialLoader>
-          <Controller />
-        </SerialLoader>
+        <SharedStateProvider>
+          <SerialLoader>
+            <Controller />
+          </SerialLoader>
+        </SharedStateProvider>
       </main>
       <footer className="text-center text-blue-500">
         <a href="https://github.com/portapack-mayhem/MayhemHub" target="_blank">
diff --git a/src/components/DeviceButtons/DeviceButtons.tsx b/src/components/DeviceButtons/DeviceButtons.tsx
index 99910c4..d6aa617 100644
--- a/src/components/DeviceButtons/DeviceButtons.tsx
+++ b/src/components/DeviceButtons/DeviceButtons.tsx
@@ -1,21 +1,26 @@
-import { useEffect } from "react";
+import { useContext, useEffect } from "react";
 import { useWriteCommand } from "@/utils/serialUtils";
 import HotkeyButton from "../HotkeyButton/HotkeyButton";
+import { SharedStateContext } from "../SharedStateContext/SharedStateContext";
 
 export const DeviceButtons = ({
   autoUpdateFrame,
 }: {
   autoUpdateFrame: boolean;
 }) => {
-  const { write, disableTransmitAction, loadingFrame } = useWriteCommand();
+  const { write, disableTransmitAction, loadingFrame, fileUploadBlocker } =
+    useWriteCommand();
   // const { write } = useWriteCommand();
 
   // const disableTransmitAction = false;
 
+  const sharedStateContext = useContext(SharedStateContext);
+  const { sharedState } = sharedStateContext;
+
   useEffect(() => {
     // Why is this not updating?
-    console.log(disableTransmitAction);
-  }, [disableTransmitAction]);
+    console.log(sharedState);
+  }, [sharedState]);
 
   return (
     <div
@@ -27,7 +32,7 @@ export const DeviceButtons = ({
           <div></div>
           <HotkeyButton
             label="Left"
-            disabled={loadingFrame}
+            disabled={sharedState}
             onClickFunction={() => write("button 2", autoUpdateFrame)}
             className="h-16 w-16 bg-green-500"
             shortcutKeys={"ArrowLeft"}
@@ -41,7 +46,7 @@ export const DeviceButtons = ({
           </button>
           <HotkeyButton
             label="Up"
-            disabled={disableTransmitAction}
+            disabled={fileUploadBlocker}
             onClickFunction={() => write("button 4", autoUpdateFrame)}
             className="h-16 w-16 bg-green-500"
             shortcutKeys={"ArrowUp"}
diff --git a/src/components/SharedStateContext/SharedStateContext.tsx b/src/components/SharedStateContext/SharedStateContext.tsx
new file mode 100644
index 0000000..0851ec0
--- /dev/null
+++ b/src/components/SharedStateContext/SharedStateContext.tsx
@@ -0,0 +1,24 @@
+import React, { createContext, FC, ReactNode, useState } from "react";
+
+type SharedStateContextType = {
+  sharedState: boolean;
+  setSharedState: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+// Initialized with an empty object but will be set in our provider
+export const SharedStateContext = createContext<SharedStateContextType>({
+  sharedState: false,
+  setSharedState: () => {}, // Add a default empty function for setSharedState
+});
+
+const SharedStateProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [sharedState, setSharedState] = useState<boolean>(false);
+
+  return (
+    <SharedStateContext.Provider value={{ sharedState, setSharedState }}>
+      {children}
+    </SharedStateContext.Provider>
+  );
+};
+
+export default SharedStateProvider;
diff --git a/src/utils/serialUtils.tsx b/src/utils/serialUtils.tsx
index 24e5ded..2e98b65 100644
--- a/src/utils/serialUtils.tsx
+++ b/src/utils/serialUtils.tsx
@@ -1,7 +1,14 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { DataPacket } from "@/components/SerialProvider/SerialProvider";
+import { SharedStateContext } from "@/components/SharedStateContext/SharedStateContext";
 import { hexToBytes } from "./fileUtils";
 import { useSerial } from "../components/SerialLoader/SerialLoader";
-import { DataPacket } from "../components/SerialProvider/SerialProvider";
 
 interface DownloadedFile {
   blob: Blob;
@@ -18,6 +25,9 @@ export const useWriteCommand = () => {
   // ToDo: This stuff below does not seem to be correctly updating, so leavin this in to debug
   // const disableTransmitAction: boolean = loadingFrame || fileUploadBlocker;
 
+  const sharedStateContext = useContext(SharedStateContext);
+  const { sharedState, setSharedState } = sharedStateContext;
+
   useEffect(() => {
     const disableTransmitActionUpdating = loadingFrame || fileUploadBlocker;
     console.log(
@@ -29,7 +39,8 @@ export const useWriteCommand = () => {
 
     // Triggers an immediate rerender with updated state
     setDisableTransmitAction(disableTransmitActionUpdating);
-  }, [loadingFrame, fileUploadBlocker, disableTransmitAction]);
+    setSharedState(disableTransmitActionUpdating);
+  }, [loadingFrame, fileUploadBlocker, disableTransmitAction, setSharedState]);
 
   // const disableTransmitAction: boolean = useCallback(async () => {
   //   return loadingFrame || fileUploadBlocker;
@@ -159,6 +170,7 @@ export const useWriteCommand = () => {
     uploadFile,
     disableTransmitAction,
     loadingFrame,
+    fileUploadBlocker,
     setLoadingFrame,
   };
 };

From 1d16a6d82cdfc3d47feb276739c2447ece5355b2 Mon Sep 17 00:00:00 2001
From: jLynx <admin@jlynx.net>
Date: Mon, 15 Jan 2024 22:16:51 +1300
Subject: [PATCH 4/4] Fixed but also reverted

---
 .eslintrc.json                                |  8 +-
 src/app/page.tsx                              |  9 +-
 src/components/Controller/Controller.tsx      | 97 ++++++++++++++++++-
 .../DeviceButtons/DeviceButtons.tsx           | 52 ++++++----
 src/components/FileBrowser/FileBrowser.tsx    |  2 +-
 .../SharedStateContext/SharedStateContext.tsx | 24 -----
 src/utils/serialUtils.tsx                     | 23 +----
 7 files changed, 140 insertions(+), 75 deletions(-)
 delete mode 100644 src/components/SharedStateContext/SharedStateContext.tsx

diff --git a/.eslintrc.json b/.eslintrc.json
index b91e486..21ddc42 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -24,7 +24,11 @@
     "import/order": [
       "error",
       {
-        "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]],
+        "groups": [
+          ["builtin", "external"],
+          "internal",
+          ["parent", "sibling", "index"]
+        ],
         "newlines-between": "never",
         "alphabetize": {
           "order": "asc",
@@ -35,4 +39,4 @@
   },
   "ignorePatterns": ["next-env.d.ts"],
   "plugins": ["tailwindcss"]
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d22e81b..6fe5fb1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,6 @@
 import dynamic from "next/dynamic";
 import Controller from "@/components/Controller/Controller";
 import { Loader } from "@/components/Loader/Loader";
-import SharedStateProvider from "@/components/SharedStateContext/SharedStateContext";
 
 const Home = () => {
   const SerialLoader = dynamic(
@@ -17,11 +16,9 @@ const Home = () => {
   return (
     <>
       <main className="flex h-full min-h-screen flex-col items-center justify-between p-1">
-        <SharedStateProvider>
-          <SerialLoader>
-            <Controller />
-          </SerialLoader>
-        </SharedStateProvider>
+        <SerialLoader>
+          <Controller />
+        </SerialLoader>
       </main>
       <footer className="text-center text-blue-500">
         <a href="https://github.com/portapack-mayhem/MayhemHub" target="_blank">
diff --git a/src/components/Controller/Controller.tsx b/src/components/Controller/Controller.tsx
index f834ab8..9db50fc 100644
--- a/src/components/Controller/Controller.tsx
+++ b/src/components/Controller/Controller.tsx
@@ -9,7 +9,6 @@ import {
   getVersionType,
   nightlyVersionFormat,
 } from "@/utils/versionUtils";
-import { DeviceButtons } from "../DeviceButtons/DeviceButtons";
 import { FileBrowser, FileStructure } from "../FileBrowser/FileBrowser";
 import HotkeyButton from "../HotkeyButton/HotkeyButton";
 import { Loader } from "../Loader/Loader";
@@ -111,8 +110,6 @@ const Controller = () => {
   };
 
   const renderFrame = () => {
-    const width = 241;
-    const height = 321;
     if (!consoleMessage.includes("screenframe")) return;
 
     const lines = consoleMessage.split("\r\n");
@@ -323,7 +320,99 @@ const Controller = () => {
               />
             </div>
 
-            <DeviceButtons autoUpdateFrame={autoUpdateFrame} />
+            {/* 
+            
+            Attention!
+            For some reason, when I use <DeviceButtons />, once the buttons are clicked, the 
+            buttons never disable. I have spent hours trying to fix this, but I cannot. So 
+            for now I have moved them back out of their own compoent which "Solves" the problem.
+
+            Basically the issue is it seems to be setting the state of disableTransmitAction, but 
+            not rerendering.
+
+            If someone else could fix this, that would be great <3
+
+            */}
+            {/* <DeviceButtons
+              autoUpdateFrame={autoUpdateFrame}
+              disableTransmitAction={disableTransmitAction}
+            /> */}
+            <div
+              className="flex flex-col items-center justify-center gap-5"
+              id="controlGroup"
+            >
+              <div className="flex flex-col items-center justify-center">
+                <div className="grid grid-flow-col grid-rows-3 gap-4">
+                  <div></div>
+                  <HotkeyButton
+                    label="Left"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 2", autoUpdateFrame)}
+                    className="h-16 w-16 bg-green-500"
+                    shortcutKeys={"ArrowLeft"}
+                  />
+                  <button
+                    disabled={disableTransmitAction}
+                    onClick={() => write("button 7", autoUpdateFrame)}
+                    className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+                  >
+                    ↪️
+                  </button>
+                  <HotkeyButton
+                    label="Up"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 4", autoUpdateFrame)}
+                    className="h-16 w-16 bg-green-500"
+                    shortcutKeys={"ArrowUp"}
+                  />
+                  <HotkeyButton
+                    label="Ok"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 5", autoUpdateFrame)}
+                    className="h-16 w-16 bg-blue-500"
+                    shortcutKeys={"Enter"}
+                  />
+                  <HotkeyButton
+                    label="Down"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 3", autoUpdateFrame)}
+                    className="h-16 w-16 bg-green-500"
+                    shortcutKeys={"ArrowDown"}
+                  />
+                  <div></div>
+                  <HotkeyButton
+                    label="Right"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 1", autoUpdateFrame)}
+                    className="h-16 w-16 bg-green-500"
+                    shortcutKeys={"ArrowRight"}
+                  />
+                  <button
+                    disabled={disableTransmitAction}
+                    onClick={() => write("button 8", autoUpdateFrame)}
+                    className="h-12 w-12 self-end justify-self-end rounded bg-blue-400 text-white disabled:opacity-50"
+                  >
+                    ↩️
+                  </button>
+                </div>
+              </div>
+              <div className="flex items-center justify-center gap-4">
+                <HotkeyButton
+                  label="DFU"
+                  disabled={disableTransmitAction}
+                  onClickFunction={() => write("button 6", autoUpdateFrame)}
+                  className="h-16 w-16 bg-slate-400"
+                  shortcutKeys={"mod+D"}
+                />
+                <button
+                  disabled={disableTransmitAction}
+                  onClick={() => write("reboot", autoUpdateFrame)}
+                  className="h-16 w-16 rounded bg-slate-400 text-white disabled:opacity-50"
+                >
+                  Reboot
+                </button>
+              </div>
+            </div>
           </div>
 
           {!serial.isReading ? (
diff --git a/src/components/DeviceButtons/DeviceButtons.tsx b/src/components/DeviceButtons/DeviceButtons.tsx
index d6aa617..9fd03c6 100644
--- a/src/components/DeviceButtons/DeviceButtons.tsx
+++ b/src/components/DeviceButtons/DeviceButtons.tsx
@@ -1,38 +1,56 @@
-import { useContext, useEffect } from "react";
 import { useWriteCommand } from "@/utils/serialUtils";
 import HotkeyButton from "../HotkeyButton/HotkeyButton";
-import { SharedStateContext } from "../SharedStateContext/SharedStateContext";
 
 export const DeviceButtons = ({
   autoUpdateFrame,
+  disableTransmitAction,
 }: {
   autoUpdateFrame: boolean;
+  disableTransmitAction: boolean;
 }) => {
-  const { write, disableTransmitAction, loadingFrame, fileUploadBlocker } =
-    useWriteCommand();
-  // const { write } = useWriteCommand();
-
-  // const disableTransmitAction = false;
-
-  const sharedStateContext = useContext(SharedStateContext);
-  const { sharedState } = sharedStateContext;
-
-  useEffect(() => {
-    // Why is this not updating?
-    console.log(sharedState);
-  }, [sharedState]);
+  const { write } = useWriteCommand();
 
   return (
     <div
       className="flex flex-col items-center justify-center gap-5"
       id="controlGroup"
     >
+      {/* Test Buttons ==================================================================================================== */}
+      <button
+        disabled={disableTransmitAction}
+        onClick={() => write("button 7", true, true)}
+        className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+      >
+        T1
+      </button>
+      <button
+        disabled={disableTransmitAction}
+        onClick={() => write("button 7", true, false)}
+        className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+      >
+        T2
+      </button>
+      <button
+        disabled={disableTransmitAction}
+        onClick={async () => await write("button 7", true, true)}
+        className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+      >
+        T3
+      </button>
+      <button
+        disabled={disableTransmitAction}
+        onClick={async () => await write("button 7", true, false)}
+        className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+      >
+        T4
+      </button>
+      {/* ==================================================================================================== */}
       <div className="flex flex-col items-center justify-center">
         <div className="grid grid-flow-col grid-rows-3 gap-4">
           <div></div>
           <HotkeyButton
             label="Left"
-            disabled={sharedState}
+            disabled={disableTransmitAction}
             onClickFunction={() => write("button 2", autoUpdateFrame)}
             className="h-16 w-16 bg-green-500"
             shortcutKeys={"ArrowLeft"}
@@ -46,7 +64,7 @@ export const DeviceButtons = ({
           </button>
           <HotkeyButton
             label="Up"
-            disabled={fileUploadBlocker}
+            disabled={disableTransmitAction}
             onClickFunction={() => write("button 4", autoUpdateFrame)}
             className="h-16 w-16 bg-green-500"
             shortcutKeys={"ArrowUp"}
diff --git a/src/components/FileBrowser/FileBrowser.tsx b/src/components/FileBrowser/FileBrowser.tsx
index 255d7a0..1c151fe 100644
--- a/src/components/FileBrowser/FileBrowser.tsx
+++ b/src/components/FileBrowser/FileBrowser.tsx
@@ -5,7 +5,7 @@ import {
   faFile,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Dispatch, RefObject, SetStateAction, useState } from "react";
+import { Dispatch, RefObject, SetStateAction } from "react";
 import { parseDirectories } from "@/utils/fileUtils";
 import { useWriteCommand } from "@/utils/serialUtils";
 
diff --git a/src/components/SharedStateContext/SharedStateContext.tsx b/src/components/SharedStateContext/SharedStateContext.tsx
deleted file mode 100644
index 0851ec0..0000000
--- a/src/components/SharedStateContext/SharedStateContext.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { createContext, FC, ReactNode, useState } from "react";
-
-type SharedStateContextType = {
-  sharedState: boolean;
-  setSharedState: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-// Initialized with an empty object but will be set in our provider
-export const SharedStateContext = createContext<SharedStateContextType>({
-  sharedState: false,
-  setSharedState: () => {}, // Add a default empty function for setSharedState
-});
-
-const SharedStateProvider: FC<{ children: ReactNode }> = ({ children }) => {
-  const [sharedState, setSharedState] = useState<boolean>(false);
-
-  return (
-    <SharedStateContext.Provider value={{ sharedState, setSharedState }}>
-      {children}
-    </SharedStateContext.Provider>
-  );
-};
-
-export default SharedStateProvider;
diff --git a/src/utils/serialUtils.tsx b/src/utils/serialUtils.tsx
index 2e98b65..e8eac78 100644
--- a/src/utils/serialUtils.tsx
+++ b/src/utils/serialUtils.tsx
@@ -1,12 +1,5 @@
-import {
-  Dispatch,
-  SetStateAction,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { DataPacket } from "@/components/SerialProvider/SerialProvider";
-import { SharedStateContext } from "@/components/SharedStateContext/SharedStateContext";
 import { hexToBytes } from "./fileUtils";
 import { useSerial } from "../components/SerialLoader/SerialLoader";
 
@@ -22,12 +15,6 @@ export const useWriteCommand = () => {
   const [disableTransmitAction, setDisableTransmitAction] =
     useState<boolean>(true);
 
-  // ToDo: This stuff below does not seem to be correctly updating, so leavin this in to debug
-  // const disableTransmitAction: boolean = loadingFrame || fileUploadBlocker;
-
-  const sharedStateContext = useContext(SharedStateContext);
-  const { sharedState, setSharedState } = sharedStateContext;
-
   useEffect(() => {
     const disableTransmitActionUpdating = loadingFrame || fileUploadBlocker;
     console.log(
@@ -39,13 +26,7 @@ export const useWriteCommand = () => {
 
     // Triggers an immediate rerender with updated state
     setDisableTransmitAction(disableTransmitActionUpdating);
-    setSharedState(disableTransmitActionUpdating);
-  }, [loadingFrame, fileUploadBlocker, disableTransmitAction, setSharedState]);
-
-  // const disableTransmitAction: boolean = useCallback(async () => {
-  //   return loadingFrame || fileUploadBlocker;
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [loadingFrame || fileUploadBlocker]);
+  }, [loadingFrame, fileUploadBlocker, disableTransmitAction]);
 
   const write = async (
     command: string,