From d57011ee305e4806e5f9d933e314b806f860f82d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cosmin=20P=C3=A2rvulescu?=
 <Cosmin-Parvulescu@users.noreply.github.com>
Date: Wed, 27 Dec 2023 18:06:07 +0200
Subject: [PATCH] chore(passport): Reflect overriden profile in Dashboard

---
 .../app/components/EditProfileModal/index.tsx |  11 -
 apps/passport/app/routes/settings.tsx         |  21 ++
 .../app/routes/settings/dashboard.tsx         | 337 ++++++++++--------
 3 files changed, 209 insertions(+), 160 deletions(-)

diff --git a/apps/passport/app/components/EditProfileModal/index.tsx b/apps/passport/app/components/EditProfileModal/index.tsx
index ca95e3935d..4f7668eaf3 100644
--- a/apps/passport/app/components/EditProfileModal/index.tsx
+++ b/apps/passport/app/components/EditProfileModal/index.tsx
@@ -9,7 +9,6 @@ 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
@@ -27,16 +26,6 @@ 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.tsx b/apps/passport/app/routes/settings.tsx
index 3bb7ba4994..f2c4bbb91e 100644
--- a/apps/passport/app/routes/settings.tsx
+++ b/apps/passport/app/routes/settings.tsx
@@ -30,6 +30,7 @@ import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
 import { usePostHog } from 'posthog-js/react'
 import { useEffect, useState } from 'react'
 import { InternalServerError } from '@proofzero/errors'
+import { ToastType, toast } from '@proofzero/design-system/src/atoms/toast'
 
 export type AuthorizedAppsModel = {
   clientId: string
@@ -174,6 +175,22 @@ export default function SettingsLayout() {
   }, [isIdentified])
 
   const editProfileFetcher = useFetcher()
+  useEffect(() => {
+    if (
+      editProfileFetcher.state === 'idle' &&
+      editProfileFetcher.type === 'done'
+    ) {
+      if (!editProfileFetcher.data?.error) {
+        toast(ToastType.Success, {
+          message: editProfileFetcher.data.message,
+        })
+      } else if (editProfileFetcher.data?.error) {
+        toast(ToastType.Error, {
+          message: editProfileFetcher.data.message,
+        })
+      }
+    }
+  }, [editProfileFetcher])
 
   return (
     <Popover className="bg-white lg:bg-gray-50 min-h-[100dvh] relative">
@@ -212,6 +229,10 @@ export default function SettingsLayout() {
                     connectedProfiles,
                     primaryAccountURN,
                     CONSOLE_URL,
+                    pfpUrl,
+                    displayName,
+                    isProfileCustomized,
+                    editProfileFetcher,
                   }}
                 />
               </div>
diff --git a/apps/passport/app/routes/settings/dashboard.tsx b/apps/passport/app/routes/settings/dashboard.tsx
index 8ca7dbbd44..c76df42732 100644
--- a/apps/passport/app/routes/settings/dashboard.tsx
+++ b/apps/passport/app/routes/settings/dashboard.tsx
@@ -3,7 +3,7 @@ import { Text } from '@proofzero/design-system'
 import SectionTitle from '~/components/typography/sectionTitle'
 import { AccountList } from '~/components/accounts/AccountList'
 
-import { Link, useNavigate } from '@remix-run/react'
+import { FetcherWithComponents, Link, useNavigate } from '@remix-run/react'
 
 import dashboardChart from '~/assets/dashboard_chart.svg'
 import type { AccountListItemProps } from '~/components/accounts/AccountListItem'
@@ -15,15 +15,28 @@ import { useOutletContext } from '@remix-run/react'
 import type { AccountURN } from '@proofzero/urns/account'
 import { AuthorizedAppsModel } from '../settings'
 import { ToastType, toast } from '@proofzero/design-system/src/atoms/toast'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { TbPencil } from 'react-icons/tb'
+import EditProfileModal from '~/components/EditProfileModal'
 
 export default function DashboardLayout() {
-  const { connectedProfiles, authorizedApps, primaryAccountURN } =
-    useOutletContext<{
-      connectedProfiles: any[]
-      authorizedApps: AuthorizedAppsModel[]
-      primaryAccountURN: AccountURN
-    }>()
+  const {
+    connectedProfiles,
+    authorizedApps,
+    primaryAccountURN,
+    displayName,
+    pfpUrl,
+    isProfileCustomized,
+    editProfileFetcher,
+  } = useOutletContext<{
+    connectedProfiles: any[]
+    authorizedApps: AuthorizedAppsModel[]
+    primaryAccountURN: AccountURN
+    displayName: string | undefined
+    pfpUrl: string | undefined
+    isProfileCustomized: boolean
+    editProfileFetcher: FetcherWithComponents<any>
+  }>()
 
   const navigate = useNavigate()
 
@@ -52,168 +65,194 @@ export default function DashboardLayout() {
     }
   }, [])
 
+  const [editProfileModalOpen, setEditProfileModalOpen] = useState(false)
+
   return (
-    <div className="w-full h-full flex flex-col">
-      <div className="pb-6">
-        <Text weight="semibold" size="2xl">
-          Dashboard
-        </Text>
-      </div>
-      {appErrorExists ? (
-        <WarningCTA
-          description="We detected a data error in your application(s).
+    <>
+      <EditProfileModal
+        isOpen={editProfileModalOpen}
+        setIsOpen={setEditProfileModalOpen}
+        profile={{
+          name: displayName ?? '-',
+          picture: pfpUrl ?? '-',
+          primaryAccountURN,
+          patched: isProfileCustomized,
+        }}
+        fetcher={editProfileFetcher}
+      />
+      <div className="w-full h-full flex flex-col">
+        <div className="pb-6 flex flex-row items-center gap-4">
+          <Text weight="semibold" size="2xl">
+            Welcome to Passport
+          </Text>
+
+          <button
+            className="pl-2 pr-4 py-2 rounded-full bg-white flex items-center gap-2 hover:bg-gray-100"
+            onClick={() => setEditProfileModalOpen(true)}
+          >
+            <img src={pfpUrl} className="w-8 h-8 rounded-full" />
+            <Text size="lg" weight="semibold" className="text-gray-800">
+              {displayName}
+            </Text>
+            <TbPencil className="w-5 h-5 text-gray-500" />
+          </button>
+        </div>
+        {appErrorExists ? (
+          <WarningCTA
+            description="We detected a data error in your application(s).
       Please revoke the authorization and re-authorize again in the affected application."
-          btnText="Applications"
-          clickHandler={() => {
-            navigate('/settings/applications')
-          }}
-        />
-      ) : null}
-      <div
-        className="dashboard flex flex-col md:flex-row
+            btnText="Applications"
+            clickHandler={() => {
+              navigate('/settings/applications')
+            }}
+          />
+        ) : null}
+        <div
+          className="dashboard flex flex-col md:flex-row
     items-center md:items-start md:space-x-4
      h-full w-full"
-      >
-        <div className="flex flex-col gap-4 space-y-4 md:flex-1 w-full">
-          <div>
-            <SectionTitle title="Activity" />
-            <div
-              className="w-full h-[205px] border border-gray-200
+        >
+          <div className="flex flex-col gap-4 space-y-4 md:flex-1 w-full">
+            <div>
+              <SectionTitle title="Activity" />
+              <div
+                className="w-full h-[205px] border border-gray-200
               rounded-lg shadow flex justify-center items-center
               shadow-sm"
-              style={{
-                background: `url(${dashboardChart}), #FFFFFF`,
-                backgroundRepeat: 'no-repeat',
-                backgroundPosition: 'bottom',
-                backgroundSize: 'contain',
-              }}
-            >
-              <Text weight="medium" className="text-gray-400">
-                Coming Soon
-              </Text>
-            </div>
-          </div>
-
-          <div className="">
-            <div className="flex flex-row justify-between items-center">
-              <SectionTitle title="Connected Accounts" />
-
-              <Link className="mb-3" to="/settings/accounts">
-                <Text
-                  size="xs"
-                  weight="medium"
-                  className="text-indigo-500 cursor-pointer"
-                >
-                  Edit
+                style={{
+                  background: `url(${dashboardChart}), #FFFFFF`,
+                  backgroundRepeat: 'no-repeat',
+                  backgroundPosition: 'bottom',
+                  backgroundSize: 'contain',
+                }}
+              >
+                <Text weight="medium" className="text-gray-400">
+                  Coming Soon
                 </Text>
-              </Link>
+              </div>
             </div>
 
-            <AccountList
-              primaryAccountURN={primaryAccountURN}
-              accounts={connectedProfiles as AccountListItemProps[]}
-              showReconnectAccount={false}
-            />
-          </div>
-        </div>
-        <div className="flex flex-col md:flex-1 h-full w-full">
-          <SectionTitle title="Applications" />
-          {authorizedApps.length === 0 ? (
-            <NestedErrorPage text={'No Application Available'} />
-          ) : (
-            <div
-              className="border bg-white shadow-sm flex-1 flex flex-col
-             rounded-lg mb-4 sm:mb-0"
-            >
-              <div className="bg-[#F9FAFB] flex items-center py-5 px-8 rounded-t-lg">
-                <Text
-                  size="sm"
-                  weight="medium"
-                  className="text-gray-500 flex-1"
-                >
-                  APPLICATION
-                </Text>
-                <Text
-                  size="sm"
-                  weight="medium"
-                  className="text-gray-500 flex-1"
-                >
-                  AUTHORIZED
-                </Text>
+            <div className="">
+              <div className="flex flex-row justify-between items-center">
+                <SectionTitle title="Connected Accounts" />
+
+                <Link className="mb-3" to="/settings/accounts">
+                  <Text
+                    size="xs"
+                    weight="medium"
+                    className="text-indigo-500 cursor-pointer"
+                  >
+                    Edit
+                  </Text>
+                </Link>
               </div>
 
-              <div className="flex flex-1 flex-col">
-                {authorizedApps.map((a) => (
-                  <article
-                    key={a.title}
-                    className="flex flex-row space-x-4 items-center py-5 px-8"
+              <AccountList
+                primaryAccountURN={primaryAccountURN}
+                accounts={connectedProfiles as AccountListItemProps[]}
+                showReconnectAccount={false}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col md:flex-1 h-full w-full">
+            <SectionTitle title="Applications" />
+            {authorizedApps.length === 0 ? (
+              <NestedErrorPage text={'No Application Available'} />
+            ) : (
+              <div
+                className="border bg-white shadow-sm flex-1 flex flex-col
+             rounded-lg mb-4 sm:mb-0"
+              >
+                <div className="bg-[#F9FAFB] flex items-center py-5 px-8 rounded-t-lg">
+                  <Text
+                    size="sm"
+                    weight="medium"
+                    className="text-gray-500 flex-1"
+                  >
+                    APPLICATION
+                  </Text>
+                  <Text
+                    size="sm"
+                    weight="medium"
+                    className="text-gray-500 flex-1"
                   >
-                    <div className="flex-1 w-min flex flex-row items-center space-x-2">
-                      <img
-                        src={a.icon}
-                        alt="app icon"
-                        className={`object-cover w-6 h-6 ${
-                          a.appDataError || a.appScopeError ? '' : 'rounded'
-                        }`}
-                      />
-                      {a.title ? (
-                        <Text
-                          size="sm"
-                          weight="medium"
-                          className="text-gray-500 w-fit py-[2px]"
-                        >
-                          {a.title}
-                        </Text>
-                      ) : null}
-                      {a.appDataError || a.appScopeError ? (
-                        <Text
-                          size="sm"
-                          weight="normal"
-                          className="text-gray-500 w-max py-[2px] px-2
+                    AUTHORIZED
+                  </Text>
+                </div>
+
+                <div className="flex flex-1 flex-col">
+                  {authorizedApps.map((a) => (
+                    <article
+                      key={a.title}
+                      className="flex flex-row space-x-4 items-center py-5 px-8"
+                    >
+                      <div className="flex-1 w-min flex flex-row items-center space-x-2">
+                        <img
+                          src={a.icon}
+                          alt="app icon"
+                          className={`object-cover w-6 h-6 ${
+                            a.appDataError || a.appScopeError ? '' : 'rounded'
+                          }`}
+                        />
+                        {a.title ? (
+                          <Text
+                            size="sm"
+                            weight="medium"
+                            className="text-gray-500 w-fit py-[2px]"
+                          >
+                            {a.title}
+                          </Text>
+                        ) : null}
+                        {a.appDataError || a.appScopeError ? (
+                          <Text
+                            size="sm"
+                            weight="normal"
+                            className="text-gray-500 w-max py-[2px] px-2
                             text-[#EA580C] bg-orange-50 rounded-xl"
-                        >
-                          Data Error
-                        </Text>
-                      ) : null}
-                    </div>
+                          >
+                            Data Error
+                          </Text>
+                        ) : null}
+                      </div>
 
+                      <Text
+                        size="sm"
+                        weight="medium"
+                        className="text-gray-500 flex-1 text-ellipsis"
+                      >
+                        {new Date(a.timestamp).toLocaleString('default', {
+                          day: '2-digit',
+                          month: 'short',
+                          year: 'numeric',
+                          hour: '2-digit',
+                          minute: '2-digit',
+                          second: '2-digit',
+                        })}
+                      </Text>
+                    </article>
+                  ))}
+                </div>
+
+                <div className="w-full px-8">
+                  <div className="border-t border-gray-200"></div>
+                </div>
+
+                <div className="flex flex-row justify-center">
+                  <Link to="/settings/applications">
                     <Text
                       size="sm"
                       weight="medium"
-                      className="text-gray-500 flex-1 text-ellipsis"
+                      className="cursor-pointer text-indigo-500 hover:underline my-4"
                     >
-                      {new Date(a.timestamp).toLocaleString('default', {
-                        day: '2-digit',
-                        month: 'short',
-                        year: 'numeric',
-                        hour: '2-digit',
-                        minute: '2-digit',
-                        second: '2-digit',
-                      })}
+                      View All
                     </Text>
-                  </article>
-                ))}
+                  </Link>
+                </div>
               </div>
-
-              <div className="w-full px-8">
-                <div className="border-t border-gray-200"></div>
-              </div>
-
-              <div className="flex flex-row justify-center">
-                <Link to="/settings/applications">
-                  <Text
-                    size="sm"
-                    weight="medium"
-                    className="cursor-pointer text-indigo-500 hover:underline my-4"
-                  >
-                    View All
-                  </Text>
-                </Link>
-              </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }