From 3a4296f3bdb8dbcf38ba11bed63c900f5b064478 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Thu, 23 Sep 2021 17:50:59 +0300 Subject: [PATCH] refactor: page contexts --- src/App.tsx | 2 +- src/contexts/index.ts | 6 +- src/hooks/useLogoutQuery.ts | 4 +- src/hooks/useUpdateUserContactsQuery.ts | 4 +- src/hooks/useUpdateUserEmailQuery.ts.ts | 4 +- .../UserAccountInfo/UserAccountInfo.tsx | 8 +- .../ConfirmEmailContainer.tsx | 10 +- .../MainContainer/MainContainer.tsx | 105 +++++++++++++ .../profile/containers/MainContainer/index.ts | 3 + .../UpdateEmailContainer.tsx | 6 +- .../UpdateEmailForm/UpdateEmailForm.tsx | 10 +- .../UpdatePasswordContainer.tsx | 6 +- .../UpdatePasswordForm/UpdatePasswordForm.tsx | 6 +- src/pages/profile/index.tsx | 147 ++++-------------- .../EditUserForm.tsx} | 0 .../EditUserForm.validator.ts} | 0 .../users/components/EditUserForm/index.ts | 3 + .../users/components/UpdateUserForm/index.ts | 3 - .../users/components/UserList/UserList.tsx | 10 +- src/pages/users/index.tsx | 14 +- src/providers/index.tsx | 40 ++++- src/types/index.d.ts | 33 ++-- 22 files changed, 247 insertions(+), 177 deletions(-) create mode 100644 src/pages/profile/containers/MainContainer/MainContainer.tsx create mode 100644 src/pages/profile/containers/MainContainer/index.ts rename src/pages/users/components/{UpdateUserForm/UpdateUserForm.tsx => EditUserForm/EditUserForm.tsx} (100%) rename src/pages/users/components/{UpdateUserForm/UpdateUserForm.validator.ts => EditUserForm/EditUserForm.validator.ts} (100%) create mode 100644 src/pages/users/components/EditUserForm/index.ts delete mode 100644 src/pages/users/components/UpdateUserForm/index.ts diff --git a/src/App.tsx b/src/App.tsx index 5274694..a7de0d2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -43,7 +43,7 @@ const App = () => { diff --git a/src/contexts/index.ts b/src/contexts/index.ts index 221f0b3..8fcbee7 100644 --- a/src/contexts/index.ts +++ b/src/contexts/index.ts @@ -4,9 +4,11 @@ import RootStore from '../stores/RootStore'; export const StoreContext = createContext(undefined); -export const ProfilePageViewContext = createContext({ +export const ProfilePageContext = createContext({ statusPageView: 'default', setStatusPageView: () => {}, + pageData: {}, + setPageData: () => {}, }); export const UsersPageContext = createContext({ @@ -16,4 +18,6 @@ export const UsersPageContext = createContext({ setLoading: () => {}, search: undefined, setSearch: () => {}, + editingUser: undefined, + setEditingUser: () => {}, }); diff --git a/src/hooks/useLogoutQuery.ts b/src/hooks/useLogoutQuery.ts index f909050..f2dd285 100644 --- a/src/hooks/useLogoutQuery.ts +++ b/src/hooks/useLogoutQuery.ts @@ -2,12 +2,12 @@ import { useState } from 'react'; import { useToast } from '@chakra-ui/react'; import { useHistory } from 'react-router-dom'; import { useRootStore } from './useRootStore'; -import { IDataResult } from 'interfaces'; +import { IApiRespose } from 'interfaces'; import { useErrorHandler } from 'react-error-boundary'; import useIsMountedRef from './useIsMountedRef'; type LogoutStateType = { - result: IDataResult | null; + result: IApiRespose<{}> | null; error: any; loading: boolean; fetched: boolean; diff --git a/src/hooks/useUpdateUserContactsQuery.ts b/src/hooks/useUpdateUserContactsQuery.ts index ec8a492..e9be5ad 100644 --- a/src/hooks/useUpdateUserContactsQuery.ts +++ b/src/hooks/useUpdateUserContactsQuery.ts @@ -1,12 +1,12 @@ import { useToast } from '@chakra-ui/react'; -import { IDataResult, IUserContacts } from 'interfaces'; +import { IApiRespose, IUserContacts } from 'interfaces'; import { useState } from 'react'; import { useErrorHandler } from 'react-error-boundary'; import useIsMountedRef from './useIsMountedRef'; import { useRootStore } from './useRootStore'; type UpdateContactsStateType = { - result: IDataResult | null; + result: IApiRespose<{}> | null; error: any; loading: boolean; fetched: boolean; diff --git a/src/hooks/useUpdateUserEmailQuery.ts.ts b/src/hooks/useUpdateUserEmailQuery.ts.ts index 31fa535..820a9e4 100644 --- a/src/hooks/useUpdateUserEmailQuery.ts.ts +++ b/src/hooks/useUpdateUserEmailQuery.ts.ts @@ -1,12 +1,12 @@ import { useToast } from '@chakra-ui/toast'; -import { ISentCodeResult } from 'interfaces'; +import { IApiRespose } from 'interfaces'; import { useState } from 'react'; import { useErrorHandler } from 'react-error-boundary'; import useIsMountedRef from './useIsMountedRef'; import { useRootStore } from './useRootStore'; type UpdateUserEmailStateType = { - result: ISentCodeResult | null; + result: IApiRespose<{ expired_seconds: number }> | null; error: any; loading: boolean; fetched: boolean; diff --git a/src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx b/src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx index 0ae4166..a3fce50 100644 --- a/src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx +++ b/src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx @@ -1,14 +1,14 @@ import React, { useContext } from 'react'; import { Box, Heading, Stack, Flex, StackDivider, Text, Button } from '@chakra-ui/react'; import { IUser } from 'interfaces'; -import { ProfilePageViewContext } from 'contexts'; +import { ProfilePageContext } from 'contexts'; type UserAccountInfoPropsType = { user: IUser; }; const UserAccountInfo: React.FC = ({ user }) => { - const { setStatusPageView } = useContext(ProfilePageViewContext); + const { setStatusPageView } = useContext(ProfilePageContext); return ( @@ -45,7 +45,7 @@ const UserAccountInfo: React.FC = ({ user }) => { {user.email} - + @@ -56,7 +56,7 @@ const UserAccountInfo: React.FC = ({ user }) => { ********** - + diff --git a/src/pages/profile/containers/ConfirmEmailContainer/ConfirmEmailContainer.tsx b/src/pages/profile/containers/ConfirmEmailContainer/ConfirmEmailContainer.tsx index 2244427..968d253 100644 --- a/src/pages/profile/containers/ConfirmEmailContainer/ConfirmEmailContainer.tsx +++ b/src/pages/profile/containers/ConfirmEmailContainer/ConfirmEmailContainer.tsx @@ -7,7 +7,7 @@ import useUpdateUserEmailQuery from 'hooks/useUpdateUserEmailQuery.ts'; import { useRootStore } from 'hooks/useRootStore'; import { useToast } from '@chakra-ui/toast'; import { useErrorHandler } from 'react-error-boundary'; -import { ProfilePageViewContext } from 'contexts'; +import { ProfilePageContext } from 'contexts'; import useIsMountedRef from 'hooks/useIsMountedRef'; type ConfirmEmailContainerPropsType = { @@ -16,7 +16,7 @@ type ConfirmEmailContainerPropsType = { const ConfirmEmailContainer: React.FC = ({ data }) => { const { userStore } = useRootStore(); - const { setStatusPageView } = useContext(ProfilePageViewContext); + const { setStatusPageView } = useContext(ProfilePageContext); const { sendConfirmationCode, loading } = useUpdateUserEmailQuery(); const [isVerifying, setIsVerifying] = useState(false); const [code, setCode] = useState(''); @@ -47,7 +47,7 @@ const ConfirmEmailContainer: React.FC = ({ data status: 'info', }); if (isMountedRef.current) { - setStatusPageView({ status: 'default' }); + setStatusPageView('default'); } } catch (error: any) { if (error.response) { @@ -76,7 +76,9 @@ const ConfirmEmailContainer: React.FC = ({ data handleError(error); } } finally { - setIsVerifying(false); + if (isMountedRef.current) { + setIsVerifying(false); + } } }; diff --git a/src/pages/profile/containers/MainContainer/MainContainer.tsx b/src/pages/profile/containers/MainContainer/MainContainer.tsx new file mode 100644 index 0000000..3944c7b --- /dev/null +++ b/src/pages/profile/containers/MainContainer/MainContainer.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import { Box, Heading, Flex, Avatar, Text, Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react'; + +/** + * Components + */ +import UserBadge from 'components/UserBadge'; +import UserAccountInfo from 'pages/profile/components/UserAccountInfo'; +import UpdateUserContactsForm from 'pages/profile/components/UpdateUserContactsForm'; +import CourseList from 'pages/profile/components/CourseList'; + +/** + * Hooks + */ +import { useRootStore } from 'hooks/useRootStore'; +import { useColorMode } from '@chakra-ui/color-mode'; + +const MainContainer: React.FC = () => { + const { + userStore: { me }, + } = useRootStore(); + const { colorMode } = useColorMode(); + + if (me === null) return null; + + return ( + + My account + Update you contacts information or password here. + + + + + + {me.fullname} + + + {me.email} + + + + + + + + + Account information + My contacts + {me.isStudent && Available courses} + + + + + + + + + {me.isStudent && ( + + + + )} + + + + + ); +}; + +export default MainContainer; diff --git a/src/pages/profile/containers/MainContainer/index.ts b/src/pages/profile/containers/MainContainer/index.ts new file mode 100644 index 0000000..416f536 --- /dev/null +++ b/src/pages/profile/containers/MainContainer/index.ts @@ -0,0 +1,3 @@ +import MainContainer from './MainContainer'; + +export default MainContainer; diff --git a/src/pages/profile/containers/UpdateEmailContainer/UpdateEmailContainer.tsx b/src/pages/profile/containers/UpdateEmailContainer/UpdateEmailContainer.tsx index a0dddda..7fe54fc 100644 --- a/src/pages/profile/containers/UpdateEmailContainer/UpdateEmailContainer.tsx +++ b/src/pages/profile/containers/UpdateEmailContainer/UpdateEmailContainer.tsx @@ -1,12 +1,12 @@ import { IconButton } from '@chakra-ui/button'; import { ChevronLeftIcon } from '@chakra-ui/icons'; import { Box, Flex, Heading, Text } from '@chakra-ui/layout'; -import { ProfilePageViewContext } from 'contexts'; +import { ProfilePageContext } from 'contexts'; import React, { useContext } from 'react'; import UpdateEmailForm from './UpdateEmailForm'; const UpdateEmailContainer: React.FC = () => { - const { setStatusPageView } = useContext(ProfilePageViewContext); + const { setStatusPageView } = useContext(ProfilePageContext); return ( @@ -15,7 +15,7 @@ const UpdateEmailContainer: React.FC = () => { aria-label='Back' borderRadius='full' icon={} - onClick={() => setStatusPageView({ status: 'default' })} + onClick={() => setStatusPageView('default')} mr='5' /> Edit email address diff --git a/src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.tsx b/src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.tsx index eddbf66..caabeac 100644 --- a/src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.tsx +++ b/src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.tsx @@ -3,7 +3,7 @@ import { FormControl, FormHelperText, FormLabel } from '@chakra-ui/form-control' import { Input } from '@chakra-ui/input'; import { Box, Stack } from '@chakra-ui/layout'; import { yupResolver } from '@hookform/resolvers/yup'; -import { ProfilePageViewContext } from 'contexts'; +import { ProfilePageContext } from 'contexts'; import { useRootStore } from 'hooks/useRootStore'; import useUpdateUserEmailQuery from 'hooks/useUpdateUserEmailQuery.ts'; import React, { useContext, useEffect, useState } from 'react'; @@ -19,7 +19,7 @@ type UpdateEmailInputType = { */ const UpdateEmailForm: React.FC = () => { const [email, setEmail] = useState(null); - const { setStatusPageView } = useContext(ProfilePageViewContext); + const { setStatusPageView, setPageData } = useContext(ProfilePageContext); const { userStore } = useRootStore(); const { sendConfirmationCode, loading, result } = useUpdateUserEmailQuery(); const { @@ -32,10 +32,8 @@ const UpdateEmailForm: React.FC = () => { useEffect(() => { if (email !== null && result !== null) { - setStatusPageView({ - status: 'confirm-email', - data: { confirmEmailData: { newEmail: email, expired_seconds: result.data.expired_seconds } }, - }); + setStatusPageView('confirm-email'); + setPageData({ confirmEmailData: { newEmail: email, expired_seconds: result.data.expired_seconds } }); } }); diff --git a/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx b/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx index 32f3c66..8c5e829 100644 --- a/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx +++ b/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx @@ -1,11 +1,11 @@ import React, { useContext } from 'react'; import { Box, Heading, Flex, Text, IconButton } from '@chakra-ui/react'; import { ChevronLeftIcon } from '@chakra-ui/icons'; -import { ProfilePageViewContext } from 'contexts'; +import { ProfilePageContext } from 'contexts'; import UpdatePasswordForm from './UpdatePasswordForm'; const UpdatePasswordContainer: React.FC = () => { - const { setStatusPageView } = useContext(ProfilePageViewContext); + const { setStatusPageView } = useContext(ProfilePageContext); return ( @@ -14,7 +14,7 @@ const UpdatePasswordContainer: React.FC = () => { aria-label='Back' borderRadius='full' icon={} - onClick={() => setStatusPageView({ status: 'default' })} + onClick={() => setStatusPageView('default')} mr='5' /> Update password diff --git a/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx b/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx index f4b9b96..454291a 100644 --- a/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx +++ b/src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx @@ -9,7 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup'; import UpdatePasswordSchema from './UpdatePasswordForm.validator'; import { useToast } from '@chakra-ui/toast'; import { useErrorHandler } from 'react-error-boundary'; -import { ProfilePageViewContext } from 'contexts'; +import { ProfilePageContext } from 'contexts'; import useIsMountedRef from 'hooks/useIsMountedRef'; type UpdatePasswordInputType = { @@ -22,7 +22,7 @@ type UpdatePasswordInputType = { * Update password using form */ const UpdatePasswordForm: React.FC = () => { - const { setStatusPageView } = useContext(ProfilePageViewContext); + const { setStatusPageView } = useContext(ProfilePageContext); const { userStore } = useRootStore(); const isMountedRef = useIsMountedRef(); const [loading, setLoading] = useState(false); @@ -45,7 +45,7 @@ const UpdatePasswordForm: React.FC = () => { await userStore.updateCurrentUserPassword(old_password, new_password); toast({ title: 'Password changed.', status: 'success' }); reset(); - setStatusPageView({ status: 'default' }); + 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 600fcc5..fe95c60 100644 --- a/src/pages/profile/index.tsx +++ b/src/pages/profile/index.tsx @@ -1,35 +1,15 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { observer } from 'mobx-react'; -import { - Box, - Heading, - Flex, - Avatar, - useColorMode, - Text, - Tabs, - TabList, - Tab, - TabPanels, - TabPanel, -} from '@chakra-ui/react'; -import { userHasRoles } from 'helpers'; /** * Types */ -import { ProfilePageStatusType } from 'types'; import { IPageProps } from 'interfaces'; -import { UserRoleEnum } from 'enums'; /** * Components */ -import CourseList from './components/CourseList'; -import UserBadge from 'components/UserBadge'; import LoadingPage from './components/LoadingPage'; -import UserAccountInfo from './components/UserAccountInfo'; -import UpdateUserContactsForm from './components/UpdateUserContactsForm'; /** * Containers @@ -47,15 +27,22 @@ import { useHistory } from 'react-router-dom'; /** * Contexts */ -import { ProfilePageViewContext } from 'contexts'; +import { ProfilePageContext } from 'contexts'; + +/** + * Providers + */ +import { ProfilePageContextProvider } from 'providers'; +import MainContainer from './containers/MainContainer'; /** * Profile page */ const ProfilePage: React.FC = () => { - const [statusPageView, setStatusPageView] = useState({ status: 'default' }); - const { colorMode } = useColorMode(); - const { userStore, authStore } = useRootStore(); + const { + userStore: { me }, + authStore, + } = useRootStore(); const history = useHistory(); useEffect(() => { @@ -64,101 +51,29 @@ const ProfilePage: React.FC = () => { } }); - if (userStore.me === null) { + if (me === null) { return ; } - const isStudent = userHasRoles(userStore.me.roles, [UserRoleEnum.STUDENT]); - return ( - - {statusPageView.status === 'default' && ( - - My account - Update you contacts information or password here. - - - - - - {userStore.me.fullname} - - - {userStore.me.email} - - - - - - - - - Account information - My contacts - {isStudent && Available courses} - - - - - - - - - {isStudent && ( - - - - )} - - - - - )} - {statusPageView.status === 'update-password' && } - {statusPageView.status === 'update-email' && } - {statusPageView.status === 'confirm-email' && statusPageView.data?.confirmEmailData && ( - - )} - + + + {({ statusPageView, pageData }) => { + switch (statusPageView) { + case 'default': + return ; + case 'update-password': + return ; + case 'update-email': + return ; + case 'confirm-email': + return pageData.confirmEmailData && ; + default: + return null; + } + }} + + ); }; diff --git a/src/pages/users/components/UpdateUserForm/UpdateUserForm.tsx b/src/pages/users/components/EditUserForm/EditUserForm.tsx similarity index 100% rename from src/pages/users/components/UpdateUserForm/UpdateUserForm.tsx rename to src/pages/users/components/EditUserForm/EditUserForm.tsx diff --git a/src/pages/users/components/UpdateUserForm/UpdateUserForm.validator.ts b/src/pages/users/components/EditUserForm/EditUserForm.validator.ts similarity index 100% rename from src/pages/users/components/UpdateUserForm/UpdateUserForm.validator.ts rename to src/pages/users/components/EditUserForm/EditUserForm.validator.ts diff --git a/src/pages/users/components/EditUserForm/index.ts b/src/pages/users/components/EditUserForm/index.ts new file mode 100644 index 0000000..4b02fdc --- /dev/null +++ b/src/pages/users/components/EditUserForm/index.ts @@ -0,0 +1,3 @@ +import EditUserForm from './EditUserForm'; + +export default EditUserForm; diff --git a/src/pages/users/components/UpdateUserForm/index.ts b/src/pages/users/components/UpdateUserForm/index.ts deleted file mode 100644 index 2d56e2f..0000000 --- a/src/pages/users/components/UpdateUserForm/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import UpdateUserForm from './UpdateUserForm'; - -export default UpdateUserForm; diff --git a/src/pages/users/components/UserList/UserList.tsx b/src/pages/users/components/UserList/UserList.tsx index 71b217c..b25ae40 100644 --- a/src/pages/users/components/UserList/UserList.tsx +++ b/src/pages/users/components/UserList/UserList.tsx @@ -4,7 +4,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'; import { Flex, Box, Stack, Text } from '@chakra-ui/layout'; import { Button } from '@chakra-ui/button'; import UserItem from './UserItem'; -import UpdateUserForm from '../UpdateUserForm'; +import EditUserForm from '../EditUserForm'; /** * Types @@ -20,7 +20,7 @@ import { UsersPageContext } from 'contexts'; /** * Hooks */ -import { useContext, useState } from 'react'; +import { useContext } from 'react'; import { useRootStore } from 'hooks/useRootStore'; import { useDisclosure } from '@chakra-ui/hooks'; import { useErrorHandler } from 'react-error-boundary'; @@ -29,8 +29,8 @@ type UserListPropsType = { users: IUser[]; pagination: IPaginationMeta }; const UserList: React.FC = ({ users, pagination }) => { const { userStore } = useRootStore(); - const [editingUser, setEditingUser] = useState(undefined); - const { searchingRole, loading, setLoading, search } = useContext(UsersPageContext); + const { searchingRole, loading, setLoading, search, editingUser, setEditingUser } = + useContext(UsersPageContext); const handleError = useErrorHandler(); const pagesCount = Math.ceil(pagination.total / pagination.per_page); const { onOpen: onOpenEditModal, onClose: onCloseEditModal, isOpen: isOpenEditModal } = useDisclosure(); @@ -86,7 +86,7 @@ const UserList: React.FC = ({ users, pagination }) => { <> {pagination.total !== 0 ? ( <> - {editingUser && } + {editingUser && } Total: ({pagination.total}) diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx index 7e450e3..aeadb6b 100644 --- a/src/pages/users/index.tsx +++ b/src/pages/users/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { observer } from 'mobx-react'; import { Box, Flex, Button, Heading, Text } from '@chakra-ui/react'; import { FaFileExcel } from 'react-icons/fa'; @@ -7,7 +7,6 @@ import { FaFileExcel } from 'react-icons/fa'; * Types */ import { IPageProps } from 'interfaces'; -import { SearchingRoleStateType } from 'types'; /** * Components @@ -26,17 +25,14 @@ import { useLocation } from 'react-router'; /** * Context */ -import { UsersPageContext } from 'contexts'; import CreateUserForm from './components/CreateUserForm'; +import { UsersPageContextProvider } from 'providers'; /** * Users Page */ -const UsersPage: React.FC = ({ title }) => { +const UsersPage: React.FC = () => { const { userStore } = useRootStore(); - const [searchingRole, setSearchingRole] = useState(undefined); - const [loading, setLoading] = useState(false); - const [search, setSearch] = useState(undefined); const handleError = useErrorHandler(); const location = useLocation(); @@ -45,7 +41,7 @@ const UsersPage: React.FC = ({ title }) => { }, [handleError, userStore, location.search]); return ( - + User management You can add or delete your users on this page. @@ -66,7 +62,7 @@ const UsersPage: React.FC = ({ title }) => { )} - + ); }; diff --git a/src/providers/index.tsx b/src/providers/index.tsx index 40d47bd..9b9f34f 100644 --- a/src/providers/index.tsx +++ b/src/providers/index.tsx @@ -1,12 +1,46 @@ -import React, { ReactNode } from 'react'; -import { StoreContext } from 'contexts'; +import React, { useState, ReactNode } from 'react'; +import { ProfilePageContext, StoreContext, UsersPageContext } from 'contexts'; +import { ProfilePageDataType, ProfilePageStatusType, SearchingRoleStateType } from 'types'; import RootStore from 'stores/RootStore'; +import { IUser } from 'interfaces'; /** - * Root store provider + * Root store context provider */ export const RootStoreProvider = ({ children }: { children: ReactNode }) => { const store = new RootStore(); return {children}; }; + +/** + * Profile page context provider + */ +export const ProfilePageContextProvider: React.FC = ({ children }) => { + const [statusPageView, setStatusPageView] = useState('default'); + const [pageData, setPageData] = useState({}); + + return ( + + {children} + + ); +}; + +/** + * Users page context provider + */ +export const UsersPageContextProvider: React.FC = ({ children }) => { + const [searchingRole, setSearchingRole] = useState(undefined); + const [loading, setLoading] = useState(false); + const [search, setSearch] = useState(undefined); + const [editingUser, setEditingUser] = useState(undefined); + + return ( + + {children} + + ); +}; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 23f2e0e..f9aad17 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -1,4 +1,5 @@ import { UserRoleEnum } from 'enums'; +import { IUser } from 'interfaces'; import React from 'react'; import { IconType } from 'react-icons/lib'; @@ -19,19 +20,25 @@ export type ConfirmEmailContainerDataType = { expired_seconds: number; }; -export type ProfilePageStatusType = { - status: 'update-password' | 'update-email' | 'confirm-email' | 'default'; - data?: { - /** - * The field that is set when trying to change the mail address through form - */ - confirmEmailData?: ConfirmEmailContainerDataType; - }; +export type ProfilePageStatusType = 'update-password' | 'update-email' | 'confirm-email' | 'default'; +export type ProfilePageDataType = { + /** + * The field that is set when trying to change the mail address through form + */ + confirmEmailData?: ConfirmEmailContainerDataType; }; - export type ProfilePageViewStatusContextType = { - statusPageView: ProfilePageStatusType['status']; + /** + * Render current container by status + */ + statusPageView: ProfilePageStatusType; setStatusPageView: React.Dispatch>; + + /** + * Some data for other components + */ + pageData: ProfilePageDataType; + setPageData: React.Dispatch>; }; export type SearchingRoleStateType = UserRoleEnum | 'any' | undefined; @@ -53,4 +60,10 @@ export type UsersPageContextType = { */ search: string | undefined; setSearch: React.Dispatch>; + + /** + * Set editing user state when press on action button + */ + editingUser: IUser | undefined; + setEditingUser: React.Dispatch>; };