Import / Export Talkgroups is working

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, useSaveGroupOrderMutation } from '../features/api/apiSlice'
+import { useGetSystemsQuery, useGetTalkgroupsQuery, useGetGroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useImportTalkgroupsMutation, useSaveGroupOrderMutation } from '../features/api/apiSlice'
 import {
   Button,
   Confirm,
@@ -33,6 +33,7 @@ const System = (props) => {
   const { data: errorsData, isSuccess: isErrorsSuccess } = useGetErrorsQuery(shortName);
   const [deleteGroupAPI, { isLoading: isDeleting }] = useDeleteGroupMutation();
   const [reorderGroupsAPI, { isLoading: isReordering }] = useSaveGroupOrderMutation();
+  const [importTalkgroupsAPI, { isLoading: isImporting}] = useImportTalkgroupsMutation();
   const [openSystemDeleteConfirm, setOpenSystemDeleteConfirm] = useState(false);
   const [openPermissionDeleteConfirm, setOpenPermissionDeleteConfirm] = useState(false);
   const [openMessage, setOpenMessage] = useState(false);
@@ -185,44 +186,14 @@ const System = (props) => {
     setGroupVisible((state) => !state)
   }
 
-
-
-  const handleExport = () => {
-    /* this.props.talkgroupActions
-       .exportTalkgroups(this.props.system.shortName)
-       .then(requestMessage => {
-         if (requestMessage) {
-           // report to the user is there was a problem during registration
-           this.setState({ requestMessage });
-         }
-       });*/
-  }
-
   const saveGroupOrder = async () => {
     await reorderGroupsAPI({shortName: shortName, order: {groupOrder: JSON.stringify(groupOrder)}});
-
-    /*const order = this.props.groups.map(x => x._id);
-    const data = {
-      groupOrder: JSON.stringify(order)
-    };
-    this.props.groupActions
-      .saveGroupOrder(this.props.system.shortName, data)
-      .then(requestMessage => {
-        if (requestMessage) {
-        }
-      });*/
   }
 
-
-  const handleUpload = (file) => {
-    /*this.props.talkgroupActions
-      .importTalkgroups(this.props.system.shortName, file)
-      .then(requestMessage => {
-        if (requestMessage) {
-          // report to the user is there was a problem during registration
-          this.setState({ requestMessage });
-        }
-      });*/
+  const handleUpload = async (file) => {
+    const formData = new FormData();
+    formData.append('file',file)
+    await importTalkgroupsAPI({shortName:shortName, file:formData});
   }
 
 

admin/src/features/api/apiSlice.js

@@ -85,6 +85,27 @@ export const apiSlice = createApi({
 
       //invalidatesTags: (result, error, group) => ['Group'],
     }),
+    importTalkgroups: builder.mutation({
+      query: ({shortName,file}) => ({
+        url: `${process.env.REACT_APP_ADMIN_SERVER}/talkgroups/${shortName}/import`,
+        method: 'POST',
+        credentials: "include",
+        body: file,
+      }),
+      
+      async onQueryStarted({shortName,file}, { dispatch, queryFulfilled }) {
+        try {
+          const { data: newTalkgroups } = await queryFulfilled;
+          const patchResult = dispatch(
+            apiSlice.util.updateQueryData('getTalkgroups', shortName, (talkgroups) => {
+              talkgroups.length = 0; // Clear your array
+              talkgroups.push(...newTalkgroups);
+            })
+          )
+        } catch { }
+      },
+      //invalidatesTags: (result, error, group) => ['Group'],
+    }),
     getSystems: builder.query({
       // The URL for the request is '/fakeApi/posts'
       query: () => ({ url: `/systems`, credentials: "include" })
@@ -94,4 +115,4 @@ export const apiSlice = createApi({
 })
 
 // Export the auto-generated hook for the `getPosts` query endpoint
-export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useSaveGroupOrderMutation, useUpdateGroupMutation } = apiSlice
+export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice