move apiHost to redux store

ui/src/api/CWaterPumpAPI.js

@@ -1,8 +1,18 @@
 import axios from 'axios';
 
+// helper function to preprocess the API host
+function preprocessApiHost(apiHost) {
+  let url = apiHost;
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    url = 'http://' + url;
+  }
+  if (!url.endsWith('/')) url += '/';
+  return url;
+}
+
 class CWaterPumpAPI {
   constructor({ client=null, URL }) {
-    this._client = client || axios.create({ baseURL: URL });
+    this._client = client || axios.create({ baseURL: preprocessApiHost(URL) });
   }
 
   async start(runTimeMs) {

ui/src/components/APIAddressField.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import { Row, Col, Form } from 'react-bootstrap';
-import { useWaterPumpAPI } from '../contexts/WaterPumpAPIContext';
-
-function APIAddressField() {
-  const waterPumpCtx = useWaterPumpAPI();
+import { connect } from 'react-redux';
+import { updateAPIHost } from '../store/slices/UI';
 
+export function APIAddressFieldComponent({ apiHost, onChange }) {
   const handleApiAddressChange = (event) => {
-    const apiAddress = event.target.value;
-    waterPumpCtx.bindApiHost(apiAddress);
+    onChange(event.target.value);
   };
 
   return (
@@ -16,10 +14,20 @@ function APIAddressField() {
         API Address:
       </Form.Label>
       <Col sm="10">
-        <Form.Control type="text" value={waterPumpCtx.apiHost} onChange={handleApiAddressChange} />
+        <Form.Control
+          type="text" placeholder="Enter API Address"
+          value={apiHost}
+          onChange={handleApiAddressChange}
+        />
       </Col>
     </Form.Group>
   );
 }
 
-export default APIAddressField;
+export default connect(
+  (state) => ({
+    apiHost: state.UI.apiHost
+  }), {
+    onChange: updateAPIHost
+  }
+)(APIAddressFieldComponent);

ui/src/contexts/WaterPumpAPIContext.js

@@ -1,47 +1,24 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { CWaterPumpAPI } from '../api/CWaterPumpAPI.js';
 
-const STORE_API = 'apiAddress';
 const WaterPumpAPIContext = React.createContext();
 
 export function useWaterPumpAPI() {
   return React.useContext(WaterPumpAPIContext);
 }
 
-function preprocessApiHost(apiHost) {
-  let url = apiHost;
-  if (!url.startsWith('http://') && !url.startsWith('https://')) {
-    url = 'http://' + url;
-  }
-  if (!url.endsWith('/')) url += '/';
-  return url;
-}
-
 export function WaterPumpAPIProvider({ children }) {
-  const [apiHost, setApiHost] = React.useState('');
-  React.useEffect(() => {
-    const storedApiHost = localStorage.getItem(STORE_API);
-    if (storedApiHost) setApiHost(storedApiHost);
-  }, []); // on mount only
-
-  const apiObject = React.useMemo(() => {
-      if (!apiHost) return null; // not ready yet
-
-      const url = preprocessApiHost(apiHost);
-      localStorage.setItem(STORE_API, url);
-      return new CWaterPumpAPI({ URL: url });
-    }, [apiHost]
+  const apiHost = useSelector((state) => state.UI.apiHost);
+  const apiObject = React.useMemo(
+    () => new CWaterPumpAPI({ URL: apiHost }),
+    [apiHost]
   );
 
-  const value = {
-    API: apiObject,
-    apiHost: apiHost,
-    bindApiHost: setApiHost,
-  };
-
+  const value = { API: apiObject, };
   return (
     <WaterPumpAPIContext.Provider value={value}>
       {children}
     </WaterPumpAPIContext.Provider>
   );
-}
+}

ui/src/store/slices/UI.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const INITIAL_STATE = {
   pouringTime: 1000,
+  apiHost: '',
 };
 // slice for system status
 export const UISlice = createSlice({
@@ -10,9 +11,12 @@ export const UISlice = createSlice({
   reducers: {
     updatePouringTime(state, action) {
       state.pouringTime = action.payload;
-    }
+    },
+    updateAPIHost(state, action) {
+      state.apiHost = action.payload;
+    },
   },
 });
 
 export const actions = UISlice.actions;
-export const { updatePouringTime } = actions;
+export const { updatePouringTime, updateAPIHost } = actions;