groupd now generate tabs

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
 import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
-import { Box, Chip, IconButton, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Chip, IconButton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
 import { blue, green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -15,6 +15,7 @@ import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { getDeviceStateHelper } from "pbHelpers/DeviceState";
 import { Group } from "models";
 import GroupSettings from "group/GroupSettings";
+import SmartBreadcrumb from "common/SmartBreadcrumb";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -49,11 +50,12 @@ export default function Devices() {
   const [devices, setDevices] = useState<pond.Device[]>([])
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
 
-  const [groupLimit, setGroupLimit] = useState(10);
-  const [groupPage, setGroupPage] = useState(0);
+  const [groups, setGroups] = useState<Group[]>([])
+  const [groupLimit, ] = useState(10);
+  const [groupPage, ] = useState(0);
   const [orderGroup, ] = useState<"asc" | "desc">("asc");
   const [orderGroupBy, ] = useState("name");
-  const [searchGroup, setGroupSearch] = useState("");
+  const [searchGroup, ] = useState("");
   const [totalGroups, setTotalGroups] = useState(0);
 
   const [selectedGroup, setSelectedGroup] = useState<Group | undefined>(undefined);
@@ -62,6 +64,8 @@ export default function Devices() {
   >(undefined);
   const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
 
+  const [tab, setTab] = useState("all");
+
   const openProvisionDialog = () => {
     setIsProvisionDialogOpen(true);
   };
@@ -79,7 +83,7 @@ export default function Devices() {
     setSelectedGroup(group);
   };
 
-  const closeGroupSettings = (event: any) => {
+  const closeGroupSettings = (_event: any) => {
     setGroupSettingsIsOpen(false);
     setGroupSettingsMode(undefined);
     setSelectedGroup(undefined);
@@ -93,10 +97,20 @@ export default function Devices() {
       orderGroupBy, 
       searchGroup,
     ).then(resp => {
-      console.log(resp.data)
+      // console.log(resp.data)
+      let newGroups: Group[] = []
+      resp.data.groups.forEach((group: pond.Group) => {
+        newGroups.push(Group.create(group))
+      })
+      setGroups(newGroups)
+      setTotalGroups(resp.data.total)
     })
   }
 
+  useEffect(() => {
+    console.log(groups)
+  }, [groups])
+
   const loadDevices = () => {
     deviceAPI.list(
       limit, 
@@ -140,6 +154,11 @@ export default function Devices() {
     navigate(appendToUrl(or(device.settings?.deviceId, "")), { state: {device: device} })
   };
 
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: string) => {
+    if (newValue !== "never") setTab(newValue);
+    if (newValue === "never") openGroupSettings(undefined, "add");
+  };
+
   const columns = (): Column<pond.Device>[] => {
     return [
       {
@@ -170,7 +189,6 @@ export default function Devices() {
                 label={device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId} 
               />
             </Box>
-            
           )
         }
       },
@@ -216,7 +234,7 @@ export default function Devices() {
     )
   }
 
-  const subtitle = () => {
+  const subtitle = () => { 
     return (
       <>
       {provisionButton()}
@@ -227,6 +245,19 @@ export default function Devices() {
 
   return(
     <PageContainer padding={isMobile ? 0 : 2}>
+      <SmartBreadcrumb />
+      <Tabs
+        value={tab}
+        onChange={handleTabChange}
+      >
+        <Tab value={"all"} label="All" />
+        {groups.map((group, index) => {
+          if (group.id()) return (
+            <Tab value={group.id()} label={group.name()} key={"group-tab-"+index}/>
+          )
+        })}
+        <Tab value={"never"} label={groupButton()} />
+      </Tabs>
       <ResponsiveTable<pond.Device>
         title="Devices"
         subtitle={subtitle()}