From e995215a80bba199b11bb28276458e27a5af6fce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cosmin=20P=C3=A2rvulescu?= <cosmin.parvulescu@gmail.com>
Date: Wed, 6 Dec 2023 19:25:02 +0200
Subject: [PATCH] Add toast notifications for profile update

---
 .../app/components/EditProfileModal/index.tsx | 11 +++++++++
 .../app/routes/settings/profile/patch.tsx     | 24 +++++++++++++------
 .../app/routes/settings/profile/reset.tsx     | 18 ++++++++++----
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/apps/passport/app/components/EditProfileModal/index.tsx b/apps/passport/app/components/EditProfileModal/index.tsx
index 4f7668eaf3..ca95e3935d 100644
--- a/apps/passport/app/components/EditProfileModal/index.tsx
+++ b/apps/passport/app/components/EditProfileModal/index.tsx
@@ -9,6 +9,7 @@ import { Input } from '@proofzero/design-system/src/atoms/form/Input'
 import { captureFormSubmitAndReplaceImages } from '@proofzero/design-system/src/utils/form-cf-images'
 import { Loader } from '@proofzero/design-system/src/molecules/loader/Loader'
 import { HiOutlineUpload } from 'react-icons/hi'
+import { ToastType, toast } from '@proofzero/design-system/src/atoms/toast'
 
 const EditProfileModal: React.FC<{
   isOpen: boolean
@@ -26,6 +27,16 @@ const EditProfileModal: React.FC<{
   useEffect(() => {
     if (fetcher.state === 'idle' && fetcher.type === 'done') {
       setIsOpen(false)
+
+      if (!fetcher.data?.error) {
+        toast(ToastType.Success, {
+          message: fetcher.data.message,
+        })
+      } else if (fetcher.data?.error) {
+        toast(ToastType.Error, {
+          message: fetcher.data.message,
+        })
+      }
     }
   }, [fetcher])
 
diff --git a/apps/passport/app/routes/settings/profile/patch.tsx b/apps/passport/app/routes/settings/profile/patch.tsx
index d62a061e5d..2fe877d00b 100644
--- a/apps/passport/app/routes/settings/profile/patch.tsx
+++ b/apps/passport/app/routes/settings/profile/patch.tsx
@@ -1,4 +1,4 @@
-import type { ActionFunction } from '@remix-run/cloudflare'
+import { json, type ActionFunction } from '@remix-run/cloudflare'
 import { getCoreClient } from '~/platform.server'
 import { getValidatedSessionContext } from '~/session.server'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
@@ -16,12 +16,22 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
     const name = formData.get('name') as string | undefined
     const picture = formData.get('picture') as string | undefined
 
-    const coreClient = getCoreClient({ context, jwt })
-    await coreClient.identity.patchProfileFields.mutate({
-      displayName: name,
-      pictureURL: picture,
-    })
+    try {
+      const coreClient = getCoreClient({ context, jwt })
+      await coreClient.identity.patchProfileFields.mutate({
+        displayName: name,
+        pictureURL: picture,
+      })
+    } catch (ex) {
+      return json({
+        error: true,
+        message: 'Profile update unsuccessful',
+      })
+    }
 
-    return null
+    return json({
+      error: false,
+      message: 'Profile updated successfully',
+    })
   }
 )
diff --git a/apps/passport/app/routes/settings/profile/reset.tsx b/apps/passport/app/routes/settings/profile/reset.tsx
index 61270c52b6..a5c57fe88d 100644
--- a/apps/passport/app/routes/settings/profile/reset.tsx
+++ b/apps/passport/app/routes/settings/profile/reset.tsx
@@ -1,4 +1,4 @@
-import type { ActionFunction } from '@remix-run/cloudflare'
+import { json, type ActionFunction } from '@remix-run/cloudflare'
 import { getCoreClient } from '~/platform.server'
 import { getValidatedSessionContext } from '~/session.server'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
@@ -12,9 +12,19 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
       context.traceSpan
     )
 
-    const coreClient = getCoreClient({ context, jwt })
-    await coreClient.identity.resetProfileFields.mutate()
+    try {
+      const coreClient = getCoreClient({ context, jwt })
+      await coreClient.identity.resetProfileFields.mutate()
+    } catch (ex) {
+      return json({
+        error: true,
+        message: 'Profile update unsuccessful',
+      })
+    }
 
-    return null
+    return json({
+      error: false,
+      message: 'Profile updated successfully',
+    })
   }
 )