From 4778896e20ffbbb2c4e7c5051248de09e40e3ed7 Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Mon, 25 Mar 2024 07:48:18 +0100
Subject: [PATCH 1/7] handle saving state

---
 .../src/mobile-components/profile/UserSettings.tsx     | 10 +++++++++-
 packages/ui-kit/src/components/dialog/MiniDialog.tsx   |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
index 126cf740..f30c6223 100644
--- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx
+++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from "react";
-import { twMerge } from "@alphaday/ui-kit";
+import { MiniDialog, Spinner, twMerge } from "@alphaday/ui-kit";
 import md5 from "md5";
 import { Link, useHistory } from "react-router-dom";
 import { TUserProfile } from "src/api/types";
@@ -231,6 +231,14 @@ const UserSettings: FC<IUserSettings> = ({
                 isSavingProfile={isSavingProfile}
                 onCloseModal={handleCloseModal}
             />
+            <MiniDialog show={isSavingProfile} title="Saving">
+                <div className="text-center text-sm font-normal leading-tight tracking-tight text-slate-300">
+                    Saving changes to your profile
+                </div>
+                <div className="text-center mt-4">
+                    <Spinner />
+                </div>
+            </MiniDialog>
         </>
     );
 };
diff --git a/packages/ui-kit/src/components/dialog/MiniDialog.tsx b/packages/ui-kit/src/components/dialog/MiniDialog.tsx
index 988953c9..8a879d1d 100644
--- a/packages/ui-kit/src/components/dialog/MiniDialog.tsx
+++ b/packages/ui-kit/src/components/dialog/MiniDialog.tsx
@@ -27,8 +27,8 @@ export const MiniDialog: React.FC<MiniDialogProps> = ({
             className="w-full gap-2 rounded-xl bg-zinc-800 px-5 py-6"
         >
             <div className="flex flex-col items-center justify-start">
-                {icon && <div className="p-2">{icon}</div>}
-                <div className="flex h-28 flex-col items-center justify-center gap-4 self-stretch">
+                {icon && <div className="p-2 pb-0">{icon}</div>}
+                <div className="flex h-28 flex-col items-center justify-center pt-2 gap-4 self-stretch">
                     <div className="self-stretch text-center text-sm font-semibold uppercase leading-tight tracking-wider text-slate-300">
                         {title}
                     </div>

From f3db910e3fbcb6769b91a3a960e57144910e0e83 Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Mon, 25 Mar 2024 12:02:33 +0100
Subject: [PATCH 2/7] handle on Save feedback

---
 .../profile/UserSettings.tsx                  | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
index f30c6223..896f3da8 100644
--- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx
+++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
@@ -1,11 +1,13 @@
-import { FC, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import { MiniDialog, Spinner, twMerge } from "@alphaday/ui-kit";
 import md5 from "md5";
 import { Link, useHistory } from "react-router-dom";
+import { usePrevious } from "src/api/hooks";
 import { TUserProfile } from "src/api/types";
 import { Logger } from "src/api/utils/logging";
 import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-down2.svg";
 import { ReactComponent as DocSVG } from "src/assets/icons/doc.svg";
+import { ReactComponent as GreenCheckSVG } from "src/assets/icons/green-check.svg";
 import { ReactComponent as LogoutSVG } from "src/assets/icons/logout.svg";
 import { ReactComponent as StarSVG } from "src/assets/icons/star.svg";
 import { ReactComponent as UserSVG } from "src/assets/icons/user.svg";
@@ -102,6 +104,14 @@ const UserSettings: FC<IUserSettings> = ({
     const [showProfileEditModal, setShowProfileEditModal] =
         useState<boolean>(false);
     const history = useHistory();
+    const [isProfileUpdated, setisProfileUpdated] = useState(false);
+    const prevIsSavingProfile = usePrevious(isSavingProfile);
+
+    useEffect(() => {
+        if (prevIsSavingProfile === true && isSavingProfile === false) {
+            setisProfileUpdated(true);
+        }
+    }, [isSavingProfile, prevIsSavingProfile]);
 
     const navigate = (link: string) => {
         history.push(link);
@@ -239,6 +249,19 @@ const UserSettings: FC<IUserSettings> = ({
                     <Spinner />
                 </div>
             </MiniDialog>
+            <MiniDialog
+                icon={<GreenCheckSVG />}
+                show={isProfileUpdated}
+                title="Profile Updated"
+                onActionClick={() => {
+                    setisProfileUpdated(false);
+                    history.push(EMobileRoutePaths.UserSettings);
+                }}
+            >
+                <div className="text-center text-sm font-normal leading-tight tracking-tight text-slate-300">
+                    Your Profile has been updated
+                </div>
+            </MiniDialog>
         </>
     );
 };

From 02200cd949d7a9eda4e8033f76d5fad7bd3bb393 Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Mon, 25 Mar 2024 12:14:14 +0100
Subject: [PATCH 3/7] expand button disabled state

---
 .../src/mobile-components/profile/EditProfileModal.tsx      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/mobile-components/profile/EditProfileModal.tsx b/packages/frontend/src/mobile-components/profile/EditProfileModal.tsx
index ce6bb987..113ca938 100644
--- a/packages/frontend/src/mobile-components/profile/EditProfileModal.tsx
+++ b/packages/frontend/src/mobile-components/profile/EditProfileModal.tsx
@@ -61,7 +61,11 @@ export const EditProfileModal: FC<IEditProfileModal> = ({
                     <Button
                         className="w-full border-0 justify-center items-center text-base font-bold px-4 py-6 bg-accentVariant100 text-primary rounded-lg tracking-tight"
                         onClick={handleSaveProfile}
-                        disabled={isSavingProfile}
+                        disabled={
+                            isSavingProfile ||
+                            handle === undefined ||
+                            profile?.handle === handle
+                        }
                     >
                         Save
                     </Button>

From fb0ca48b73a5e52cdf84740a2d39e04284b6df74 Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Mon, 25 Mar 2024 12:16:49 +0100
Subject: [PATCH 4/7] clean up

---
 .../frontend/src/mobile-components/profile/UserSettings.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
index 896f3da8..edc1f6f5 100644
--- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx
+++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { MiniDialog, Spinner, twMerge } from "@alphaday/ui-kit";
 import md5 from "md5";
 import { Link, useHistory } from "react-router-dom";

From 5bc84039f13d40e15745fb31cb901fcb2445a7da Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Mon, 25 Mar 2024 17:19:35 +0100
Subject: [PATCH 5/7] remove unnecessary useEffect

---
 .../src/mobile-components/profile/UserSettings.tsx        | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
index edc1f6f5..83397dac 100644
--- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx
+++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
@@ -107,11 +107,9 @@ const UserSettings: FC<IUserSettings> = ({
     const [isProfileUpdated, setisProfileUpdated] = useState(false);
     const prevIsSavingProfile = usePrevious(isSavingProfile);
 
-    useEffect(() => {
-        if (prevIsSavingProfile === true && isSavingProfile === false) {
-            setisProfileUpdated(true);
-        }
-    }, [isSavingProfile, prevIsSavingProfile]);
+    if (prevIsSavingProfile === true && isSavingProfile === false) {
+        setisProfileUpdated(true);
+    }
 
     const navigate = (link: string) => {
         history.push(link);

From 43143ae7fffbcedd74900c14062f7231d8890539 Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Mon, 25 Mar 2024 17:20:16 +0100
Subject: [PATCH 6/7] rename setisProfileUpdated to setIsProfileUpdated

---
 .../frontend/src/mobile-components/profile/UserSettings.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
index 83397dac..3e282f5c 100644
--- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx
+++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
@@ -104,11 +104,11 @@ const UserSettings: FC<IUserSettings> = ({
     const [showProfileEditModal, setShowProfileEditModal] =
         useState<boolean>(false);
     const history = useHistory();
-    const [isProfileUpdated, setisProfileUpdated] = useState(false);
+    const [isProfileUpdated, setIsProfileUpdated] = useState(false);
     const prevIsSavingProfile = usePrevious(isSavingProfile);
 
     if (prevIsSavingProfile === true && isSavingProfile === false) {
-        setisProfileUpdated(true);
+        setIsProfileUpdated(true);
     }
 
     const navigate = (link: string) => {
@@ -252,7 +252,7 @@ const UserSettings: FC<IUserSettings> = ({
                 show={isProfileUpdated}
                 title="Profile Updated"
                 onActionClick={() => {
-                    setisProfileUpdated(false);
+                    setIsProfileUpdated(false);
                     history.push(EMobileRoutePaths.UserSettings);
                 }}
             >

From a53a4ef6adc8facf8ff94ae6e35919fe043387ee Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Mon, 25 Mar 2024 17:38:02 +0100
Subject: [PATCH 7/7] clean up

---
 .../frontend/src/mobile-components/profile/UserSettings.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
index 3e282f5c..523b59ad 100644
--- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx
+++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useState } from "react";
 import { MiniDialog, Spinner, twMerge } from "@alphaday/ui-kit";
 import md5 from "md5";
 import { Link, useHistory } from "react-router-dom";