feat: default value for status page & fullname field for user

src/components/Header/UserInfo.tsx

@@ -33,15 +33,15 @@ const UserInfo: React.FC = () => {
       <Menu>
         <MenuButton as={Button} pr={6}>
           <Flex alignItems='center'>
-            <Avatar size='sm' name={`${userStore.me.first_name} ${userStore.me.last_name}`} marginRight={3} />
+            <Avatar size='sm' name={userStore.me.fullname} marginRight={3} />
             <Text as='span' mr={2}>
-              {`${userStore.me.first_name} ${userStore.me.last_name}`}
+              {userStore.me.fullname}
             </Text>
             <UserBadge roles={userStore.me.roles} />
           </Flex>
         </MenuButton>
         <MenuList mr='1rem'>
-          <MenuGroup title={`${userStore.me.first_name} ${userStore.me.last_name}`}>
+          <MenuGroup title={userStore.me.fullname}>
             <MenuDivider />
             <Link to='/profile'>
               <MenuItem>

src/contexts/index.ts

@@ -5,6 +5,6 @@ import RootStore from '../stores/RootStore';
 export const StoreContext = React.createContext<RootStore | undefined>(undefined);
 
 export const ProfilePageViewContext = React.createContext<ProfilePageViewStatusContextType>({
-  statusPageView: undefined,
+  statusPageView: 'default',
   setStatusPageView: () => {},
 });

src/interfaces/index.ts

@@ -13,6 +13,7 @@ export interface IAppConfig {
 
 export interface IUser {
   id: string;
+  fullname: string;
   first_name: string;
   last_name: string;
   email: string;

src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx

@@ -14,7 +14,7 @@ const UpdatePasswordContainer: React.FC = () => {
           aria-label='Back'
           borderRadius='full'
           icon={<ChevronLeftIcon />}
-          onClick={() => setStatusPageView(undefined)}
+          onClick={() => setStatusPageView('default')}
           mr='5'
         />
         <Heading as='h1'>Update password</Heading>

src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx

@@ -41,7 +41,7 @@ const UpdatePasswordForm: React.FC = () => {
       await userStore.updateCurrentUserPassword(old_password, new_password);
       toast({ title: 'Password changed.', status: 'success' });
       reset();
-      setStatusPageView(undefined);
+      setStatusPageView('default');
     } catch (error: any) {
       if (error.response) {
         if (error.response.status === 401) {

src/pages/profile/index.tsx

@@ -28,7 +28,7 @@ import UpdatePasswordContainer from './containers/UpdatePasswordContainer';
  * Profile page
  */
 const ProfilePage: React.FC<IPageProps> = () => {
-  const [statusPageView, setStatusPageView] = useState<ProfilePageStatusType>(undefined);
+  const [statusPageView, setStatusPageView] = useState<ProfilePageStatusType>('default');
   const { colorMode } = useColorMode();
   const { userStore, authStore } = useRootStore();
   const history = useHistory();
@@ -45,7 +45,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
 
   return (
     <ProfilePageViewContext.Provider value={{ statusPageView, setStatusPageView }}>
-      {statusPageView === undefined && (
+      {statusPageView === 'default' && (
         <Box maxW='900px'>
           <Heading as='h1'>My account</Heading>
           <Flex
@@ -64,7 +64,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
               <Avatar
                 border={`4px solid ${colorMode === 'dark' ? '#2D3748' : '#E2E8F0'}`}
                 size='2xl'
-                name={`${userStore.me.first_name} ${userStore.me.last_name}`}
+                name={userStore.me.fullname}
               />
             </Box>
             <Flex
@@ -77,7 +77,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
                 },
               }}
             >
-              <Heading as='h2'>{`${userStore.me.first_name} ${userStore.me.last_name}`}</Heading>
+              <Heading as='h2'>{userStore.me.fullname}</Heading>
               <Flex
                 alignItems='center'
                 sx={{

src/stores/UserStore.ts

@@ -30,9 +30,20 @@ export default class UserStore {
   public async loadCurrentUserData(): Promise<IUserResult> {
     try {
       const result = await this.userService.fetchMe();
+      const {
+        data: { id, first_name, last_name, email, roles, contacts },
+      } = result;
 
       runInAction(() => {
-        this.me = result.data;
+        this.me = {
+          id,
+          fullname: `${first_name} ${last_name}`,
+          first_name,
+          last_name,
+          email,
+          roles,
+          contacts,
+        };
       });
 
       return result;

src/types/index.d.ts

@@ -7,7 +7,7 @@ export type LinkType = {
   icon: IconType;
 };
 
-export type ProfilePageStatusType = 'update-password' | 'update-email' | undefined;
+export type ProfilePageStatusType = 'update-password' | 'update-email' | 'default';
 export type ProfilePageViewStatusContextType = {
   statusPageView: ProfilePageStatusType;
   setStatusPageView: React.Dispatch<React.SetStateAction<ProfilePageStatusType>>;