Updating systems too!

admin/src/App/App.js

@@ -7,7 +7,7 @@ import Restricted from "./Restricted"
 import About from "../Components/About"
 import System from "../System/System"
 import ListSystems from "../System/ListSystems"
-import UpdateSystemContainer from "../System/UpdateSystemContainer"
+import UpdateSystem from "../System/UpdateSystem"
 import CreateSystem from "../System/CreateSystem"
 
 
@@ -19,7 +19,7 @@ const App = (params) => {
 				<Routes>
 					<Route path="/about"  element={ <Restricted><About/></Restricted>} />
 					<Route path="/system/:shortName" element={ <Restricted><System/></Restricted>} />
-					<Route path="/update-system/:shortName" component={Restricted(UpdateSystemContainer, store)} />
+					<Route path="/update-system/:shortName" element={ <Restricted><UpdateSystem/></Restricted>} />
 					<Route path="/create-system" element={ <Restricted><CreateSystem/></Restricted>}  />
 					<Route path="/list-systems" element={ <Restricted><ListSystems/></Restricted>}  />
 					<Route path="/" element={ <Restricted><ListSystems/></Restricted>} />

admin/src/System/CreateSystem.js

@@ -39,8 +39,6 @@ const CreateSystem = (props) => {
         console.log(message);
         setRequestMessage(message);
       }
-
-
   }
 
     return (

admin/src/System/UpdateSystem.js

@@ -1,47 +1,47 @@
-import React, { Component }  from "react"
+import React, { useEffect, useLayoutEffect, useState, useRef, useCallback, useMemo } from "react";
 import SystemForm from "./SystemForm";
 import {
   Container,
   Header
 } from "semantic-ui-react";
+import { useUpdateSystemMutation, useGetSystemsQuery, } from '../features/api/apiSlice'
+import { useSelector, useDispatch } from 'react-redux'
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
-class UpdateSystem extends Component {
-  constructor(props) {
-    super(props);
-    this.handleSystemSubmit = this.handleSystemSubmit.bind(this);
+const UpdateSystem = (props) => {
+
+  const { screenName } = useSelector((state) => state.user);
+  const { shortName } = useParams();
+  const { data: systemsData, isSuccess: isSystemsSuccess } = useGetSystemsQuery();
+  const [updateSystem, { error }] = useUpdateSystemMutation();
+  const [requestMessage, setRequestMessage] = useState("");
+
+  const navigate = useNavigate();
+  let system = false;
+  if (isSystemsSuccess) {
+    system = systemsData.systems.find(sys => sys.shortName == shortName);
   }
 
-  state = {
-    requestMessage: ""
+
+  const handleSystemSubmit = async (system) => {
+    try {
+      const originalPromiseResult = await updateSystem(system).unwrap();
+      navigate("/system/" + shortName)
+    } catch (error) {
+      const message = error.data.message;
+      console.log(message);
+      setRequestMessage(message);
+    }
   }
 
-  componentDidMount() {
-     this.props.fetchSystems()
-   }
 
-  handleSystemSubmit(system) {
-    this.props
-      .updateSystem(system)
-      .then(requestMessage => {
-        if (requestMessage) {
-          // report to the user is there was a problem during registration
-          this.setState({
-            requestMessage
-          });
-        } else {
-            this.props.changeUrl("/system/"+system.shortName)
-        }
-      });
-  }
+  return (
+    <Container text>
+      <Header as="h1">Update System</Header>
+      <SystemForm onSubmit={handleSystemSubmit} system={system} isEditing={true} requestMessage={requestMessage} screenName={screenName} />
+    </Container>
+  )
 
-	render() {
-		return(
-			<Container text>
-        <Header as="h1">Update System</Header>
-      <SystemForm onSubmit={this.handleSystemSubmit} system={this.props.system} isEditing={true} requestMessage={this.state.requestMessage} screenName={this.props.user.screenName}/>
-			</Container>
-		)
-	}
 }
 
 export default UpdateSystem

admin/src/features/api/apiSlice.js

@@ -145,9 +145,27 @@ export const apiSlice = createApi({
         } catch {}
       },
     }),
-
+    updateSystem: builder.mutation({
+      query: (system) => ({
+        url: `/systems/${system.shortName}`,
+        method: 'POST',
+        credentials: "include",
+        body: system,
+      }),
+      async onQueryStarted(system, { dispatch, queryFulfilled }) {
+        try {
+          const { data: updatedSystem } = await queryFulfilled
+          const patchResult = dispatch(
+            apiSlice.util.updateQueryData('getSystems', system.shortName, (systems) => {
+              const systemIndex = systems.findIndex((obj => obj.shortName == updatedSystem.shortName));
+              systems[systemIndex] = updatedSystem;
+            })
+          )
+        } catch {}
+      },
+    }),
   })
 })
 
 // Export the auto-generated hook for the `getPosts` query endpoint
-export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useCreateSystemMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice
+export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useCreateSystemMutation, useUpdateSystemMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice