Implement basic settings save button

src/App.tsx

@@ -114,7 +114,6 @@ export default function App() {
               element={
                 <Register
                   authTokenStorageHandler={authTokenStorageHandler}
-                  usernameStorageHandler={usernameStorageHandler}
                 ></Register>
               }
             />

src/components/AccountDefaultSetting.tsx

@@ -4,16 +4,24 @@ import { Link } from "react-router-dom";
 interface Props {
   settingField: string;
   settingValue: string;
+  settingsChangedHook: object;
 }
 
-function handleSettingFieldChange(eventData, setFunction) {
+function handleSettingFieldChange(eventData, setFunction, settingsChangedHook, initialValue) {
   setFunction(eventData.target.value);
+  if (eventData.target.value === initialValue) {
+     settingsChangedHook.setsettingsChanged(false); 
+  } else {
+     settingsChangedHook.setsettingsChanged(true); 
+  }
 }
 
 export default function AccountDefaultSetting({
   settingField,
   settingValue,
+  settingsChangedHook,
 }: Props) {
+  const initialValue = settingValue;
   const [fieldValue, setFieldValue] = React.useState(settingValue);
   return (
     <>
@@ -23,7 +31,7 @@ export default function AccountDefaultSetting({
         key={settingField + "Body"}
         value={fieldValue}
         onChange={(eventData) =>
-          handleSettingFieldChange(eventData, setFieldValue)
+          handleSettingFieldChange(eventData, setFieldValue, settingsChangedHook, initialValue)
         }
       ></input>
     </>

src/index.css

@@ -161,8 +161,16 @@ a {
   text-align: left;
 }
 
+.currentSettingBox {
+  display: flex;
+  flex-direction: column;
+}
+
 .currentSetting {
+  max-height: 100%;
+  max-width: 100%;
   padding-left: var(--tiling-box-padding);
+  flex-grow: 1;
 }
 
 .blogEntryGrid {

src/pages/Settings.tsx

@@ -10,10 +10,10 @@ interface Props {
   authTokenStorageHandler: object;
 }
 
-function renderCurrentSetting(setting: string) {
+function renderCurrentSetting(setting: string, settingsChangedHook: object) {
   switch (setting) {
     case "Account":
-      return <AccountSetting></AccountSetting>;
+      return <AccountSetting settingsChangedHook={settingsChangedHook}></AccountSetting>;
     case "Security":
       return <SecuritySetting></SecuritySetting>;
     default:
@@ -24,11 +24,16 @@ function renderCurrentSetting(setting: string) {
 export default function Home({ authTokenStorageHandler }: Props) {
   const settings = ["Account", "Security"];
   const [currentSetting, setCurrentSetting] = React.useState(settings[0]);
-  /* Make object to pass by reference */
+  const [settingsChanged, setsettingsChanged] = React.useState(false);
+  /* Make objects to pass by reference */
   const currentSettingHook = {
     currentSetting,
     setCurrentSetting,
   };
+  const settingsChangedHook = {
+    settingsChanged,
+    setsettingsChanged,
+  };
 
   if (!authTokenStorageHandler.authTokenValue) {
     return <Navigate to="/home"></Navigate>;
@@ -52,9 +57,12 @@ export default function Home({ authTokenStorageHandler }: Props) {
               </ul>
             </div>
             <hr></hr>
-            <div className="currentSetting">
-              {renderCurrentSetting(currentSetting)}
-            </div>
+	    <div className="currentSettingBox">
+              <div className="currentSetting">
+                {renderCurrentSetting(currentSetting, settingsChangedHook)}
+              </div>
+	      {settingsChangedHook.settingsChanged ? ( <button>Save</button> ) : null }
+	    </div>
           </div>
         </TilingItem>
       </div>

src/pages/settings/Account.tsx

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