convert handlers to redux actions. They should update the system status.

ui/src/components/SystemControls.js

@@ -4,25 +4,25 @@ import { Button } from 'react-bootstrap';
 
 import { useWaterPumpAPI } from '../contexts/WaterPumpAPIContext';
 import { useNotificationsSystem } from '../contexts/NotificationsContext.js';
+import { startPump, stopPump } from '../store/slices/SystemStatus.js';
 
-// TODO: convert handlers to redux actions. They should update the system status.
-export function SystemControlsComponent({ pouringTime, systemStatus }) {
-  const waterPump = useWaterPumpAPI().API;
+export function SystemControlsComponent({
+  pouringTime, systemStatus, startPump, stopPump
+}) {
+  const api = useWaterPumpAPI().API;
   const NotificationsSystem = useNotificationsSystem();
 
   const handleStart = async () => {
     try {
-      await waterPump.start(pouringTime);
-      NotificationsSystem.alert('Water pump started successfully!');
+      await startPump({ api , pouringTime });
     } catch (error) {
       NotificationsSystem.alert('Error starting water pump: ' + error.message);
     }
   };
 
   const handleStop = async () => {
     try {
-      await waterPump.stop();
-      NotificationsSystem.alert('Water pump stopped successfully!');
+      await stopPump({ api });
     } catch (error) {
       NotificationsSystem.alert('Error stopping water pump: ' + error.message);
     }
@@ -45,5 +45,5 @@ export default connect(
   state => ({
     pouringTime: state.UI.pouringTime,
     systemStatus: state.systemStatus,
-  }), []
+  }), { startPump, stopPump }
 )(SystemControlsComponent);

ui/src/store/slices/SystemStatus.js

@@ -1,4 +1,4 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
 function preprocessSystemStatus(systemStatus) {
   if(null == systemStatus) return null;
@@ -15,15 +15,44 @@ function preprocessSystemStatus(systemStatus) {
   return systemStatus;
 }
 
+// Async thunks
+export const startPump = createAsyncThunk(
+  'systemStatus/startPump',
+  async ({ api, pouringTime }, { dispatch }) => {
+    console.log('startPump: pouringTime = ' + pouringTime);
+    const response = await api.start(pouringTime);
+    return response;
+  }
+);
+
+export const stopPump = createAsyncThunk(
+  'systemStatus/stopPump',
+  async ({ api }, { dispatch }) => {
+    console.log('stopPump');
+    const response = await api.stop();
+    return response;
+  }
+);
+
 // slice for system status
+const bindStatus = (state, action) => {
+  return preprocessSystemStatus(action.payload);
+};
+
 export const SystemStatusSlice = createSlice({
   name: 'systemStatus',
   initialState: null,
   reducers: {
-    updateSystemStatus(state, action) {
-      return preprocessSystemStatus(action.payload);
-    },
+    updateSystemStatus: bindStatus,
   },
+  extraReducers: (builder) => {
+    // update system status on start/stop pump
+    builder.addCase(startPump.fulfilled, bindStatus);
+    builder.addCase(stopPump.fulfilled, bindStatus);
+    // on error, do not update system status
+    builder.addCase(startPump.rejected, (state, action) => state);
+    builder.addCase(stopPump.rejected, (state, action) => state);
+  }
 });
 
 export const actions = SystemStatusSlice.actions;