Create Profile Hooks to fetch current user

front/src/layout/AppLayout.tsx

@@ -1,5 +1,6 @@
 import Navbar from './navbar/Navbar';
 import styled from '@emotion/styled';
+import { User } from '../interfaces/user.interface';
 
 const StyledLayout = styled.div`
   display: flex;
@@ -9,12 +10,7 @@ const StyledLayout = styled.div`
 
 type OwnProps = {
   children: JSX.Element;
-  user?: {
-    email: string;
-    first_name: string;
-    last_name: string;
-    tenant: { id: string; name: string };
-  };
+  user?: User;
 };
 
 function AppLayout({ children, user }: OwnProps) {

front/src/layout/navbar/Navbar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { useMatch, useResolvedPath } from 'react-router-dom';
+import { User } from '../../interfaces/user.interface';
 import NavItem from './NavItem';
 import ProfileContainer from './ProfileContainer';
 
@@ -18,12 +19,7 @@ const NavItemsContainer = styled.div`
 `;
 
 type OwnProps = {
-  user?: {
-    email: string;
-    first_name: string;
-    last_name: string;
-    tenant: { id: string; name: string };
-  };
+  user?: User;
 };
 
 function Navbar({ user }: OwnProps) {

front/src/layout/navbar/ProfileContainer.tsx

@@ -1,12 +1,8 @@
 import styled from '@emotion/styled';
+import { User } from '../../interfaces/user.interface';
 
 type OwnProps = {
-  user?: {
-    email: string;
-    first_name: string;
-    last_name: string;
-    tenant: { id: string; name: string };
-  };
+  user?: User;
 };
 
 const StyledContainer = styled.button`
@@ -65,7 +61,7 @@ function ProfileContainer({ user }: OwnProps) {
       </StyledAvatar>
       <StyledInfoContainer>
         <StyledEmail>{user?.email}</StyledEmail>
-        <StyledTenant>{user?.tenant.name}</StyledTenant>
+        <StyledTenant>{user?.tenant?.name}</StyledTenant>
       </StyledInfoContainer>
     </StyledContainer>
   );

front/src/layout/navbar/__stories__/Navbar.stories.tsx

@@ -11,10 +11,11 @@ export const NavbarOnInsights = () => (
   <MemoryRouter initialEntries={['/insights']}>
     <Navbar
       user={{
+        id: 1,
         email: 'charles@twenty.com',
         first_name: 'Charles',
         last_name: 'Bochet',
-        tenant: { id: '1', name: 'Twenty' },
+        tenant: { id: 1, name: 'Twenty' },
       }}
     />
   </MemoryRouter>