relative page routing seems functional

src/common/ResponsiveTable.tsx

@@ -395,7 +395,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                       })
                     :
                       Object.values(row).map((value, j) => {
-                        console
                         return (
                           <TableCell key={"row-"+index+"cell-"+j}>
                             {value ? value.toString() : ""}
@@ -431,7 +430,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
       <TablePagination
         rowsPerPageOptions={rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 20]}
         component="div"
-        count={total}
+        count={total ? total : 0}
         rowsPerPage={pageSize}
         page={page}
         onPageChange={(_event, page) => handlePageChange(page)}

src/navigation/Router.tsx

@@ -23,23 +23,56 @@ interface Props {
 export default function Router(props: Props) {
 
   const {open, onOpen, onClose, toggleTheme } = props;
-  const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0()
-  const isMobile = useMobile()
+  const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
+  const isMobile = useMobile();
 
-  const hello = () => {
+  const RelativeRoutes = () => {
+    console.log("relative route")
     return (
-      <Typography>
-        Hello!
-      </Typography>
+      <Routes>
+        <Route path="teams/*" element={<TeamsRoute/>} />
+        <Route path="devices" element={<DevicesRoute/>} />
+      </Routes>
     )
   }
 
-  // useEffect(() => {
-  //   setAuthorized(isAuthenticated || offline);
-  //   if (isAuthenticated && !user.empty() && !user.status.finishedIntro) {
-  //     history.push("/welcome");
-  //   }
-  // }, [history, isAuthenticated, offline, user]);
+  const TeamsRoute = () => {
+    console.log("teams route")
+    return (
+      <Routes>
+        <Route
+          path="" // "/settings/basic"
+          element={<Teams />}
+        />
+        <Route
+          path="/:teamID" // "/settings/basic"
+          element={<TeamPage />}
+        />
+        <Route
+          path="/:teamID/*" // "/settings/basic"
+          element={<RelativeRoutes />}
+        />
+      </Routes>
+    );
+  };
+
+  const DevicesRoute = () => {
+    console.log("devices route")
+    return (
+      <div>
+        <Routes>
+          <Route
+            path="" // "/settings/basic"
+            element={<Devices />}
+          />
+          {/* <Route
+            path="/:deviceID" // "/settings/basic"
+            element={<TeamPage />}
+          /> */}
+        </Routes>
+      </div>
+    );
+  };
 
   if (isLoading) return null;
   if (!isAuthenticated) {
@@ -65,22 +98,14 @@ export default function Router(props: Props) {
           {/* Redirects */}
           <Route path="/callback" element={<Navigate to="/" />} />
           <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} />
+          <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} />
           
           {/* Page routes */}
-          <Route index element={hello()} />
-          <Route path="/teams" element={<Teams/>} />
-          <Route path="/teams/:teamID" element={<TeamPage/>} />
-          <Route path="/users" element={<Users/>} />
-          <Route path="*/devices" element={<Devices/>} />
-          <Route path="/devices" element={<Devices/>} />
-          {/* <Route
-            path="/teams/:teamID"
-            element={<Team />}
-          /> */}
-          {/* <Route path="blogs" element={<Blogs />} />
-          <Route path="contact" element={<Contact />} />
-          <Route path="*" element={<NoPage />} /> */}
+          <Route index element={<Typography>Hello!</Typography>} />
+          <Route path="users" element={<Users/>} />
           <Route path="/logout" element={<Logout />} />
+          <Route path="*" element={<RelativeRoutes/>} />
+          
         </Routes>
         {isMobile && <BottomNavigator openSide={onOpen} sideIsOpen={open} />}
       </BrowserRouter>

src/pages/Devices.tsx

@@ -11,6 +11,7 @@ import PageContainer from "./PageContainer";
 import { useMobile } from "hooks";
 import { useLocation, useNavigate } from "react-router-dom";
 import { or } from "utils/types";
+import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -30,7 +31,7 @@ export default function Devices() {
   const location = useLocation();
   const deviceAPI = useDeviceAPI();
   const [limit, setLimit] = useState(10);
-  const [offset, setOffset] = useState(0);
+  const [page, setPage] = useState(0);
   const [order, ] = useState<"asc" | "desc">("asc");
   const [orderBy, ] = useState("name");
   const [search, setSearch] = useState("");
@@ -47,7 +48,21 @@ export default function Devices() {
   };
 
   const loadDevices = () => {
-    deviceAPI.list(limit, offset*limit, order, orderBy, search).then(resp => {
+    deviceAPI.list(
+      limit, 
+      page*limit, 
+      order, 
+      orderBy, 
+      search,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      getContextKeys(),
+      getContextTypes()
+    ).then(resp => {
       setDevices(resp.data.devices)
       setTotal(resp.data.total)
     })
@@ -55,7 +70,7 @@ export default function Devices() {
 
   useEffect(() => {
     loadDevices()
-  }, [limit, offset, order, orderBy, search])
+  }, [limit, page, order, orderBy, search])
 
   const handleChange = (event: any) => {
     setLimit(event.target.value);
@@ -102,8 +117,8 @@ export default function Devices() {
         columns={columns()}
         total={total}
         pageSize={limit}
-        page={offset}
-        setPage={setOffset}
+        page={page}
+        setPage={setPage}
         handleRowsPerPageChange={handleChange}
         onRowClick={toDevice}
         setSearchText={setSearch}

src/pages/Teams.tsx

@@ -1,5 +1,6 @@
 import { useMobile } from "hooks";
 import PageContainer from "pages/PageContainer";
+import { Outlet } from "react-router-dom";
 import TeamList from "teams/TeamList";
 
 export default function Teams() {
@@ -7,6 +8,7 @@ export default function Teams() {
   return (
     <PageContainer padding={isMobile ? 0 : 2}>
       <TeamList />
+      <Outlet/>
     </PageContainer>
   );
 }