Implement account setting modification and saving feature

src/components/AccountDefaultSetting.tsx

@@ -4,22 +4,24 @@ import { Link } from "react-router-dom";
 interface Props {
   settingField: string;
   settingValue: string;
-  settingsChangedHook: object;
+  changedSettingsHook: object;
 }
 
-function handleSettingFieldChange(eventData, setFunction, settingsChangedHook, initialValue) {
+function handleSettingFieldChange(eventData, setFunction, changedSettingsHook, initialValue, settingField) {
   setFunction(eventData.target.value);
   if (eventData.target.value === initialValue) {
-     settingsChangedHook.setsettingsChanged(false); 
+     let removeSettingObject = changedSettingsHook.changedSettings
+     delete removeSettingObject[settingField];
+     changedSettingsHook.setChangedSettings(() => ({...removeSettingObject})); 
   } else {
-     settingsChangedHook.setsettingsChanged(true); 
+     changedSettingsHook.setChangedSettings(() => ({...changedSettingsHook.changedSettings, [settingField]: eventData.target.value}));
   }
 }
 
 export default function AccountDefaultSetting({
   settingField,
   settingValue,
-  settingsChangedHook,
+  changedSettingsHook,
 }: Props) {
   const initialValue = settingValue;
   const [fieldValue, setFieldValue] = React.useState(settingValue);
@@ -32,7 +34,7 @@ export default function AccountDefaultSetting({
 	name={settingField}
         value={fieldValue}
         onChange={(eventData) =>
-          handleSettingFieldChange(eventData, setFieldValue, settingsChangedHook, initialValue)
+          handleSettingFieldChange(eventData, setFieldValue, changedSettingsHook, initialValue, settingField)
         }
       ></input>
     </>

src/components/SettingSaveButton.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export default function SettingSaveButton() {
+  function onSettingButtonClicked() {
+    currentSettingHook.setCurrentSetting(settingName);
+  }
+
+  return (
+    <>
+      <button onClick={onSettingButtonClicked}>{settingName}</button>
+    </>
+  );
+}

src/pages/Settings.tsx

@@ -10,10 +10,10 @@ interface Props {
   authTokenStorageHandler: object;
 }
 
-function renderCurrentSetting(setting: string, settingsChangedHook: object) {
+function renderCurrentSetting(setting: string, changedSettingsHook: object) {
   switch (setting) {
     case "Account":
-      return <AccountSetting settingsChangedHook={settingsChangedHook}></AccountSetting>;
+      return <AccountSetting changedSettingsHook={changedSettingsHook}></AccountSetting>;
     case "Security":
       return <SecuritySetting></SecuritySetting>;
     default:
@@ -24,17 +24,18 @@ function renderCurrentSetting(setting: string, settingsChangedHook: object) {
 export default function Home({ authTokenStorageHandler }: Props) {
   const settings = ["Account", "Security"];
   const [currentSetting, setCurrentSetting] = React.useState(settings[0]);
-  const [settingsChanged, setsettingsChanged] = React.useState(false);
+  const [changedSettings, setChangedSettings] = React.useState({});
   /* Make objects to pass by reference */
   const currentSettingHook = {
     currentSetting,
     setCurrentSetting,
   };
-  const settingsChangedHook = {
-    settingsChanged,
-    setsettingsChanged,
+  const changedSettingsHook = {
+    changedSettings,
+    setChangedSettings,
   };
 
+
   if (!authTokenStorageHandler.authTokenValue) {
     return <Navigate to="/home"></Navigate>;
   }
@@ -42,27 +43,23 @@ export default function Home({ authTokenStorageHandler }: Props) {
   function onSettingsSave(formEvent) {
     formEvent.preventDefault();
 
-    const formData = new FormData(formEvent.target);
-    const formDataObject = Object.fromEntries(formData);
 
-    console.log(JSON.stringify(formDataObject));
-
-    fetch("http://127.0.0.1:8000/api/debug", {
-      method: "GET",
+      for (let [key, value] of Object.entries(changedSettings)) {
+          fetch("http://127.0.0.1:8000/api/user/settings/change/" + key, {
+            method: "PUT",
             headers: {
             	"Content-Type": "application/json",
             },
-      body: JSON.stringify(formDataObject),
+	    body: JSON.stringify({
+          	"authToken": authTokenStorageHandler.authTokenValue,
+		"newValue": value,
+	    }),
           })
             .then((response) => response.json())
             .then((responseParsed: Object) => {
               console.log(responseParsed);
-        if (responseParsed.success) {
-          authTokenStorageHandler.setAuthTokenValue(responseParsed.authToken);
-        } else {
-          console.log("Login failure!");
-        }
             });
+      };
   }
 
   return (
@@ -85,9 +82,11 @@ export default function Home({ authTokenStorageHandler }: Props) {
             <hr></hr>
 	      <form className="currentSettingBox" onSubmit={onSettingsSave}>
                  <div className="currentSetting">
-	            {renderCurrentSetting(currentSetting, settingsChangedHook)}
+	            {renderCurrentSetting(currentSetting, changedSettingsHook)}
                  </div>
-	         {settingsChangedHook.settingsChanged ? ( <button type="submit">Save</button> ) : null }
+	         {Object.keys(changedSettings).length > 0 ? ( <button type="submit">Save</button> ) : null }
+		 <p>{JSON.stringify(changedSettings)}</p>
+		 <p>{Object.keys(changedSettings).length}</p>
 	      </form>
           </div>
         </TilingItem>

src/pages/settings/Account.tsx

@@ -3,10 +3,10 @@ import { authTokenStorageHandlerInit } from "../../components/storageHandler.ts"
 import AccountDefaultSetting from "../../components/AccountDefaultSetting.tsx";
 
 interface Props {
-  settingsChangedHook: object;
+  changedSettingsHook: object;
 }
 
-function RenderSettingField(settingField: str, settingValue: str, settingsChangedHook: object) {
+function RenderSettingField(settingField: str, settingValue: str, changedSettingsHook: object) {
   switch (settingField) {
     default:
       return (
@@ -14,13 +14,13 @@ function RenderSettingField(settingField: str, settingValue: str, settingsChange
           key={settingField + "Main"}
           settingField={settingField}
           settingValue={settingValue}
-	  settingsChangedHook={settingsChangedHook}
+	  changedSettingsHook={changedSettingsHook}
         ></AccountDefaultSetting>
       );
   }
 }
 
-export default function AccountSetting({ settingsChangedHook }: Props) {
+export default function AccountSetting({ changedSettingsHook }: Props) {
   const [accountSettings, setAccountSettings] = React.useState({});
   const authTokenStorageHandler = authTokenStorageHandlerInit();
 
@@ -49,7 +49,7 @@ export default function AccountSetting({ settingsChangedHook }: Props) {
       <h1>Account</h1>
       <hr></hr>
       {Object.entries(accountSettings).map((item, key) =>
-        RenderSettingField(item[0], item[1], settingsChangedHook),
+        RenderSettingField(item[0], item[1], changedSettingsHook),
       )}
     </>
   );