feat: Add Feedback to UserProfile (#349)

AlphadayHQ · Mar 25, 2024 · ce1fb78 · ce1fb78
1 parent 0ef9781
commit ce1fb78
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git 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>

diff --git 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 { 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 { 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,12 @@ const UserSettings: FC<IUserSettings> = ({
     const [showProfileEditModal, setShowProfileEditModal] =
         useState<boolean>(false);
     const history = useHistory();
+    const [isProfileUpdated, setIsProfileUpdated] = useState(false);
+    const prevIsSavingProfile = usePrevious(isSavingProfile);
+
+    if (prevIsSavingProfile === true && isSavingProfile === false) {
+        setIsProfileUpdated(true);
+    }
 
     const navigate = (link: string) => {
         history.push(link);
@@ -231,6 +239,27 @@ 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>
+            <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>
         </>
     );
 };

diff --git 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>