fix(menu-account): user data when not have onboarding

Qovery · Dec 27, 2022 · ee4e1a1 · ee4e1a1
1 parent 5162624
commit ee4e1a1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 12 deletions.
diff --git a/libs/pages/layout/src/lib/feature/menu-account-feature/menu-account-feature.tsx b/libs/pages/layout/src/lib/feature/menu-account-feature/menu-account-feature.tsx
@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { selectAllOrganization, selectOrganizationById } from '@qovery/domains/organization'
-import { selectUserSignUp } from '@qovery/domains/user'
+import { selectUser, selectUserSignUp } from '@qovery/domains/user'
 import { OrganizationEntity } from '@qovery/shared/interfaces'
 import { RootState } from '@qovery/store'
 import MenuAccount from '../../ui/menu-account/menu-account'
@@ -10,14 +10,27 @@ export function MenuAccountFeature() {
   const { organizationId = '' } = useParams()
 
   const user = useSelector(selectUserSignUp)
+  const userToken = useSelector(selectUser)
+
   const currentOrganization = useSelector<RootState, OrganizationEntity | undefined>((state) =>
     selectOrganizationById(state, organizationId)
   )
   const organizations = useSelector(selectAllOrganization)
 
   if (!currentOrganization) return null
 
-  return <MenuAccount organizations={organizations} currentOrganization={currentOrganization} user={user} />
+  return (
+    <MenuAccount
+      organizations={organizations}
+      currentOrganization={currentOrganization}
+      user={{
+        firstName: user.first_name || userToken.name,
+        lastName: user.last_name,
+        email: user.user_email || userToken.email,
+        picture: userToken.picture,
+      }}
+    />
+  )
 }
 
 export default MenuAccountFeature
diff --git a/libs/pages/layout/src/lib/ui/menu-account/menu-account.tsx b/libs/pages/layout/src/lib/ui/menu-account/menu-account.tsx
@@ -1,4 +1,3 @@
-import { SignUp } from 'qovery-typescript-axios'
 import { useNavigate } from 'react-router-dom'
 import { OrganizationEntity } from '@qovery/shared/interfaces'
 import { LOGOUT_URL, ONBOARDING_PROJECT_URL, ONBOARDING_URL, ORGANIZATION_URL } from '@qovery/shared/router'
@@ -7,7 +6,12 @@ import { Avatar, Icon, IconAwesomeEnum, Menu, MenuAlign, MenuData, MenuDirection
 export interface MenuAccountProps {
   organizations: OrganizationEntity[]
   currentOrganization: OrganizationEntity
-  user: SignUp
+  user: {
+    firstName?: string
+    lastName?: string
+    email?: string
+    picture?: string
+  }
 }
 
 export function MenuAccount(props: MenuAccountProps) {
@@ -55,15 +59,16 @@ export function MenuAccount(props: MenuAccountProps) {
                 <Avatar
                   className="mr-3"
                   size={40}
-                  firstName={user?.first_name || ''}
-                  lastName={user?.last_name}
+                  url={user?.picture}
+                  firstName={user?.firstName || ''}
+                  lastName={user?.lastName}
                   noTooltip
                 />
                 <div>
                   <p className="text-text-700 text-sm font-medium">
-                    {user?.first_name} {user?.last_name}
+                    {user?.firstName} {user?.lastName}
                   </p>
-                  <span className="text-text-400 text-xs">{user.user_email}</span>
+                  <span className="text-text-400 text-xs">{user.email}</span>
                 </div>
               </div>
               <Icon name={IconAwesomeEnum.WHEEL} className="text-brand-500 link" />
@@ -95,8 +100,9 @@ export function MenuAccount(props: MenuAccountProps) {
         <div className="cursor-pointer select-none">
           <Avatar
             size={40}
-            firstName={user?.first_name || ''}
-            lastName={user?.last_name}
+            firstName={user?.firstName || ''}
+            lastName={user?.lastName}
+            url={user?.picture}
             logoUrl={currentOrganization?.logo_url || undefined}
             logoText={!currentOrganization?.logo_url ? currentOrganization?.name.charAt(0) : undefined}
             noTooltip

diff --git a/libs/shared/ui/src/lib/components/avatar/avatar.tsx b/libs/shared/ui/src/lib/components/avatar/avatar.tsx
@@ -64,10 +64,12 @@ export function Avatar(props: AvatarProps) {
       {(logoUrl || logoText) && (
         <div
           data-testid="avatar-logo"
-          className="flex items-center text-sm font-medium w-4 h-4 rounded-full absolute top-[24px] -right-[2px]"
+          className="flex items-center text-sm font-medium w-[18px] h-[18px] rounded-full absolute top-[24px] -right-[2px]"
         >
           {logoUrl ? (
-            <img src={logoUrl} alt="Logo Organization" />
+            <span className="flex items-center justify-center w-full h-full bg-element-light-lighter-100 rounded-full p-[2px]">
+              <img src={logoUrl} alt="Logo Organization" />
+            </span>
           ) : (
             <span className="w-full h-full text-xxs text-text-400 bg-element-light-lighter-300 border border-element-light-lighter-100 rounded-full flex items-center justify-center uppercase">
               {logoText}