Merge pull request #19 from diyhue/restructure

Restructure
diyhue · Jun 9, 2024 · f5914bd · f5914bd
2 parents 0639862 + 1f9556e
commit f5914bd
Show file tree

Hide file tree

Showing 148 changed files with 6,471 additions and 6,017 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -2,6 +2,7 @@ on:
   push:
     branches:
       - "main"
+      - "restructure"
 
 jobs:
   build-project:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,30 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
     "@jaames/iro": "^5.5.0",
+    "@mui/material": "latest",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^1.6.2",
+    "file-saver": "v2.0.5",
     "firebase": "^8.3.0",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^11.1.9",
     "install": "^0.13.0",
     "react": "^18.2.0",
-    "react-confirm-alert": "^2.7.0",
+    "react-confirm-alert": "^3.0.6",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
-    "react-modal": "^3.15.1",
+    "react-modal": "^3.16.1",
     "react-redux": "^7.2.9",
-    "react-responsive": "^8.2.0",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.21.0",
     "react-scripts": "^5.0.1",
     "react-select": "^5.8.0",
     "sass": "^1.45.0",
-    "web-vitals": "^1.0.1",
-    "@mui/material": "latest",
-    "@emotion/react": "latest",
-    "@emotion/styled": "latest"
+    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -51,5 +52,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.24.6"
   }
 }
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-384x384.png b/public/android-chrome-384x384.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>diyHue App</title>
+    <title>DIYHue App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "DIYHue",
+  "name": "DIYHue Webapp",
   "icons": [
     {
       "src": "favicon.ico",
@@ -18,8 +18,24 @@
       "sizes": "512x512"
     }
   ],
+  "screenshots": [
+    {
+     "src": "screenshot_desktop.jpg",
+      "sizes": "2556x1238",
+      "type": "image/jpg",
+      "form_factor": "wide",
+      "label": "DIYHue App"
+    },
+    {
+      "src": "screenshot_mobile.jpg",
+       "sizes": "1179x2379",
+       "type": "image/jpg",
+       "form_factor": "narrow",
+       "label": "DIYHue App"
+     }
+  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#000000"
 }
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/screenshot_desktop.jpg b/public/screenshot_desktop.jpg
diff --git a/public/screenshot_mobile.jpg b/public/screenshot_mobile.jpg
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
@@ -1,23 +1,8 @@
 import React, { useEffect, useState } from "react";
+
 import axios from "axios";
-import TheLayout from "./containers/TheLayout";
-
-import "./scss/mainframe.scss";
-import "./scss/content.scss";
-import "./scss/forms.scss";
-import "./scss/groups.scss";
-import "./scss/notification.scss";
-import "./scss/modal.scss";
-import "./scss/scenepicker.scss";
-import "./scss/device.scss";
-import "./scss/light.scss";
-import "./scss/components/actionbuttons.scss";
-import "./scss/components/flipswitch.scss";
-import "./scss/components/scrollbar.scss";
-import "./scss/components/slider.scss";
-import "./scss/components/switches.scss";
-import "./scss/components/devicecard.scss";
-import "./scss/components/addlight.scss";
+
+import Layout from "./Mainframe/Layout";
 
 const loading = (
   <div className="pt-3 text-center">
@@ -39,7 +24,7 @@ const App = () => {
           //console.log(`API_KEY from API: ${result.data}`);
           setAPI_KEY(result.data);
         } else {
-          console.log(`Unable to fetch API_KEY! from ${HOST_IP}/get-key`);
+          console.error(`Unable to fetch API_KEY! from ${HOST_IP}/get-key`);
         }
       })
       .catch((error) => {
@@ -49,7 +34,7 @@ const App = () => {
 
   return (
     <React.Suspense fallback={loading}>
-      <TheLayout HOST_IP={HOST_IP} API_KEY={API_KEY} />
+      <Layout HOST_IP={HOST_IP} API_KEY={API_KEY} />
     </React.Suspense>
   );
 };

diff --git a/src/containers/TheContent.js → src/Mainframe/ContentSection.jsx b/src/containers/TheContent.js → src/Mainframe/ContentSection.jsx
@@ -1,17 +1,19 @@
 import React, { Suspense } from "react";
 import { Outlet, Route, Routes, HashRouter } from "react-router-dom";
 
-// routes config
-import routes from "../routes";
 import { Toaster } from "react-hot-toast";
 
+import routes from "../routes";
+
+import "./contentSection.scss";
+
 const loading = (
   <div className="pt-3 text-center">
     <div className="sk-spinner sk-spinner-pulse"></div>
   </div>
 );
 
-const TheContent = ({ HOST_IP, API_KEY }) => {
+const ContentSection = ({ HOST_IP, API_KEY }) => {
   return (
     <div className="content">
       <Toaster position="top-right" />
@@ -24,7 +26,9 @@ const TheContent = ({ HOST_IP, API_KEY }) => {
                   <Route
                     key={idx}
                     path={route.path}
-                    element={<route.component API_KEY={API_KEY} HOST_IP={HOST_IP} />}
+                    element={
+                      <route.component API_KEY={API_KEY} HOST_IP={HOST_IP} />
+                    }
                   />
                 )
               );
@@ -37,4 +41,4 @@ const TheContent = ({ HOST_IP, API_KEY }) => {
   );
 };
 
-export default React.memo(TheContent);
+export default ContentSection;
diff --git a/src/Mainframe/HeaderSection.jsx b/src/Mainframe/HeaderSection.jsx
@@ -0,0 +1,95 @@
+import { useState, useEffect } from "react";
+
+import axios from "axios";
+import { FaBars } from "react-icons/fa";
+import { motion } from "framer-motion";
+import { toast } from "react-hot-toast";
+import FlipSwitch from "../components/FlipSwitch/FlipSwitch";
+
+
+import "./headerSection.scss";
+import NotificationCenter from "../components/NotificationCenter/NotificationCenter";
+
+const HeaderSection = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
+  const [group0State, setGroup0State] = useState(false);
+
+  const iconVariants = {
+    opened: {
+      rotate: 90,
+      //scale: 2
+    },
+    closed: {
+      rotate: 0,
+      //scale: 1
+    },
+  };
+
+  useEffect(() => {
+    const fetchGroups = () => {
+      if (API_KEY !== undefined) {
+        axios
+          .get(`${HOST_IP}/api/${API_KEY}/groups/0`)
+          .then((fetchedData) => {
+            //console.log(fetchedData.data);
+            setGroup0State(fetchedData.data["state"]["any_on"]);
+          })
+          .catch((error) => {
+            console.error(error);
+            toast.error(`Error occurred: ${error.message}`);
+          });
+      }
+    };
+
+    fetchGroups();
+    const interval = setInterval(() => {
+      fetchGroups();
+    }, 5000); // <<-- ⏱ 1000ms = 1s
+    return () => clearInterval(interval);
+  }, [HOST_IP, API_KEY]);
+
+  const handleToggleChange = (state) => {
+    const newState = { on: state };
+    //console.log("Apply state " + JSON.stringify(newState));
+    axios
+      .put(`${HOST_IP}/api/${API_KEY}/groups/0/action`, newState)
+      .then((response) => {
+        // Only update the state if the request was successful
+        setGroup0State(state);
+      })
+      .catch((error) => {
+        console.error("Error updating state: ", error);
+      });
+  };
+
+  return (
+    <div className="topbarRight">
+      <motion.div
+        className="hamburger"
+        initial={false}
+        variants={iconVariants}
+        animate={showSidebar ? "opened" : "closed"}
+        onClick={() => setShowSidebar(!showSidebar)}
+      >
+        <FaBars />
+      </motion.div>
+
+      <NotificationCenter
+        notifications={true}
+        updating={true}
+        HOST_IP={HOST_IP}
+        API_KEY={API_KEY}
+      />
+
+      <div className="onbtn">
+        <FlipSwitch
+          value={group0State}
+          onChange={(e) => handleToggleChange(e)}
+          checked={group0State}
+          label={`Turn all lights ${group0State ? "off" : "on"}`}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HeaderSection;
diff --git a/src/Mainframe/Layout.jsx b/src/Mainframe/Layout.jsx
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useMediaQuery } from "react-responsive";
+
+import ContentSection from "./ContentSection";
+import SidebarSection from "./SidebarSection";
+import HeaderSection from "./HeaderSection";
+
+import "./layout.scss";
+import "./scrollbar.scss";
+
+const Layout = ({ HOST_IP, API_KEY }) => {
+  const isMobile = useMediaQuery({ query: `(max-width: 750px)` });
+  const [showSidebar, setShowSidebar] = useState(!isMobile);
+
+  return (
+    <>
+      <SidebarSection
+        showSidebar={showSidebar}
+        setShowSidebar={setShowSidebar}
+        isMobile={isMobile}
+      />
+
+      <div className="columnRight">
+        <HeaderSection
+          HOST_IP={HOST_IP}
+          API_KEY={API_KEY}
+          showSidebar={showSidebar}
+          setShowSidebar={setShowSidebar}
+        />
+        <ContentSection
+          HOST_IP={HOST_IP}
+          API_KEY={API_KEY}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Layout;
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ on: @@
       push:
         branches:
           - "main"
+          - "restructure"
     jobs:
       build-project:
@@ Expand Down @@