Notification: Device added for scanned

package.json

@@ -26,7 +26,7 @@
     "eslint-config-react-app": "7.0.1",
     "immer": "9.0.16",
     "is-electron": "^2.2.1",
-    "notistack": "^2.0.8",
+    "notistack": "^3.0.1",
     "oauth-pkce": "0.0.6",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
@@ -213,4 +213,4 @@
       }
     }
   }
-}
+}

src/App.tsx

@@ -114,7 +114,7 @@ export default function App() {
 
   return (
     <ThemeProvider theme={theme}>
-      <SnackbarProvider maxSnack={5}>
+      <SnackbarProvider maxSnack={15}>
         <WsContext.Provider value={ws}>
           <SpotifyProvider>
             <Box

src/components/PixelGraph.tsx

@@ -25,8 +25,6 @@ const PixelGraph = ({
   const graphs = useStore((state) => state.graphs);
   const rows = virtuals[virtId].is_device ? devices[virtuals[virtId].is_device]?.config?.rows || virtuals[virtId].config.rows || 1 : virtuals[virtId].config.rows || 1;
 
-  console.log(rows, pixels[0]?.length)
-
   useEffect(() => {
     const handleWebsockets = (e: any) => {
       if (e.detail.id === virtId) {

src/pages/Devices/Devices.tsx

@@ -43,6 +43,7 @@ const Devices = () => {
 
   useEffect(() => {
     const handleWebsockets = (e: any) => {
+      console.log(e);
       if (e.detail === 'devices_updated') {
         getDevices();
       }

src/pages/Home/Dashboard.tsx

@@ -113,12 +113,6 @@ const Dashboard = () => {
     getScenes();
   }, []);
 
-  // console.log(
-  //   Object.values(config.ledfx_presets)
-  //     .map((e: any) => Object.keys(e).length)
-  //     .reduce((a: number, b: number) => a + b)
-  // );
-  console.log(config);
   return (
     <div className="Content">
       <Stack spacing={[0, 0, 2, 2, 2]} alignItems="center">

src/pages/Home/Home.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-promise-executor-return */
 /* eslint-disable no-plusplus */
 /* eslint-disable no-await-in-loop */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Box,
   Typography,
@@ -12,6 +12,7 @@ import {
   CircularProgress,
   Badge,
 } from '@mui/material';
+import { useSnackbar } from 'notistack';
 import logoCircle from '../../assets/ring.png';
 import TourHome from '../../components/Tours/TourHome';
 import useStore from '../../store/useStore';
@@ -22,6 +23,7 @@ import Dashboard from './Dashboard';
 import BladeIcon from '../../components/Icons/BladeIcon/BladeIcon';
 import DashboardDetailed from './DashboardDetailed';
 import Popover from '../../components/Popover/Popover';
+import ws from '../../utils/Websocket';
 
 const sleep = (ms: number) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -32,10 +34,12 @@ export default function Home() {
   const getDevices = useStore((state) => state.getDevices);
   const getVirtuals = useStore((state) => state.getVirtuals);
   const [scanning, setScanning] = useState(-1);
+  const [lastFound, setLastFound] = useState([] as string[]);
   const invisible = useStore((state) => state.tours.home);
   const features = useStore((state) => state.features);
   const getSystemConfig = useStore((state) => state.getSystemConfig);
   const setSystemConfig = useStore((state) => state.setSystemConfig);
+  const { enqueueSnackbar } = useSnackbar();
 
   const onSystemSettingsChange = (setting: string, value: any) => {
     setSystemConfig({ [setting]: value }).then(() => getSystemConfig());
@@ -56,6 +60,50 @@ export default function Home() {
         setScanning(-1);
       });
   };
+
+  useEffect(() => {
+    const handleWebsockets = (e: any) => {
+      if (e.detail.id === 'device_created') {
+        if (lastFound.indexOf(e.detail.device_name) === -1) {
+          enqueueSnackbar(`New Device added: ${e.detail.device_name}`, {
+            variant: 'info',
+          });
+          setLastFound([...lastFound, e.detail.device_name]);
+        }
+      }
+    };
+    document.addEventListener('YZ_device_created', handleWebsockets);
+    return () => {
+      document.removeEventListener('YZ_device_created', handleWebsockets);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleWebsockets = () => {
+      const req = {
+        event_type: 'device_created',
+        id: 1337,
+        type: 'subscribe_event',
+      };
+      // console.log("Send");
+      (ws as any).send(JSON.stringify(++req.id && req));
+    };
+    document.addEventListener('subs_device_created', handleWebsockets);
+    return () => {
+      const removeGetWs = async () => {
+        const request = {
+          id: 1337,
+          type: 'unsubscribe_event',
+          event_type: 'device_created',
+        };
+        (ws as any).send(JSON.stringify(++request.id && request));
+      };
+      // console.log("Clean Up");
+      removeGetWs();
+      document.removeEventListener('subs_device_created', handleWebsockets);
+    };
+  }, []);
+
   return features.dashboard ? (
     features.dashboardDetailed ? (
       <DashboardDetailed />

src/utils/Websocket.ts

@@ -46,6 +46,13 @@ function createSocket() {
         };
         // console.log("Send");
         (ws as any).send(JSON.stringify(++req.id && req));
+        const requ = {
+          event_type: 'device_created',
+          id: 1,
+          type: 'subscribe_event',
+        };
+        // console.log("Send");
+        (ws as any).send(JSON.stringify(++requ.id && requ));
       },
       onmessage: (event) => {
         if (JSON.parse(event.data).event_type === 'visualisation_update') {
@@ -65,6 +72,16 @@ function createSocket() {
             })
           );
         }
+        if (JSON.parse(event.data).event_type === 'device_created') {
+          document.dispatchEvent(
+            new CustomEvent('YZ_device_created', {
+              detail: {
+                id: 'device_created',
+                device_name: JSON.parse(event.data).device_name,
+              },
+            })
+          );
+        }
         if (JSON.parse(event.data).event_type === 'graph_update') {
           document.dispatchEvent(
             new CustomEvent('YZoldDev', {

yarn.lock

@@ -8751,6 +8751,11 @@ globrex@^0.1.2:
   resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
   integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
 
+goober@^2.0.33:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.12.tgz#6c1645314ac9a68fe76408e1f502c63df8a39042"
+  integrity sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q==
+
 got@^9.6.0:
   version "9.6.0"
   resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
@@ -11663,13 +11668,13 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-notistack@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.8.tgz#78cdf34c64e311bf1d1d71c2123396bcdea5e95b"
-  integrity sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw==
+notistack@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-3.0.1.tgz#daf59888ab7e2c30a1fa8f71f9cba2978773236e"
+  integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==
   dependencies:
     clsx "^1.1.0"
-    hoist-non-react-statics "^3.3.0"
+    goober "^2.0.33"
 
 npm-conf@^1.1.3:
   version "1.1.3"