Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add Feedback to UserProfile #349

Merged
merged 7 commits into from
Mar 25, 2024
Merged

feat: Add Feedback to UserProfile #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4778896
handle saving state
Xavier-Charles Mar 25, 2024
f3db910
handle on Save feedback
Xavier-Charles Mar 25, 2024
02200cd
expand button disabled state
Xavier-Charles Mar 25, 2024
fb0ca48
clean up
Xavier-Charles Mar 25, 2024
5bc8403
remove unnecessary useEffect
Xavier-Charles Mar 25, 2024
43143ae
rename setisProfileUpdated to setIsProfileUpdated
Xavier-Charles Mar 25, 2024
a53a4ef
clean up
Xavier-Charles Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/frontend/src/mobile-components/profile/EditProfileModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

>
Save
</Button>
Expand Down
31 changes: 30 additions & 1 deletion packages/frontend/src/mobile-components/profile/UserSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
</>
);
};
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-kit/src/components/dialog/MiniDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading