Feature/175 package detail page (#190)

* Show maintainer label
* Allow installation/removal of package
* Use different config file `schemaV2.json` for configurator as to not break compatibility with CLI schema

src/AdbRouter.jsx

@@ -39,7 +39,7 @@ import {
 } from "./features/device/deviceSlice";
 
 import {
-  selectCheckedMaster,
+  selectChecked as selectCheckedMaster,
   selectIsMaster,
 } from "./features/tabGovernor/tabGovernorSlice";
 
@@ -57,15 +57,12 @@ export default function AdbRouter() {
   const [adb, setAdb] = useState(null);
   const [device, setDevice] = useState(null);
   const [intervalId, setIntervalId] = useState(null);
-  const [watcher, setWatcher] = useState(null);
-
-  const [canAutoConnect, setCanAutoConnect] = useState(false);
 
   const adbRef = useRef();
   const deviceRef = useRef();
+  const devicePromiseRef = useRef();
   const intervalRef = useRef();
   const watcherRef = useRef();
-  const devicePromiseRef = useRef();
 
   const connectToDevice = useCallback(async (device) => {
     if(device && !adb) {
@@ -133,13 +130,14 @@ export default function AdbRouter() {
    * connect to.
    */
   const autoConnect = useCallback(async() => {
+    const canAutoConnect = (!devicePromiseRef.current && checkedMasterState && isMaster);
     if(canAutoConnect) {
       const devices = await AdbWebUsbBackend.getDevices();
       if(devices.length > 0) {
         await connectToDevice(devices[0]);
       }
     }
-  }, [canAutoConnect, connectToDevice]);
+  }, [connectToDevice, checkedMasterState, devicePromiseRef, isMaster]);
 
   // Handle button press for device connection
   const handleDeviceConnect = useCallback(async() => {
@@ -155,15 +153,14 @@ export default function AdbRouter() {
     }
   }, [connectToDevice, devicePromiseRef, dispatch]);
 
-  // Check if we are able to auto connect to the device
-  useEffect(() => {
-    setCanAutoConnect(!devicePromiseRef.current && checkedMasterState && isMaster);
-  }, [checkedMasterState, devicePromiseRef, isMaster]);
-
   // Set watcher to monitor WebUSB devices popping up or going away
   useEffect(() => {
-    if(!watcher && window.navigator.usb) {
-      const watcher = new AdbWebUsbBackendWatcher(async (id) => {
+    if(window.navigator.usb) {
+      if(watcherRef.current) {
+        watcherRef.current.dispose();
+      }
+
+      watcherRef.current = new AdbWebUsbBackendWatcher(async (id) => {
         if(!id) {
           setAdb(null);
           dispatch(resetDevice());
@@ -173,10 +170,8 @@ export default function AdbRouter() {
           await autoConnect();
         }
       });
-
-      setWatcher(watcher);
     }
-  }, [autoConnect, connectToDevice, dispatch, watcher]);
+  }, [autoConnect, dispatch, watcherRef]);
 
   // Automatically try to connect to device when application starts up
   useEffect(() => {
@@ -212,7 +207,6 @@ export default function AdbRouter() {
       setAdb(null);
       setDevice(null);
       setIntervalId(null);
-      setWatcher(null);
     };
   }, [dispatch]);
 
@@ -229,10 +223,6 @@ export default function AdbRouter() {
     intervalRef.current = intervalId;
   }, [intervalId]);
 
-  useEffect(() => {
-    watcherRef.current = watcher;
-  }, [watcher]);
-
   return(
     <Routes>
       <Route

src/App.jsx

@@ -20,14 +20,13 @@ import Device from "./features/device/Device";
 import Error404 from "./features/404/404";
 import Header from "./features/navigation/Header";
 import Healthcheck from "./features/healthcheck/Healthcheck";
+import Install from "./features/setup/Install";
 import Home from "./features/home/Main";
-import Packages from "./features/packages/Packages";
 import Package from "./features/package/Package";
-import Startup from "./features/startup/Startup";
-
-import Setup from "./features/setup/Setup";
-import Install from "./features/setup/Install";
+import Packages from "./features/packages/Packages";
 import Remove from "./features/setup/Remove";
+import Setup from "./features/setup/Setup";
+import Startup from "./features/startup/Startup";
 import Update from "./features/setup/Update";
 
 import {
@@ -44,7 +43,6 @@ import { selectPassed } from "./features/healthcheck/healthcheckSlice";
 
 import { selectCanClaim } from "./features/tabGovernor/tabGovernorSlice";
 
-
 function App({
   adb,
   handleAdbConnectClick,

src/Router.jsx

@@ -18,8 +18,8 @@ import AdbRouter from "./AdbRouter";
 import TabGovernor from "./utils/TabGovernor";
 
 import {
-  checkedMaster,
   setCanClaim,
+  setChecked,
   setMaster,
 } from "./features/tabGovernor/tabGovernorSlice";
 
@@ -39,7 +39,7 @@ export default function Router() {
     if(!tabGovernor) {
       const tabGovernor = new TabGovernor((isMaster) => {
         dispatch(setMaster(isMaster));
-        dispatch(checkedMaster(true));
+        dispatch(setChecked());
       }, (canClaim) => {
         dispatch(setCanClaim(canClaim));
       });

src/features/overlays/Spinner.jsx

@@ -0,0 +1,31 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import Box from "@mui/material/Box";
+
+import Spinner from "../loading/Spinner";
+
+export default function SpinnerOverlay({ text }) {
+  return(
+    <Box
+      sx={{
+        background: "rgba(0, 0, 0, 0.75)",
+        position: "absolute",
+        left: "0px",
+        top: "0px",
+        width: "100%",
+        height: "100%",
+        zIndex: "100",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Spinner text={text} />
+    </Box>
+  );
+}
+
+SpinnerOverlay.defaultProps = { text: "" };
+
+SpinnerOverlay.propTypes = { text: PropTypes.string };