From fa93e4c5f94b88431e75e48f3a089cb3bc1f0c77 Mon Sep 17 00:00:00 2001
From: eXhumer <exhumer@exhumer.cc>
Date: Sat, 26 Oct 2024 09:02:18 -0600
Subject: [PATCH] refactor: decouple Controller component * 275ms delayPromise
 no longer needed * loading state no longer needed

Signed-off-by: eXhumer <exhumer@exhumer.cc>
---
 src/components/Controller.tsx        | 54 ++++++++++++++++++++++++++++
 src/components/ControllersView.tsx   | 47 +++++-------------------
 src/components/NoControllersView.tsx |  8 ++---
 src/components/PluginContent.tsx     | 24 +++++--------
 4 files changed, 73 insertions(+), 60 deletions(-)
 create mode 100644 src/components/Controller.tsx

diff --git a/src/components/Controller.tsx b/src/components/Controller.tsx
new file mode 100644
index 0000000..ce26228
--- /dev/null
+++ b/src/components/Controller.tsx
@@ -0,0 +1,54 @@
+import {
+  PanelSectionRow,
+  gamepadDialogClasses,
+  joinClassNames,
+} from "@decky/ui";
+
+import { IconContext } from "react-icons";
+import { BiBluetooth, BiUsb } from "react-icons/bi";
+
+import BatteryIcon from "./BatteryIcon";
+import VendorIcon from "./VendorIcon";
+import { IController } from "../types";
+
+const FieldWithSeparator = joinClassNames(gamepadDialogClasses.Field, gamepadDialogClasses.WithBottomSeparatorStandard);
+
+type ControllerProps = {
+  controller: IController;
+};
+
+const Controller = ({ controller }: ControllerProps) => {
+  return (
+    <PanelSectionRow>
+      <div className={FieldWithSeparator}>
+        <div className={gamepadDialogClasses.FieldLabelRow}>
+          <div className={gamepadDialogClasses.FieldLabel}>
+            <IconContext.Provider value={{ style: { verticalAlign: 'middle', marginRight: '10px' } }}>
+              {controller.bluetooth ? <BiBluetooth /> : <BiUsb />}
+            </IconContext.Provider>
+            <IconContext.Provider value={{ style: { verticalAlign: 'middle', marginRight: '5px' } }}>
+              <VendorIcon controller={controller}/>
+            </IconContext.Provider>
+            {controller.name}
+          </div>
+          {
+            (controller.capacity > 0 || controller.status !== "unknown") &&
+            <div className={gamepadDialogClasses.FieldChildrenInner}>
+              {
+                // only show battery capacity for non-MS vendors unless capacity is > 0 and over BT
+                // since we don't have the battery capacity yet for Xbox over USB
+                (controller.vendorId != 0x045E || (controller.capacity > 0 && controller.bluetooth)) &&
+                <span style={{ display: "inline-block", textAlign: "right", }}>{controller.capacity}%</span>
+              }
+              <IconContext.Provider value={{ style: { verticalAlign: 'middle', marginLeft: "6px" }, size: '2em' }}>
+                <BatteryIcon controller={controller}/>
+              </IconContext.Provider>
+            </div>
+          }
+        </div>
+      </div>
+    </PanelSectionRow>
+  );
+};
+
+export default Controller;
diff --git a/src/components/ControllersView.tsx b/src/components/ControllersView.tsx
index 9d0a2be..e8d0786 100644
--- a/src/components/ControllersView.tsx
+++ b/src/components/ControllersView.tsx
@@ -1,11 +1,5 @@
-import { gamepadDialogClasses, joinClassNames, PanelSectionRow } from "@decky/ui";
 import { IController } from "../types";
-import { IconContext } from "react-icons";
-import { BiBluetooth, BiUsb } from "react-icons/bi";
-import VendorIcon from "./VendorIcon";
-import BatteryIcon from "./BatteryIcon";
-
-const FieldWithSeparator = joinClassNames(gamepadDialogClasses.Field, gamepadDialogClasses.WithBottomSeparatorStandard);
+import Controller from "./Controller";
 
 type ControllersViewProps = {
   controllers: IController[];
@@ -13,37 +7,14 @@ type ControllersViewProps = {
 
 const ControllersView = ({ controllers }: ControllersViewProps) => {
   return (
-    controllers.sort((a, b) => a.name.localeCompare(b.name)).map((controller) => (
-      <PanelSectionRow key={controller.productId}>
-        <div className={FieldWithSeparator}>
-          <div className={gamepadDialogClasses.FieldLabelRow}>
-            <div className={gamepadDialogClasses.FieldLabel}>
-              <IconContext.Provider value={{ style: { verticalAlign: 'middle', marginRight: '10px' } }}>
-                {controller.bluetooth ? <BiBluetooth /> : <BiUsb />}
-              </IconContext.Provider>
-              <IconContext.Provider value={{ style: { verticalAlign: 'middle', marginRight: '5px' } }}>
-                <VendorIcon controller={controller}/>
-              </IconContext.Provider>
-              {controller.name}
-            </div>
-            {
-              (controller.capacity > 0 || controller.status !== "unknown") &&
-              <div className={gamepadDialogClasses.FieldChildrenInner}>
-                {
-                  // only show battery capacity for non-MS vendors unless capacity is > 0 and over BT
-                  // since we don't have the battery capacity yet for Xbox over USB
-                  (controller.vendorId != 0x045E || (controller.capacity > 0 && controller.bluetooth)) &&
-                  <span style={{ display: "inline-block", textAlign: "right", }}>{controller.capacity}%</span>
-                }
-                <IconContext.Provider value={{ style: { verticalAlign: 'middle', marginLeft: "6px" }, size: '2em' }}>
-                  <BatteryIcon controller={controller}/>
-                </IconContext.Provider>
-              </div>
-            }
-          </div>
-        </div>
-      </PanelSectionRow>
-    ))
+    controllers
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(controller => (
+        <Controller
+          controller={controller}
+          key={`${controller.vendorId}:${controller.productId}`}
+        />
+      ))
   );
 };
 
diff --git a/src/components/NoControllersView.tsx b/src/components/NoControllersView.tsx
index c30852c..3b181e6 100644
--- a/src/components/NoControllersView.tsx
+++ b/src/components/NoControllersView.tsx
@@ -2,17 +2,13 @@ import { gamepadDialogClasses, joinClassNames, PanelSectionRow } from "@decky/ui
 
 const FieldWithSeparator = joinClassNames(gamepadDialogClasses.Field, gamepadDialogClasses.WithBottomSeparatorStandard);
 
-type NoControllersViewProps = {
-  loading: boolean;
-};
-
-const NoControllersView = ({ loading }: NoControllersViewProps) => {
+const NoControllersView = () => {
   return (
     <PanelSectionRow>
       <div className={FieldWithSeparator}>
         <div className={gamepadDialogClasses.FieldLabelRow}>
           <div className={gamepadDialogClasses.FieldLabel}>
-            {loading ? 'Loading...' : 'No controllers found'}
+            No controllers found
           </div>
         </div>
       </div>
diff --git a/src/components/PluginContent.tsx b/src/components/PluginContent.tsx
index c8697e4..7d1da0a 100644
--- a/src/components/PluginContent.tsx
+++ b/src/components/PluginContent.tsx
@@ -10,22 +10,15 @@ import * as backend from "../backend";
 import { IController } from "../types";
 import ControllersView from "./ControllersView";
 
-const delayPromise = <T,>(value: T) => {
-  return new Promise<T>(resolve => {
-    setTimeout(() => resolve(value), 275);
-  });
-};
-
 const PluginContent = () => {
   const [debug, setDebug] = useState<boolean>(false);
   const [notifications, setNotifications] = useState<boolean>(true);
-  const [loading, setLoading] = useState<boolean>(false);
   const [controllers, setControllers] = useState<IController[]>([]);
 
   // For fetching controller & settings data on render
   useEffect(() => {
     backend.getControllers()
-      .then((controllers) => { setControllers(controllers); });
+      .then(controllers => { setControllers(controllers); });
 
     backend.getDebugSetting()
       .then(debug => { setDebug(debug); });
@@ -34,11 +27,10 @@ const PluginContent = () => {
       .then(notifications => { setNotifications(notifications); });
   }, []);
 
-  const onRefresh = async () => {
-    setControllers([]);
-    setLoading(true);
-    setControllers(await delayPromise(backend.getControllers()));
-    setLoading(false);
+  const onRefresh = () => {
+    backend
+      .getControllers()
+      .then(controllers => { setControllers(controllers); });
   };
 
   const onDebugChange = (e: boolean) => {
@@ -60,9 +52,9 @@ const PluginContent = () => {
   return (
     <PanelSection title="Controllers">
       {controllers.length === 0 ?
-        <NoControllersView loading={loading}/> :
-        <ControllersView controllers={controllers}/>}
-      <RefreshButton onClick={onRefresh}/>
+        <NoControllersView /> :
+        <ControllersView controllers={controllers} />}
+      <RefreshButton onClick={onRefresh} />
       <SettingsMenu
         debug={debug}
         notifications={notifications}