From 77b41dc1e854f24d35673b1a5258d08bd2c15acd Mon Sep 17 00:00:00 2001
From: Martin O <martin.oosthuizen@jembi.org>
Date: Tue, 9 Jul 2024 12:10:04 +0000
Subject: [PATCH 1/2] Added a save util function to ApiClient

---
 JeMPI_Apps/JeMPI_UI/src/services/ApiClient.ts | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/JeMPI_Apps/JeMPI_UI/src/services/ApiClient.ts b/JeMPI_Apps/JeMPI_UI/src/services/ApiClient.ts
index 709f02945..128f2e438 100644
--- a/JeMPI_Apps/JeMPI_UI/src/services/ApiClient.ts
+++ b/JeMPI_Apps/JeMPI_UI/src/services/ApiClient.ts
@@ -93,6 +93,30 @@ export class ApiClient {
     return data
   }
 
+  async saveConfiguration() {
+    const configuration = localStorage.getItem('configuration');
+    let payload = configuration;
+    if (!payload) return; // Avoid overwriting the configuration with nothing
+    if (typeof payload == 'string') payload = JSON.parse(payload); // Avoid overwriting the configuration with garbage
+    
+    try {
+      const { data } = await this.client.post<Configuration>(
+        ROUTES.POST_CONFIGURATION,
+        payload
+      )
+      return {
+        response: "ok",
+        data
+      }
+    } catch (error) {
+      console.error('Error saving configuration:', error)
+      return {
+        response: "error",
+        error
+      }
+    }
+  }
+
   async fetchMatches(
     limit: number,
     offset: number,

From 6d5e3e84094bd1255981a53331e254b450fcdd8a Mon Sep 17 00:00:00 2001
From: Martin O <martin.oosthuizen@jembi.org>
Date: Tue, 9 Jul 2024 12:10:49 +0000
Subject: [PATCH 2/2] Save button with basic state and API call

---
 .../JeMPI_UI/src/pages/settings/Settings.tsx  | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx
index a0f4d1e27..5f77d8443 100644
--- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx
+++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Grid, Tab, Tabs, Typography } from '@mui/material';
+import { Grid, Tab, Tabs, Typography, Button } from '@mui/material';
 import { Box } from '@mui/system';
 import { SyntheticEvent } from 'react';
 import CommonSettings from './common/Common';
@@ -12,6 +12,7 @@ import InteractiveNode from './interactiveNode/InteractiveNode';
 import { CustomTabPanel, a11yProps } from './deterministic/BasicTabs';
 import { Configuration } from 'types/Configuration';
 import { generateId } from 'utils/helpers';
+import { useConfig } from 'hooks/useConfig';
 
 const Settings = () => {
   const [value, setValue] = useState(0);
@@ -19,11 +20,26 @@ const Settings = () => {
     const storedData = localStorage.getItem('configuration');
     return storedData ? generateId(JSON.parse(storedData)) : ({} as Configuration);
   });
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+
+  const { apiClient } = useConfig();
 
   const handleChange = (event: SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 
+  const handleSave = async () => {
+    setIsSaving(true);
+    const response = await apiClient.saveConfiguration();
+    setIsSaving(false);
+    if (response && response.response === 'ok') {
+      console.log('handleSave result', response.data);
+    }
+    if (response && response.response === 'error') {
+      console.log('handleSave error', response.data);
+    }
+  };
+
   useEffect(() => {
     const handleStorageChange = (event: StorageEvent) => {
       if (event.key === 'configuration') {
@@ -128,6 +144,23 @@ const Settings = () => {
               Probabilistic
             </Typography>
           </CustomTabPanel>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', my: 2 }}>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              {/* <Button variant="outlined" color="secondary">Edit</Button>
+              <Button variant="outlined" color="secondary">Clear</Button>
+              <Button variant="outlined" color="secondary">Set to Reference</Button> */}
+            </Box>
+            <Box>
+              <Button 
+                variant="contained" 
+                color="primary" 
+                onClick={handleSave} 
+                disabled={isSaving}
+              >
+                {isSaving ? 'Saving...' : 'Save'}
+              </Button>
+            </Box>
+          </Box>
         </Box>
       </Grid>
     </Grid>