Merge branch 'staging_environment' into dev_environment

src/app/App.tsx

@@ -60,7 +60,7 @@ function App() {
         <AuthWrapper setToken={setToken}>
           { token ? 
             <HTTPProvider token={token}>
-              <UserWrapper />
+              <UserWrapper token={token} />
             </HTTPProvider>
           :
             <LoadingScreen

src/app/UserWrapper.tsx

@@ -11,6 +11,7 @@ import { Team } from '../models/team'
 import { makeStyles } from '@mui/styles'
 import { CssBaseline, Theme } from '@mui/material'
 import { AppThemeProvider } from 'theme/AppThemeProvider'
+import HTTPProvider from 'providers/http'
 // import FirmwareLoader from './FirmwareLoader'
 
 const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
@@ -48,10 +49,15 @@ const globalDefault = {
   showErrors: false,
   userTeamPermissions: [],
   backgroundTasksComplete: false,
-  firmware: new Map()
+  firmware: new Map(),
 }
 
-export default function UserWrapper() {
+interface Props {
+  token: string;
+}
+
+export default function UserWrapper(props: Props) {
+  const { token } = props;
   const [loading, setLoading] = useState(false)
   const userAPI = useUserAPI();
   const classes = useStyles();
@@ -98,7 +104,9 @@ export default function UserWrapper() {
       <AppThemeProvider >
         <CssBaseline/>
         <main className={classes.appContent}>
-          <NavigationContainer />
+          <HTTPProvider token={token}>
+            <NavigationContainer />
+          </HTTPProvider>
         </main>
       </AppThemeProvider>
     </StateProvider>

src/common/SmartBreadcrumb.tsx

@@ -288,7 +288,9 @@ export default function SmartBreadcrumb(props: Props) {
       return [linkComponent("/", "Dashboard", true)];
     }
     
-    if (prependPaths) pathnames.unshift(...prependPaths)
+    // if (prependPaths) pathnames.unshift(...prependPaths)
+    // if (prependPaths) pathnames.push(...prependPaths)
+    if (prependPaths) pathnames.splice(pathnames.length - 1, 0, ...prependPaths);
 
     //console.log(pathnames)
 

src/group/GroupActions.tsx

@@ -47,11 +47,12 @@ interface Props {
   devices: Device[];
   permissions: pond.Permission[];
   refreshCallback: () => void;
+  removeCallback?: () => void;
 }
 
 export default function GroupActions(props: Props) {
   const classes = useStyles();
-  const { group, permissions, refreshCallback, devices } = props;
+  const { group, permissions, refreshCallback, devices, removeCallback } = props;
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [groupSettingsOpen, setGroupSettingsOpen] = useState(false);
   const [shareOpen, setShareOpen] = useState(false);
@@ -142,6 +143,7 @@ export default function GroupActions(props: Props) {
           isDialogOpen={groupSettingsOpen}
           refreshCallback={refreshCallback}
           closeDialogCallback={() => setGroupSettingsOpen(false)}
+          removeGroupCallback={removeCallback}
           groupDevices={devices}
         />
         <ShareObject

src/group/GroupSettings.tsx

@@ -35,6 +35,7 @@ import { groupsAreEqual } from "pbHelpers/Group";
 import { useGlobalState } from "providers";
 import React, { useCallback, useEffect, useState } from "react";
 import RemoveGroup from "./RemoveGroup";
+import { pond } from "protobuf-ts/pond";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -63,6 +64,7 @@ interface Props {
   canEdit?: boolean;
   groupDevices?: Device[];
   removeGroupCallback?: Function;
+  addGroupCallback?: (group: pond.GroupSettings) => void
 }
 
 export default function GroupSettings(props: Props) {
@@ -77,6 +79,7 @@ export default function GroupSettings(props: Props) {
     canEdit,
     groupDevices,
     removeGroupCallback,
+    addGroupCallback,
   } = props;
   const prevInitialGroup = usePrevious(initialGroup);
   const [{as}] = useGlobalState();
@@ -96,15 +99,6 @@ export default function GroupSettings(props: Props) {
 
   const [groupDeviceNumbers, setGroupDeviceNumbers] = useState<number[]>([])
 
-  // Use a ref to store removeGroupCallback
-  const removeCallbackRef = React.useRef(removeGroupCallback);
-
-  // Update ref when prop changes
-  useEffect(() => {
-    console.log("Updating removeCallbackRef with:", removeGroupCallback);
-    removeCallbackRef.current = removeGroupCallback;
-  }, [removeGroupCallback]);
-
   useEffect(() => {
     let newNumbers: number[] = []
     groupDevices?.forEach(device => {
@@ -116,7 +110,7 @@ export default function GroupSettings(props: Props) {
   const loadDevices = useCallback(() => {
     setLoadingDevices(true);
     deviceAPI
-      .list(1000000, 0, "asc", undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,as)
+      .list(1000000, 0, "asc")
       .then((response: any) => {
         let rDevices: Device[] = response.data.devices
           ? response.data.devices.map((device: any) => Device.any(device))
@@ -154,10 +148,13 @@ export default function GroupSettings(props: Props) {
       case "add":
         groupAPI
           .addGroup(group.settings)
-          .then((_response: any) => {
+          .then((response: any) => {
             success(groupName + " was successfully created");
             close();
-            refreshCallback();
+            console.log(response)
+            group.settings.groupId = parseInt(response.data.id)
+            if (addGroupCallback) addGroupCallback(group.settings)
+            else refreshCallback();
           })
           .catch((err: any) => {
             err.response.data.error
@@ -482,14 +479,12 @@ export default function GroupSettings(props: Props) {
   };
 
   const dialogs = () => {
-    console.log("dialogs: removeCallbackRef.current =", removeCallbackRef.current); // Log ref
-    console.log("dialogs: removeGroupCallback =", removeGroupCallback); // Log prop
     return (
       <RemoveGroup
         group={group}
         isDialogOpen={isRemoveGroupOpen}
         closeDialogCallback={closeRemoveGroup}
-        removeCallback={removeCallbackRef.current}
+        removeCallback={removeGroupCallback}
       />
     );
   };

src/group/RemoveGroup.tsx

@@ -10,7 +10,6 @@ import {
 import { makeStyles } from "@mui/styles";
 import { useGroupAPI, useSnackbar } from "hooks";
 import { Group } from "models";
-import { useNavigate } from "react-router-dom";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -30,7 +29,7 @@ interface Props {
 
 export default function RemoveGroup(props: Props) {
   const classes = useStyles();
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
   const groupAPI = useGroupAPI();
   const { success, error, warning } = useSnackbar();
   const { group, isDialogOpen, closeDialogCallback, removeCallback } = props;
@@ -43,12 +42,9 @@ export default function RemoveGroup(props: Props) {
   const submit = () => {
     groupAPI
       .removeGroup(group.id())
-      .then((response: any) => {
+      .then((_response: any) => {
         success(groupName + " was successfully removed");
-        // navigate("/groups");
-        console.log(removeCallback)
         if (removeCallback) removeCallback()
-        // removeCallback()
       })
       .catch((err: any) => {
         err ? warning(err) : error("Error occured while removing " + groupName);

src/pages/Devices.tsx

@@ -141,7 +141,6 @@ export default function Devices() {
   };
 
   const removeGroupCallback = useCallback(() => {
-    console.log("Remove callback");
     let newGroups = [...groups];
     newGroups.splice(parseInt(tab), 1);
     setGroups(newGroups);
@@ -149,6 +148,16 @@ export default function Devices() {
     setGroupSettingsIsOpen(false);
   }, [groups, tab]); // Include dependencies
 
+  const addGroupCallback = useCallback((groupSettings: pond.GroupSettings) => {
+    let newGroups = [...groups];
+    let group = pond.Group.create({
+      settings: groupSettings
+    })
+    newGroups.push(Group.create(group))
+    setGroups(newGroups);
+    // setTab(groups.length.toString())
+  }, [groups, tab]); // Include dependencies
+
   const openGroupSettings = (
     group: Group | undefined,
     mode: "add" | "update" | "remove" | undefined
@@ -162,7 +171,6 @@ export default function Devices() {
     setGroupSettingsIsOpen(false);
     setGroupSettingsMode(undefined);
     setSelectedGroup(undefined);
-    console.log("close callback")
   };
   
   const getKeys = () => {
@@ -197,7 +205,9 @@ export default function Devices() {
       orderGroup, 
       orderGroupBy, 
       searchGroup,
-      undefined
+      undefined,
+      getKeys(),
+      getTypes(),
     ).then(resp => {
       let newGroups: Group[] = []
       resp.data.groups?.forEach((group: pond.Group) => {
@@ -210,7 +220,6 @@ export default function Devices() {
   }
 
   const loadDevices = () => {
-    console.log("load callback")
     setDevicesLoading(true)
     deviceAPI.list(
       limit, 
@@ -492,22 +501,24 @@ export default function Devices() {
         onRowClick={toDevice}
         setSearchText={setSearch}
         isLoading={devicesLoading}
-        actions={getGroup() && <GroupActions group={getGroup()} permissions={groupPermissions} devices={devices} refreshCallback={loadDevices}/>}
+        actions={getGroup() && <GroupActions removeCallback={removeGroupCallback} group={getGroup()} permissions={groupPermissions} devices={devices} refreshCallback={loadDevices}/>}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}
         refreshCallback={loadDevices}
         closeDialogCallback={closeProvisionDialog}
       />
+      {/* This GroupSettings is used for adding */}
       <GroupSettings
         initialGroup={selectedGroup}
         mode={groupSettingsMode}
         isDialogOpen={groupSettingsIsOpen}
         closeDialogCallback={closeGroupSettings}
-        refreshCallback={loadDevices}
+        refreshCallback={() => {}}
         canEdit={true}
         groupDevices={devices}
         removeGroupCallback={removeGroupCallback}
+        addGroupCallback={addGroupCallback}
       />
     </PageContainer>
   )

src/providers/pond/groupAPI.tsx

@@ -123,10 +123,14 @@ export default function GroupProvider(props: PropsWithChildren<Props>) {
   };
 
   const removeGroup = (id: number) => {
-    let url = pondURL("/groups/" + id)
+    const params = {
-    if (as) url = pondURL("/groups/" + id + "?as=" + as)
+      keys: getContextKeys(),
+      types: getContextTypes(),
+      as: getContextTypes().includes("team") ? undefined : as
+    }
+    pondURL(`/groups/${id}${buildQueryString(params)}`)
     return new Promise<AxiosResponse>((resolve, reject) => {
-      del(url).then(resp => {
+      del(pondURL(`/groups/${id}${buildQueryString(params)}`)).then(resp => {
         return resolve(resp)
       }).catch(err => {
         return reject(err)