Merge branch 'dev' into feature/linking-accounts

src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx

@@ -26,6 +26,12 @@ export default function SaveChangesCard(props: Props) {
     if (!profileQuery.data?.profile)
         return <></>
 
+
+    const clickCancel = () => {
+        if (window.confirm('You might lose some unsaved changes. Are you sure you want to continue?'))
+            props.onCancel?.()
+    }
+
     return (
         <div className="md:p-24 rounded-16 bg-white md:border-2 border-gray-200 flex flex-col gap-24">
             <div className='hidden md:flex gap-8'>
@@ -45,14 +51,13 @@ export default function SaveChangesCard(props: Props) {
                 <Button
                     color="primary"
                     onClick={props.onSubmit}
-                    isLoading={props.isLoading}
                     disabled={!props.isDirty || props.isLoading}
                 >
                     Save Changes
                 </Button>
                 <Button
                     color="gray"
-                    onClick={props.onCancel}
+                    onClick={clickCancel}
                     disabled={!props.isDirty || props.isLoading}
                 >
                     Cancel

src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx

@@ -7,6 +7,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import Avatar from "src/features/Profiles/Components/Avatar/Avatar";
 import { usePrompt } from "src/utils/hooks";
 import SaveChangesCard from "../SaveChangesCard/SaveChangesCard";
+import { toast } from "react-toastify";
 
 interface Props {
     data: Pick<User,
@@ -69,11 +70,7 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) {
         mode: 'onBlur',
     });
 
-    const [mutate, mutationStatus] = useUpdateProfileAboutMutation({
-        onCompleted: () => {
-            onClose?.()
-        }
-    });
+    const [mutate, mutationStatus] = useUpdateProfileAboutMutation();
 
 
 
@@ -81,6 +78,9 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) {
 
 
     const onSubmit: SubmitHandler<IFormInputs> = data => {
+
+        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
+
         mutate({
             variables: {
                 data: {
@@ -99,11 +99,13 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) {
             },
             onCompleted: () => {
                 reset(data);
+                toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
             }
-        }).catch(() => {
-            NotificationsService.error('A network error happened');
-            mutationStatus.reset()
         })
+            .catch(() => {
+                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
+                mutationStatus.reset()
+            })
     };
 
     return (