refactor: decouple Controller component

* 275ms delayPromise no longer needed * loading state no longer needed Signed-off-by: eXhumer <[email protected]>
jfernandez · Oct 26, 2024 · dcc05d9 · dcc05d9
1 parent 4cea9c0
commit dcc05d9
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 63 deletions.
diff --git a/backend/Cargo.lock b/backend/Cargo.lock
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "controller-tools"
-version = "2.0.1"
+version = "2.0.2"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "controller-tools",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "The missing game controller menu. Displays the current battery % and charging status",
   "type": "module",
   "scripts": {

diff --git a/src/components/Controller.tsx 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
@@ -1,49 +1,20 @@
-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[];
 };
 
 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
@@ -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
@@ -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}