From d927a6469cd74503f5587b19966a64fc788b5c86 Mon Sep 17 00:00:00 2001
From: Aloento <11802769+Aloento@users.noreply.github.com>
Date: Mon, 4 Mar 2024 15:39:10 +0100
Subject: [PATCH] Refactor Setting component to include additional address
 field

---
 src/Components/Setting.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/Components/Setting.tsx b/src/Components/Setting.tsx
index 5e2e89a..6057a95 100644
--- a/src/Components/Setting.tsx
+++ b/src/Components/Setting.tsx
@@ -34,9 +34,6 @@ const useStyles = makeStyles({
   },
   fill: {
     flexGrow: 1
-  },
-  small: {
-    width: "100%"
   }
 });
 
@@ -55,7 +52,7 @@ export function Setting({ Open, Toggle, New }: ISetting) {
   const [forename, setForename] = useState<string>();
 
   const [phone, setPhone] = useState<string>();
-  const [address, setAddress] = useState(Array<string>(4).fill(""));
+  const [address, setAddress] = useState(Array<string>(5).fill(""));
 
   const { data, mutate } = Hub.User.Get.useMe(log);
 
@@ -218,10 +215,11 @@ export function Setting({ Open, Toggle, New }: ISetting) {
                   minLength={2}
                 />
               </Field>
+            </div>
 
-              <Field hint="Postal / Zip Code">
+            <div className={style.one}>
+              <Field hint="Country">
                 <Input
-                  input={{ className: style.small }}
                   value={address[3]}
                   onChange={(_, v) => {
                     address[3] = v.value;
@@ -231,6 +229,18 @@ export function Setting({ Open, Toggle, New }: ISetting) {
                   minLength={2}
                 />
               </Field>
+
+              <Field hint="Postal / Zip Code">
+                <Input
+                  value={address[4]}
+                  onChange={(_, v) => {
+                    address[3] = v.value;
+                    setAddress([...address]);
+                  }}
+                  maxLength={10}
+                  minLength={2}
+                />
+              </Field>
             </div>
           </DialogContent>