refactor: user rendering

src/pages/users/components/UserList/UserItem.tsx

@@ -21,7 +21,7 @@ import UserBadge from '@educt/components/UserBadge';
 import { useRootStore } from '@educt/hooks/useRootStore';
 import { useColorModeValue } from '@chakra-ui/react';
 
-type UserItemPropsType = {
+export type UserItemPropsType = {
   user: IUser;
   onEdit: (user: IUser) => void;
   onDelete: (user: IUser) => void;

src/pages/users/components/UserList/UserList.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
 import { Flex, Box, Stack, Text } from '@chakra-ui/layout';
 import { Button } from '@chakra-ui/button';
@@ -6,15 +7,15 @@ import { Button } from '@chakra-ui/button';
 /**
  * Components
  */
-import UserItem from './UserItem';
 import EditUserForm from '../EditUserForm';
 import DeleteUserDialog from '../DeleteUserDialog';
 
 /**
  * Types
  */
-import { IPaginationMeta, IUser } from '@educt/interfaces';
-import { UsersPageContextType } from '@educt/types';
+import type { IUser } from '@educt/interfaces';
+import type { UsersPageContextType } from '@educt/types';
+import type { UserItemPropsType } from './UserItem';
 
 /**
  * Contexts
@@ -24,21 +25,31 @@ import { UsersPageContext } from '@educt/contexts';
 /**
  * Hooks
  */
-import { useContext } from 'react';
+import { useEffect, useContext } from 'react';
+import { useLocation } from 'react-router';
+import { useErrorHandler } from 'react-error-boundary';
 import { useRootStore } from '@educt/hooks/useRootStore';
 import { useDisclosure } from '@chakra-ui/hooks';
-import { useErrorHandler } from 'react-error-boundary';
 
-type UserListPropsType = { users: IUser[]; pagination: IPaginationMeta };
+type UserListPropsType = { render: React.FC<UserItemPropsType> };
 
-const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
+const UserList: React.FC<UserListPropsType> = ({ render: Item }) => {
   const { userStore } = useRootStore();
   const { searchingRole, loading, setLoading, search, editingUser, setEditingUser, deletingUser, setDeletingUser } =
     useContext<UsersPageContextType>(UsersPageContext);
+  const location = useLocation();
   const handleError = useErrorHandler();
-  const pagesCount = Math.ceil(pagination.total / pagination.per_page);
   const { onOpen: onOpenEditModal, onClose: onCloseEditModal, isOpen: isOpenEditModal } = useDisclosure();
   const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
+  const { users, pagination } = userStore;
+
+  useEffect(() => {
+    userStore.loadUsersData().catch(error => handleError(error));
+  }, [handleError, userStore, location.search]);
+
+  if (pagination === undefined || users === null) return <div>Loading users...</div>;
+
+  const pagesCount = Math.ceil(pagination.total / pagination.per_page);
 
   /**
    * Handle next page
@@ -96,9 +107,14 @@ const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
     onOpenDeleteDialog();
   };
 
+  if (pagination.total === 0)
+    return (
+      <Box textAlign='center' mt='10' userSelect='none'>
+        <Text color='gray.500'>Cannot find any users.</Text>
+      </Box>
+    );
+
   return (
-    <>
-      {pagination.total !== 0 ? (
     <>
       {editingUser && <EditUserForm onClose={onCloseEditModal} isOpen={isOpenEditModal} />}
       {deletingUser && <DeleteUserDialog onClose={onCloseDeleteDialog} isOpen={isOpenDeleteDialog} />}
@@ -114,7 +130,7 @@ const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
         ) : (
           <Stack mt='4' spacing='2'>
             {users.map(user => (
-                  <UserItem key={user.id} user={user} onEdit={onEditUser} onDelete={onDeleteUser} />
+              <Item key={user.id} user={user} onEdit={onEditUser} onDelete={onDeleteUser} />
             ))}
           </Stack>
         )}
@@ -143,13 +159,7 @@ const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
         </Flex>
       </Flex>
     </>
-      ) : (
-        <Box textAlign='center' mt='10' userSelect='none'>
-          <Text color='gray.500'>Cannot find any users.</Text>
-        </Box>
-      )}
-    </>
   );
 };
 
-export default UserList;
+export default observer(UserList);

src/pages/users/components/UserSearch/UserSearch.tsx

@@ -6,6 +6,7 @@ import { UserRoleEnum } from '@educt/enums';
 import { useErrorHandler } from 'react-error-boundary';
 import { UsersPageContext } from '@educt/contexts';
 import { UsersPageContextType } from '@educt/types';
+import { observer } from 'mobx-react';
 
 type SelectRoleStateType = UserRoleEnum | 'any';
 
@@ -70,4 +71,4 @@ const UserSearch: React.FC = () => {
   );
 };
 
-export default UserSearch;
+export default observer(UserSearch);

src/pages/users/users.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { observer } from 'mobx-react';
+import React from 'react';
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
 
 /**
@@ -10,56 +9,49 @@ import { IPageProps } from '@educt/interfaces';
 /**
  * Components
  */
+import LoadingPage from '@educt/components/LoadingPage';
 import UserSearch from './components/UserSearch';
 import UserList from './components/UserList';
-import LoadingPage from './components/LoadingPage';
+import UserItem from './components/UserList/UserItem';
+import CreateUserForm from './components/CreateUserForm';
 
 /**
  * Hooks
  */
 import { useRootStore } from '@educt/hooks/useRootStore';
-import { useErrorHandler } from 'react-error-boundary';
-import { useLocation } from 'react-router';
 
 /**
  * Context
  */
-import CreateUserForm from './components/CreateUserForm';
 import { UsersPageContextProvider } from '@educt/providers';
 
 /**
  * Users Page
  */
 const UsersPage: React.FC<IPageProps> = () => {
-  const { userStore } = useRootStore();
-  const handleError = useErrorHandler();
-  const location = useLocation();
+  const {
+    userStore: { me },
+  } = useRootStore();
 
-  useEffect(() => {
-    userStore.loadUsersData().catch(error => handleError(error));
-  }, [handleError, userStore, location.search]);
+  if (me === null) return <LoadingPage />;
 
   return (
     <UsersPageContextProvider>
       <Box h='100%'>
         <Heading as='h1'>User management</Heading>
         <Text mt='2'>You can add or delete users on this page.</Text>
-        {userStore.users !== null && userStore.me !== null && userStore.pagination !== undefined ? (
         <Flex mt='5' flexDir='column' h='full'>
           <Flex justifyContent='space-between' sx={{ gap: '10px' }} flexWrap='wrap'>
             <UserSearch />
             <Flex sx={{ gap: '10px' }}>
-                <CreateUserForm me={userStore.me} />
+              <CreateUserForm me={me} />
             </Flex>
           </Flex>
-            <UserList users={userStore.users} pagination={userStore.pagination} />
+          <UserList render={UserItem} />
         </Flex>
-        ) : (
-          <LoadingPage />
-        )}
       </Box>
     </UsersPageContextProvider>
   );
 };
 
-export default observer(UsersPage);
+export default UsersPage;