feat: Refresh token on load and user information added

src/components/Layout/Header.tsx

@@ -1,10 +1,10 @@
 import { Box, IconButton, Typography } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { More } from 'iconsax-react';
-import type { User } from './type';
+import type { UserInfo } from '@/contexts/AuthContext';
 
 interface HeaderProps {
-  user: User;
+  user: UserInfo;
 }
 
 export const Header: React.FC<HeaderProps> = ({ user }) => {
@@ -19,11 +19,9 @@ export const Header: React.FC<HeaderProps> = ({ user }) => {
       }}
     >
       <Box>
-        <Typography variant="body1">
-          {user.firstName + ' ' + user.lastName}
-        </Typography>
+        <Typography variant="body1">{user.fullName}</Typography>
         <Typography variant="body2" color="textSecondary">
-          {user.phoneNumber}
+          {user.phoneNumber ?? user.email}
         </Typography>
       </Box>
 

src/components/Layout/Layout.tsx

@@ -6,7 +6,7 @@ import { Box, useMediaQuery, useTheme } from '@mui/material';
 import { Header } from './Header';
 import { useState } from 'react';
 import { Toolbar } from './Toolbar';
-import type { User } from './type';
+import { useAuth } from '@/hooks/useAuth';
 
 export const Layout = () => {
   const navItemConfigs = buildNavItems(appRoutes);
@@ -14,11 +14,8 @@ export const Layout = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [sideNavOpen, setSideNavOpen] = useState(false);
-  const [user] = useState<User>({
-    firstName: 'محمد حسین',
-    lastName: 'برزه گر',
-    phoneNumber: '09123456789',
-  });
+
+  const { userInfo } = useAuth();
 
   return (
     <Box
@@ -46,7 +43,7 @@ export const Layout = () => {
             isMobile={isMobile}
             sideNavOpen={sideNavOpen}
             setSideNavOpen={setSideNavOpen}
-            user={user}
+            user={userInfo}
           />
           <Outlet />
         </Box>
@@ -54,8 +51,8 @@ export const Layout = () => {
         <SideNav
           open={sideNavOpen}
           onClose={() => setSideNavOpen(false)}
-          header={isMobile ? undefined : <Header user={user} />}
-          footer={isMobile ? <Header user={user} /> : undefined}
+          header={isMobile ? undefined : <Header user={userInfo} />}
+          footer={isMobile ? <Header user={userInfo} /> : undefined}
           navConfig={navItemConfigs}
           activePath={location.pathname + location.hash}
           selectedVariant="textOnly"

src/components/Layout/Toolbar.tsx

@@ -8,13 +8,13 @@ import {
 import { Icon } from '@rkheftan/harmony-ui';
 import { HambergerMenu, Menu } from 'iconsax-react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { User } from './type';
+import type { UserInfo } from '@/contexts/AuthContext';
 
 interface ToolbarProps {
   sideNavOpen: boolean;
   setSideNavOpen: Dispatch<SetStateAction<boolean>>;
   isMobile: boolean;
-  user: User;
+  user: UserInfo;
 }
 
 export const Toolbar: React.FC<ToolbarProps> = ({
@@ -61,7 +61,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         {isMobile && (
           <Avatar
             sx={{ width: 32, height: 32, fontSize: '14px' }}
-            src={user.profileUrl}
+            src={user.picture}
           >
             {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
           </Avatar>

src/components/Layout/type.ts

@@ -1,8 +0,0 @@
-// TODO: this type file is temporary and should replace it with the actual use type and value when api is ready
-
-export interface User {
-  firstName: string;
-  lastName: string;
-  phoneNumber: string;
-  profileUrl?: string;
-}

src/components/Loading.tsx

@@ -0,0 +1,19 @@
+import { CircularProgress, Stack } from '@mui/material';
+import React from 'react';
+
+export const Loading = () => {
+  return (
+    <Stack
+      sx={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: (t) => t.palette.background.default,
+        position: 'fixed',
+        inset: '0',
+        zIndex: (t) => t.zIndex.tooltip + 1,
+      }}
+    >
+      <CircularProgress size={50} />
+    </Stack>
+  );
+};