From 204889fa3ad3c44a17a89b12dd07ce896865673a Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sat, 4 Sep 2021 20:25:03 +0300
Subject: [PATCH] feat: default value for status page & fullname field for user

---
 src/components/Header/UserInfo.tsx                  |  6 +++---
 src/contexts/index.ts                               |  2 +-
 src/interfaces/index.ts                             |  1 +
 .../UpdatePasswordContainer.tsx                     |  2 +-
 .../UpdatePasswordForm/UpdatePasswordForm.tsx       |  2 +-
 src/pages/profile/index.tsx                         |  8 ++++----
 src/stores/UserStore.ts                             | 13 ++++++++++++-
 src/types/index.d.ts                                |  2 +-
 8 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/Header/UserInfo.tsx b/src/components/Header/UserInfo.tsx
index c485100..a0bc1e1 100644
--- a/src/components/Header/UserInfo.tsx
+++ b/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>
diff --git a/src/contexts/index.ts b/src/contexts/index.ts
index 7a1e9c7..af2a695 100644
--- a/src/contexts/index.ts
+++ b/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: () => {},
 });
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index 26f8f40..df1ea68 100644
--- a/src/interfaces/index.ts
+++ b/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;
diff --git a/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx b/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx
index 1a8fdcb..3b934e3 100644
--- a/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx
+++ b/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>
diff --git a/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx b/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx
index 3c481dc..248cfdc 100644
--- a/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx
+++ b/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) {
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 4f3a003..248c812 100644
--- a/src/pages/profile/index.tsx
+++ b/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={{
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index 2d041ed..e53d666 100644
--- a/src/stores/UserStore.ts
+++ b/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;
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index f8e7946..f3986ba 100644
--- a/src/types/index.d.ts
+++ b/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>>;