Create toys context

SutekhVRC · Nov 24, 2022 · 1a1941e · 1a1941e
1 parent 1a2f10c
commit 1a1941e
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 125 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/src-tauri/icons/vibecheck-ico32x32.ico"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>VibeCheck</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
@@ -41,41 +41,6 @@
   justify-content: space-evenly;
 }
 
-.toys-container {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: stretch;
-  font-size: 1rem;
-  min-width: 400px;
-  border-radius: var(--container-border-radius);
-  padding: 10px;
-  margin: 20px;
-  background-color: var(--toys-container);
-  box-shadow: 5px 5px 5px var(--toys-container-shadow);
-}
-
-.toy-container {
-  font-size: 2rem;
-  min-height: 100px;
-  border-radius: var(--container-border-radius);
-  margin: 10px;
-  background-color: var(--item);
-  box-shadow: 5px 5px 10px var(--item-shadow);
-  animation: enter-ani 250ms ease-out;
-}
-.toy {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-.toy-container .accordion {
-  padding-bottom: var(--container-border-radius);
-}
-.toy-container .accordion-body {
-  max-width: 360px;
-}
-
 .grad-text {
   padding-bottom: 0.3rem;
   background: linear-gradient(var(--blue), var(--pink));

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,37 +1,18 @@
-import { invoke } from "@tauri-apps/api";
-import { useState } from "react";
-
-import { FeVCToy } from "../src-tauri/bindings/FeVCToy";
-import { GET_TOYS } from "./data/constants";
+import { ToysProvider } from "./context/ToysContext";
 import Header from "./components/Header";
-import Toy from "./components/Toy";
+import Toys from "./components/Toys";
 import Footer from "./components/Footer";
 import "./App.css";
 
 export default function App() {
-  const [toys, setToys] = useState<FeVCToy[]>([]);
-
-  async function refetchToys() {
-    await invoke<null | { [key: number]: FeVCToy }>(GET_TOYS).then((response) =>
-      setToys(response ? Object.values(response) : [])
-    );
-  }
-
   return (
     <div style={{ display: "flex", justifyContent: "center" }}>
       <div className="main-container">
-        <Header />
-        <div className="toys-container">
-          <h1 className="grad-text">Connected toys</h1>
-          {toys.length > 0 ? (
-            toys.map((toy) => (
-              <Toy key={toy.toy_id} toy={toy} refetchToys={refetchToys} />
-            ))
-          ) : (
-            <div>None</div>
-          )}
-        </div>
-        <Footer refetchToys={refetchToys} />
+        <ToysProvider>
+          <Header />
+          <Toys />
+          <Footer />
+        </ToysProvider>
       </div>
     </div>
   );

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,5 +1,6 @@
 import { invoke } from "@tauri-apps/api";
 import { useEffect, useState } from "react";
+import { useToys } from "../context/ToysContext";
 
 import {
   DISABLE,
@@ -11,11 +12,13 @@ import {
 } from "../data/constants";
 import SettingsModal from "./SettingsModal";
 
-export default function ({ refetchToys }: { refetchToys: () => void }) {
+export default function () {
   const [isEnabled, setIsEnabled] = useState(false);
   const [isScanning, setIsScanning] = useState(false);
   const [settingsIsOpen, setSettingsIsOpen] = useState(false);
 
+  const { refetchToys } = useToys();
+
   async function toggleIsScanning() {
     if (isScanning) {
       await invoke(STOP_SCAN).then(() => setIsScanning(false));

diff --git a/src/components/Toy.tsx b/src/components/Toy.tsx
diff --git a/src/components/ToyFeatureForm.tsx b/src/components/ToyFeatureForm.tsx
@@ -2,31 +2,32 @@ import { invoke } from "@tauri-apps/api";
 import { useEffect, useState } from "react";
 import Form from "react-bootstrap/Form";
 import { FeVCToyFeature } from "../../src-tauri/bindings/FeVCToyFeature";
+import { useToys } from "../context/ToysContext";
 import { ALTER_TOY, ALTER_TOY_DEBOUNCE } from "../data/constants";
 import { round0 } from "../utils";
 import "./ToyFeatureForm.css";
 
 type ToyFeatureFormProps = {
   toyId: number;
   feature: FeVCToyFeature;
-  refetchToys: () => void;
 };
 
-export default function ({ toyId, feature, refetchToys }: ToyFeatureFormProps) {
+export default function ({ toyId, feature }: ToyFeatureFormProps) {
   const [modifiedFeature, setModifiedFeature] =
     useState<FeVCToyFeature>(feature);
 
+  const { refetchToys } = useToys();
+
   useEffect(() => {
+    if (modifiedFeature == feature) return;
     async function setFeature() {
       await invoke(ALTER_TOY, { toyId: toyId, toyFeature: modifiedFeature });
     }
-    if (modifiedFeature != feature) {
-      const t = setTimeout(() => {
-        setFeature();
-        refetchToys();
-      }, ALTER_TOY_DEBOUNCE);
-      return () => clearTimeout(t);
-    }
+    const t = setTimeout(() => {
+      setFeature();
+      refetchToys();
+    }, ALTER_TOY_DEBOUNCE);
+    return () => clearTimeout(t);
   }, [modifiedFeature]);
 
   return (

diff --git a/src/components/Toys.css b/src/components/Toys.css
@@ -0,0 +1,34 @@
+.toys-container {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: stretch;
+  font-size: 1rem;
+  min-width: 400px;
+  border-radius: var(--container-border-radius);
+  padding: 10px;
+  margin: 20px;
+  background-color: var(--toys-container);
+  box-shadow: 5px 5px 5px var(--toys-container-shadow);
+}
+
+.toy-container {
+  font-size: 2rem;
+  min-height: 100px;
+  border-radius: var(--container-border-radius);
+  margin: 10px;
+  background-color: var(--item);
+  box-shadow: 5px 5px 10px var(--item-shadow);
+  animation: enter-ani 250ms ease-out;
+}
+.toy {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.toy-container .accordion {
+  padding-bottom: var(--container-border-radius);
+}
+.toy-container .accordion-body {
+  max-width: 360px;
+}
diff --git a/src/components/Toys.tsx b/src/components/Toys.tsx
@@ -0,0 +1,51 @@
+import { Accordion, Badge } from "react-bootstrap";
+import { useToys } from "../context/ToysContext";
+import { percent } from "../utils";
+import NameBadge from "./NameBadge";
+import ToyFeatureForm from "./ToyFeatureForm";
+import "./Toys.css";
+
+export default function () {
+  const { toys } = useToys();
+
+  return (
+    <div className="toys-container">
+      <h1 className="grad-text">Connected toys</h1>
+      {toys.length == 0 ? (
+        <div>None</div>
+      ) : (
+        toys.map((toy) => (
+          <div className="toy-container" key={toy.toy_id}>
+            <div className="toy">
+              <NameBadge name={toy.toy_name} />
+              <div
+                style={{
+                  color: `hsl(${toy.battery_level * 120}, 100%, 50%)`,
+                }}
+              >
+                {percent.format(toy.battery_level)}
+              </div>
+            </div>
+            <Accordion>
+              {toy.features.map((feature) => (
+                <Accordion.Item
+                  eventKey={feature.feature_index.toString()}
+                  key={feature.feature_index}
+                >
+                  <Accordion.Header>
+                    <Badge
+                      bg={feature.feature_enabled ? "success" : "danger"}
+                    >{`${feature.feature_type} ${feature.feature_index}`}</Badge>
+                  </Accordion.Header>
+                  <Accordion.Body>
+                    <ToyFeatureForm toyId={toy.toy_id} feature={feature} />
+                  </Accordion.Body>
+                </Accordion.Item>
+              ))}
+            </Accordion>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}
diff --git a/src/context/ToysContext.tsx b/src/context/ToysContext.tsx
@@ -0,0 +1,28 @@
+import { invoke } from "@tauri-apps/api";
+import { createContext, ReactNode, useContext, useState } from "react";
+import { FeVCToy } from "../../src-tauri/bindings/FeVCToy";
+import { GET_TOYS } from "../data/constants";
+
+const ToysContext = createContext<{ toys: FeVCToy[]; refetchToys: () => void }>(
+  { toys: [], refetchToys: () => null }
+);
+
+export function useToys() {
+  return useContext(ToysContext);
+}
+
+export function ToysProvider({ children }: { children: ReactNode }) {
+  const [toys, setToys] = useState<FeVCToy[]>([]);
+
+  async function refetchToys() {
+    await invoke<null | { [key: number]: FeVCToy }>(GET_TOYS).then((response) =>
+      setToys(response ? Object.values(response) : [])
+    );
+  }
+
+  return (
+    <ToysContext.Provider value={{ toys, refetchToys }}>
+      {children}
+    </ToysContext.Provider>
+  );
+}
diff --git a/src/data/constants.ts b/src/data/constants.ts
@@ -10,4 +10,4 @@ export const SET_CONFIG = "set_vibecheck_config";
 
 export const SCAN_LENGTH = 10000;
 export const SCAN_CHECK_INTERVAL = 1000;
-export const ALTER_TOY_DEBOUNCE = 100;
+export const ALTER_TOY_DEBOUNCE = 50;