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,60 +107,59 @@ 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} />}
-          <Box>
-            <Flex mt='7' p='0 10px' fontWeight='bold' alignItems='center' justifyContent='space-between'>
-              <Text>Total: ({pagination.total})</Text>
-              <Text>Actions</Text>
-            </Flex>
-            {loading ? (
-              <Box textAlign='center' mt='10' userSelect='none'>
-                <Text color='gray.500'>Wait a second...</Text>
-              </Box>
-            ) : (
-              <Stack mt='4' spacing='2'>
-                {users.map(user => (
-                  <UserItem key={user.id} user={user} onEdit={onEditUser} onDelete={onDeleteUser} />
-                ))}
-              </Stack>
-            )}
+      {editingUser && <EditUserForm onClose={onCloseEditModal} isOpen={isOpenEditModal} />}
+      {deletingUser && <DeleteUserDialog onClose={onCloseDeleteDialog} isOpen={isOpenDeleteDialog} />}
+      <Box>
+        <Flex mt='7' p='0 10px' fontWeight='bold' alignItems='center' justifyContent='space-between'>
+          <Text>Total: ({pagination.total})</Text>
+          <Text>Actions</Text>
+        </Flex>
+        {loading ? (
+          <Box textAlign='center' mt='10' userSelect='none'>
+            <Text color='gray.500'>Wait a second...</Text>
           </Box>
-          <Flex margin='2rem 0' flexDirection={{ base: 'column', sm: 'column', md: 'row' }}>
-            <Box textAlign={{ base: 'center', sm: 'center', md: 'left' }} mb={{ base: '2', md: '0' }}>
-              Page <b>{pagination.current_page}</b> of {pagesCount}
-            </Box>
-            <Flex ml='auto' mr='auto' alignItems='center' sx={{ gap: '30px' }}>
-              <Button
-                onClick={prevPage}
-                disabled={pagination.current_page <= 1}
-                variant='link'
-                leftIcon={<ChevronLeftIcon />}
-              >
-                Previous page
-              </Button>
-              <Button
-                onClick={nextPage}
-                disabled={pagination.current_page === pagesCount}
-                variant='link'
-                rightIcon={<ChevronRightIcon />}
-              >
-                Next page
-              </Button>
-            </Flex>
-          </Flex>
-        </>
-      ) : (
-        <Box textAlign='center' mt='10' userSelect='none'>
-          <Text color='gray.500'>Cannot find any users.</Text>
+        ) : (
+          <Stack mt='4' spacing='2'>
+            {users.map(user => (
+              <Item key={user.id} user={user} onEdit={onEditUser} onDelete={onDeleteUser} />
+            ))}
+          </Stack>
+        )}
+      </Box>
+      <Flex margin='2rem 0' flexDirection={{ base: 'column', sm: 'column', md: 'row' }}>
+        <Box textAlign={{ base: 'center', sm: 'center', md: 'left' }} mb={{ base: '2', md: '0' }}>
+          Page <b>{pagination.current_page}</b> of {pagesCount}
         </Box>
-      )}
+        <Flex ml='auto' mr='auto' alignItems='center' sx={{ gap: '30px' }}>
+          <Button
+            onClick={prevPage}
+            disabled={pagination.current_page <= 1}
+            variant='link'
+            leftIcon={<ChevronLeftIcon />}
+          >
+            Previous page
+          </Button>
+          <Button
+            onClick={nextPage}
+            disabled={pagination.current_page === pagesCount}
+            variant='link'
+            rightIcon={<ChevronRightIcon />}
+          >
+            Next page
+          </Button>
+        </Flex>
+      </Flex>
     </>
   );
 };
 
-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} />
-              </Flex>
+        <Flex mt='5' flexDir='column' h='full'>
+          <Flex justifyContent='space-between' sx={{ gap: '10px' }} flexWrap='wrap'>
+            <UserSearch />
+            <Flex sx={{ gap: '10px' }}>
+              <CreateUserForm me={me} />
             </Flex>
-            <UserList users={userStore.users} pagination={userStore.pagination} />
           </Flex>
-        ) : (
-          <LoadingPage />
-        )}
+          <UserList render={UserItem} />
+        </Flex>
       </Box>
     </UsersPageContextProvider>
   );
 };
 
-export default observer(UsersPage);
+export default UsersPage;