Probably should normalize the System query

admin/src/Group/ListGroups.js

@@ -26,8 +26,15 @@ const ListGroups = (props) => {
 //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
 
     const groups = props.groups;
+    let groupsDisplay = [];
     if (groups) {
-      let groupsDisplay = props.order.map( id => props.groups.find( group => group._id == id ));
+      // if a group gets deleted, it will still be listed in the Order array for a little.
+      for (const id of props.order) {
+        const group = props.groups.find( group => group._id == id );
+        if (group) {
+          groupsDisplay.push(group)
+        }
+      }
     return (
 
       <Table >
@@ -40,6 +47,7 @@ const ListGroups = (props) => {
   </Table.Header>
   <Table.Body>
     {groupsDisplay.map((group, i) => (
+      
       <Table.Row key={ "Group-" + i}>
         <Table.Cell>{group.groupName}</Table.Cell>
         <Table.Cell>{group.talkgroups.length}</Table.Cell>
@@ -65,7 +73,9 @@ const ListGroups = (props) => {
         />
         </Table.Cell>
       </Table.Row>
-    ))}
+      
+    )
+    )}
   </Table.Body>
 </Table>
 

admin/src/System/System.js

@@ -8,7 +8,7 @@ import UpdatePermissionModal from "../Permission/UpdatePermissionModalContainer.
 import AddPermissionModal from "../Permission/AddPermissionModalContainer.js";
 import ErrorChart from "./ResponsiveErrorChart"
 import CallChart from "./ResponsiveCallChart"
-import { useGetSystemsQuery, useGetTalkgroupsQuery, useGetGroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useImportTalkgroupsMutation, useSaveGroupOrderMutation } from '../features/api/apiSlice'
+import { useGetSystemsQuery, useGetTalkgroupsQuery, useGetGroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useDeleteSystemMutation, useImportTalkgroupsMutation, useSaveGroupOrderMutation } from '../features/api/apiSlice'
 import {
   Button,
   Confirm,
@@ -27,13 +27,15 @@ import {
 
 const System = (props) => {
   const { shortName } = useParams();
+  const navigate = useNavigate();
   const { data: systemsData, isSuccess: isSystemsSuccess } = useGetSystemsQuery();
   const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
   const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName);
   const { data: errorsData, isSuccess: isErrorsSuccess } = useGetErrorsQuery(shortName);
   const [deleteGroupAPI, { isLoading: isDeleting }] = useDeleteGroupMutation();
   const [reorderGroupsAPI, { isLoading: isReordering }] = useSaveGroupOrderMutation();
-  const [importTalkgroupsAPI, { isLoading: isImporting}] = useImportTalkgroupsMutation();
+  const [importTalkgroupsAPI, { isLoading: isImporting }] = useImportTalkgroupsMutation();
+  const [deleteSystemAPI ] = useDeleteSystemMutation();
   const [openSystemDeleteConfirm, setOpenSystemDeleteConfirm] = useState(false);
   const [openPermissionDeleteConfirm, setOpenPermissionDeleteConfirm] = useState(false);
   const [openMessage, setOpenMessage] = useState(false);
@@ -98,32 +100,34 @@ const System = (props) => {
     var minValue = 0;
     var maxValue = 0;
     var MS_PER_MINUTE = 60000;
-    for (var j = 0; j < statistic.callTotals.length; j++) {
-      var spotsBack = statistic.callTotals.length - j;
-      var time = new Date(now - spotsBack * 15 * MS_PER_MINUTE);
-      if (time < minDate) minDate = time;
-      if (statistic.callTotals[j] > maxValue)
-        maxValue = statistic.callTotals[j];
-      callTotals.push({ y: statistic.callTotals[j], x: time });
-    }
-    for (var j = 0; j < statistic.errorTotals.length; j++) {
-      var spotsBack = statistic.errorTotals.length - j;
-      var time = new Date(now - spotsBack * 15 * MS_PER_MINUTE);
-      if (time < minDate) minDate = time;
-      if (statistic.errorTotals[j] > maxValue)
-        maxValue = statistic.errorTotals[j];
-      errorTotals.push({ x: time, y: statistic.errorTotals[j] });
-    }
-    const callData = {
-      minDate: minDate,
-      maxDate: maxDate,
-      minValue: minValue,
-      maxValue: maxValue,
-      callTotals: callTotals,
-      errorTotals: errorTotals
-    };
+    if (statistic) {
+      for (var j = 0; j < statistic.callTotals.length; j++) {
+        var spotsBack = statistic.callTotals.length - j;
+        var time = new Date(now - spotsBack * 15 * MS_PER_MINUTE);
+        if (time < minDate) minDate = time;
+        if (statistic.callTotals[j] > maxValue)
+          maxValue = statistic.callTotals[j];
+        callTotals.push({ y: statistic.callTotals[j], x: time });
+      }
+      for (var j = 0; j < statistic.errorTotals.length; j++) {
+        var spotsBack = statistic.errorTotals.length - j;
+        var time = new Date(now - spotsBack * 15 * MS_PER_MINUTE);
+        if (time < minDate) minDate = time;
+        if (statistic.errorTotals[j] > maxValue)
+          maxValue = statistic.errorTotals[j];
+        errorTotals.push({ x: time, y: statistic.errorTotals[j] });
+      }
+      const callData = {
+        minDate: minDate,
+        maxDate: maxDate,
+        minValue: minValue,
+        maxValue: maxValue,
+        callTotals: callTotals,
+        errorTotals: errorTotals
+      };
 
-    setCallData(callData);
+      setCallData(callData);
+    }
   }
 
 
@@ -167,7 +171,7 @@ const System = (props) => {
     }
   }
 
-  const reorderGroup =  (oldIndex, newIndex) => {
+  const reorderGroup = (oldIndex, newIndex) => {
     if ((newIndex < 0) || (newIndex > (groupOrder.length - 1))) {
       return
     }
@@ -187,28 +191,28 @@ const System = (props) => {
   }
 
   const saveGroupOrder = async () => {
-    await reorderGroupsAPI({shortName: shortName, order: {groupOrder: JSON.stringify(groupOrder)}});
+    await reorderGroupsAPI({ shortName: shortName, order: { groupOrder: JSON.stringify(groupOrder) } });
   }
 
   const handleUpload = async (file) => {
     const formData = new FormData();
-    formData.append('file',file)
-    await importTalkgroupsAPI({shortName:shortName, file:formData});
+    formData.append('file', file)
+    await importTalkgroupsAPI({ shortName: shortName, file: formData });
   }
 
 
 
-  const handleSystemDeleteConfirm = () => {
+  const handleSystemDeleteConfirm = async () => {
     setOpenSystemDeleteConfirm(false);
-    /*
-    this.props.systemActions
-      .deleteSystem(this.props.system.shortName)
-      .then(requestMessage => {
-        if (requestMessage) {
-          // report to the user is there was a problem during login
-          this.setState({ requestMessage: requestMessage, openMessage: true });
-        }
-      });*/
+    try {
+      const originalPromiseResult = await deleteSystemAPI(shortName).unwrap();
+      navigate("/list-systems")
+    } catch (error) {
+      const message = error.data.message;
+      console.log(message);
+      setRequestMessage(message);
+    }
+
   };
   const handleSystemDeleteCancel = () => setOpenSystemDeleteConfirm(false);
 
@@ -218,7 +222,7 @@ const System = (props) => {
     system = systemsData.systems.find(sys => sys.shortName == shortName);
   }
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (groupsData) {
       let newOrder = [];
       groupsData.forEach(group => {

admin/src/features/api/apiSlice.js

@@ -90,7 +90,17 @@ export const apiSlice = createApi({
         credentials: "include"
       }),
 
-      invalidatesTags: (result, error, group) => [{ type: 'Group', id: group._id }],
+      async onQueryStarted(group, { dispatch, queryFulfilled }) {
+        try {
+          await queryFulfilled
+          const patchResult = dispatch(
+            apiSlice.util.updateQueryData('getGroups', group.shortName, (groups) => {
+              const groupIndex = groups.findIndex((obj => obj.groupId == group.groupId));
+              groups.splice(groupIndex,1);
+            })
+          )
+        } catch { }
+      },
     }),
     saveGroupOrder: builder.mutation({
       query: ({shortName, order}) => ({
@@ -138,7 +148,8 @@ export const apiSlice = createApi({
         try {
           const { data: newSystem } = await queryFulfilled
           const patchResult = dispatch(
-            apiSlice.util.updateQueryData('getSystems', system.shortName, (systems) => {
+            apiSlice.util.updateQueryData('getSystems', undefined, (systemsData) => {
+              const systems = systemsData.systems;
               systems.push(newSystem);
             })
           )
@@ -156,7 +167,8 @@ export const apiSlice = createApi({
         try {
           const { data: updatedSystem } = await queryFulfilled
           const patchResult = dispatch(
-            apiSlice.util.updateQueryData('getSystems', system.shortName, (systems) => {
+            apiSlice.util.updateQueryData('getSystems', undefined, (systemsData) => {
+              const systems = systemsData.systems;
               const systemIndex = systems.findIndex((obj => obj.shortName == updatedSystem.shortName));
               systems[systemIndex] = updatedSystem;
             })
@@ -164,8 +176,27 @@ export const apiSlice = createApi({
         } catch {}
       },
     }),
+    deleteSystem: builder.mutation({
+      query: (shortName) => ({
+        url: `/systems/${shortName}`,
+        method: 'DELETE',
+        credentials: "include"
+      }),
+      async onQueryStarted(shortName, { dispatch, queryFulfilled }) {
+        try {
+          await queryFulfilled
+          const patchResult = dispatch(
+            apiSlice.util.updateQueryData('getSystems', undefined, (systemsData) => {
+              const systems = systemsData.systems;
+              const systemIndex = systems.findIndex((obj => obj.shortName == shortName));
+              systems.splice(systemIndex, 1);
+            })
+          )
+        } catch {}
+      },
+    }),
   })
 })
 
 // Export the auto-generated hook for the `getPosts` query endpoint
-export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useCreateSystemMutation, useUpdateSystemMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice
+export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useCreateSystemMutation, useUpdateSystemMutation, useDeleteSystemMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice

admin/src/redux-router/configureStore.js

@@ -7,14 +7,16 @@ import { createRouterMiddleware } from '@lagunovsky/redux-react-router'
 import createRootReducer from './reducers'
 import thunk from 'redux-thunk';
 import { apiSlice } from '../features/api/apiSlice'
+import { composeWithDevTools } from 'redux-devtools-extension'
 
+//const composedEnhancers = composeWithDevTools(...enhancers)
 export const history = createBrowserHistory()
 
 export default function configureStore(preloadedState) {
   const store = createStore(
     createRootReducer(history), // root reducer with router state
     preloadedState,
-    compose(
+    composeWithDevTools(
       applyMiddleware(
         createRouterMiddleware(history), // for dispatching history actions
         thunk,