feat: fetch user hook

src/hooks/queries/user/useFetchUser.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import useAsync from '@educt/hooks/useAsync';
+import { IUser } from '@educt/interfaces';
+import { UserServiceInstance } from '@educt/services';
+
+const useFetchUser = (id: string) => {
+  const fetch = async (id: string) => {
+    try {
+      const { data } = await UserServiceInstance.fetchUserById(id);
+      return data;
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  };
+
+  const { execute: fetchUserById, ...state } = useAsync<IUser, Parameters<typeof fetch>>(fetch);
+
+  useEffect(() => {
+    fetchUserById(id);
+  }, []);
+
+  return { ...state };
+};
+
+export { useFetchUser };

src/pages/user/user.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { PageContent, PageWrapper } from '@educt/components/PageElements';
+import { IPageProps } from '@educt/interfaces';
+import { useFetchUser } from '@educt/hooks/queries/user/useFetchUser';
+import { Redirect, useParams } from 'react-router-dom';
+import LoadingPage from '@educt/components/LoadingPage';
+import {
+  Box,
+  Button,
+  Flex,
+  Avatar,
+  Text,
+  Heading,
+  useColorModeValue,
+  Icon,
+  AvatarBadge,
+  Divider,
+} from '@chakra-ui/react';
+import { MdOutlineMessage } from 'react-icons/md';
+import UserBadge from '@educt/components/UserBadge';
+import { CalendarIcon, RepeatClockIcon } from '@chakra-ui/icons';
+
+const UserPage: React.FC<IPageProps> = () => {
+  const { id } = useParams<{ id: string }>();
+  const { data: user, error, isLoading } = useFetchUser(id);
+  const color = useColorModeValue('#E2E8F0', '#2D3748');
+
+  if (error?.response?.status === 404) return <Redirect to='/404' />;
+
+  if (user === null || isLoading) return <LoadingPage />;
+
+  return (
+    <PageWrapper maxW='800px'>
+      <PageContent>
+        <Flex>
+          <Flex flexDir={'column'} alignItems={'center'}>
+            <Avatar border={`4px solid ${color}`} borderColor={color} name={user.fullname} size='2xl'>
+              <AvatarBadge boxSize='0.75em' bg='green.500' />
+            </Avatar>
+            <Button mt='5' variant={'outline'} size={'sm'} leftIcon={<MdOutlineMessage />}>
+              Message
+            </Button>
+          </Flex>
+          <Box ml='10'>
+            <Flex>
+              <Heading as='h2' fontSize={'xl'} fontWeight={'bold'}>
+                {user.fullname}&nbsp;&bull;&nbsp;
+              </Heading>
+              <Box>
+                <UserBadge roles={user.roles} />
+              </Box>
+            </Flex>
+            <Flex my={'3'}>
+              <Flex>
+                <Flex alignItems={'center'} mr='5'>
+                  <Icon as={CalendarIcon} color='gray.500' />
+                  <Text fontWeight={'medium'} fontSize={'sm'} color='gray.500' ml='1'>
+                    Registered: {new Date(user.created_at).toLocaleDateString()}
+                  </Text>
+                </Flex>
+                <Flex alignItems={'center'} mr='5'>
+                  <Icon as={RepeatClockIcon} color='gray.500' />
+                  <Text fontWeight={'medium'} fontSize={'sm'} color='gray.500' ml='1'>
+                    Last login: 3 min ago
+                  </Text>
+                </Flex>
+              </Flex>
+            </Flex>
+            <Divider my='3' />
+            <Box>
+              <Text fontSize={'sm'}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. A quibusdam sapiente quisquam vero harum ipsam
+                officiis rerum. Cum, excepturi nulla.
+              </Text>
+            </Box>
+          </Box>
+        </Flex>
+      </PageContent>
+    </PageWrapper>
+  );
+};
+
+export default UserPage;

src/routes.config.ts

@@ -14,6 +14,7 @@ import CoursePage from '@educt/pages/course/course';
 import EditCoursePage from '@educt/pages/courses/edit/edit';
 import ChangePasswordPage from '@educt/pages/profile/change-password/change-password';
 import ChangeEmailPage from '@educt/pages/profile/change-email/change-email';
+import UserPage from './pages/user/user';
 import { UserRoleEnum } from './enums';
 const CoursesPage = lazy(() => import('@educt/pages/courses/courses'));
 const LessonPage = lazy(() => import('@educt/pages/lesson/lesson'));
@@ -126,6 +127,13 @@ export const routes: IRouteOption[] = [
     isPrivate: true,
     roles: [UserRoleEnum.ADMIN, UserRoleEnum.TEACHER],
   },
+  {
+    path: '/user/:id',
+    title: 'User',
+    component: UserPage,
+    isPrivate: true,
+    exact: true,
+  },
   {
     path: '/auth',
     title: 'Auth',

src/services/UserService.ts

@@ -45,6 +45,17 @@ class UserService {
     return result.data;
   }
 
+  /**
+   * Fetch user by id
+   *
+   * @param id User id
+   * @returns Users
+   */
+  public async fetchUserById(id: string): Promise<IApiRespose<IUser>> {
+    const result = await this.api.get(`/v1/users/${id}`);
+    return result.data;
+  }
+
   /**
    * Create new user
    *