modified tsconfig.app.json file to deal with errors i was getting, also made changes to the tabs on the devices page and moved group stuff out of the router and into the device page file

package-lock.json

@@ -4220,7 +4220,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#8c31044c11d0b97c40a253cc917a333f33c3cdf4",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#7fa04da5ae9ec99cf1caa6971ca1541fe44f10c4",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }

src/navigation/Router.tsx

@@ -13,9 +13,7 @@ import Header from "app/Header";
 import Logout from "pages/Logout";
 import Devices from "pages/Devices";
 import DevicePage from "pages/Device";
-import { Groups } from "@mui/icons-material";
 import GroupsPage from "pages/Groups";
-import { Group } from "models";
 
 interface Props {
   open: boolean,
@@ -34,7 +32,6 @@ export default function Router(props: Props) {
   const {open, onOpen, onClose, toggleTheme } = props;
   const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
   const isMobile = useMobile();
-  const [groups, setGroups] = useState<Group[]>([]);
 
   const RelativeRoutes = () => {
     console.log("relative route")
@@ -76,7 +73,7 @@ export default function Router(props: Props) {
           <Route
             key="Devices page route"
             path="" // "/settings/basic"
-            element={<Devices groups={groups} setGroups={setGroups} key={"Devices page"} />}
+            element={<Devices key={"Devices page"} />}
           />
           <Route
             path="/:deviceID" // "/settings/basic"
@@ -91,10 +88,6 @@ export default function Router(props: Props) {
     );
   };
 
-  useEffect(() => {
-    console.log(groups)
-  }, [groups])
-
   const GroupsRoute = () => {
     console.log("groups route")
     console.log(window.location.pathname)
@@ -108,7 +101,7 @@ export default function Router(props: Props) {
           <Route
             key="Devices page route"
             path="/:groupID/devices/" 
-            element={<Devices groups={groups} setGroups={setGroups} key={"Devices page"}/>}
+            element={<Devices key={"Devices page"}/>}
           />
           <Route
             path="/:groupID/devices/:deviceID" 

src/pages/Devices.tsx

@@ -50,13 +50,8 @@ const useStyles = makeStyles((theme: Theme) => {
   });
 });
 
-interface Props {
-  groups: Group[];
-  setGroups: React.Dispatch<React.SetStateAction<Group[]>>;
-}
-
-export default function Devices(props: Props) {
-  const { groups, setGroups } = props;
+export default function Devices() {
+  const [groups, setGroups] = useState<Group[]>([]);
   const isMobile = useMobile();
   const classes = useStyles();
   const navigate = useNavigate();
@@ -182,8 +177,11 @@ export default function Devices(props: Props) {
     })
   }
 
+
+
   useEffect(() => {
     loadDevices()
+
   }, [limit, page, order, orderBy, search, tab])
 
   useEffect(() => {
@@ -373,22 +371,21 @@ export default function Devices(props: Props) {
         }}
       >
         <Tabs
-          {...{}}
           value={groups.length > 0 ? tab : "all"}
           onChange={handleTabChange}
           variant="scrollable"
           scrollButtons="auto"
           sx={{ borderRadius: 1 }}
         >
-          <Tab {...{}} value={"all"} label="All" />
-          {groupsLoading  ? 
-            <CircularProgress/>
+          <Tab value={"all"} label="All" />
+          {groupsLoading ? 
+            <Tab value={"loading"} label={<CircularProgress />}/>
           : groups.map((group, index) => {
             if (group.id()) return (
-              <Tab {...{}} value={group.id().toString()} label={group.name()} key={"group-tab-"+index}/>
+              <Tab value={group.id().toString()} label={group.name()} key={"group-tab-"+index}/>
             )
           })}
-          <Tab {...{}} value={"never"} label={<CreateGroupIcon className={classes.green} />} onClick={() => openGroupSettings(undefined, "add")} />
+          <Tab value={"never"} label={<CreateGroupIcon className={classes.green} />} onClick={() => openGroupSettings(undefined, "add")} />
         </Tabs>
       </Box>
       <ResponsiveTable<pond.Device>

tsconfig.app.json

@@ -8,10 +8,10 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "moduleResolution": "node",
+    //"allowImportingTsExtensions": true,
     "isolatedModules": true,
-    "moduleDetection": "force",
+    //"moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",