From 248e57e5488644ca2501552ab439e2894781eb24 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 13 Sep 2021 18:19:03 +0300
Subject: [PATCH] feat: added Loading component

---
 src/components/Layout/Layout.tsx              | 26 +++++---
 src/components/LoadingPage/LoadingPage.tsx    | 17 ++++++
 src/components/LoadingPage/index.ts           |  3 +
 src/components/Nav/Mobile/index.tsx           | 60 +++++++++----------
 .../components/CourseList/CourseList.tsx      | 12 +++-
 5 files changed, 78 insertions(+), 40 deletions(-)
 create mode 100644 src/components/LoadingPage/LoadingPage.tsx
 create mode 100644 src/components/LoadingPage/index.ts

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 2f4a90b..e4a7dbc 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,19 +1,31 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
+import { Redirect } from 'react-router';
 import { useErrorHandler } from 'react-error-boundary';
+import { userContainRoles } from 'helpers';
 import { Flex, Box } from '@chakra-ui/react';
-import { useRootStore } from 'hooks/useRootStore';
+
+/**
+ * Types
+ */
+import { UserRoleEnum } from 'enums';
+
+/**
+ * Components
+ */
+import LoadingPage from 'components/LoadingPage';
 import Header from 'components/Header';
 import NavDesktop from 'components/Nav/Desktop';
-import { UserRoleEnum } from 'enums';
-import { userContainRoles } from 'helpers';
-import { Redirect } from 'react-router';
+
+/**
+ * Hooks
+ */
+import { useRootStore } from 'hooks/useRootStore';
 
 type LayoutPropsType = { roles: UserRoleEnum[] | undefined };
 
 /**
- * Layout component
- * Сomponent for rendering the current page.
+ * Render the current page using layout
  */
 const Layout: React.FC<LayoutPropsType> = ({ children, roles }) => {
   const { userStore } = useRootStore();
@@ -53,7 +65,7 @@ const Layout: React.FC<LayoutPropsType> = ({ children, roles }) => {
              */
             if (roles) {
               const { me } = userStore;
-              if (me === null) return null;
+              if (me === null) return <LoadingPage />;
 
               /**
                * The user does not have the required roles
diff --git a/src/components/LoadingPage/LoadingPage.tsx b/src/components/LoadingPage/LoadingPage.tsx
new file mode 100644
index 0000000..2434480
--- /dev/null
+++ b/src/components/LoadingPage/LoadingPage.tsx
@@ -0,0 +1,17 @@
+import { Flex, Box, Spinner, Text } from '@chakra-ui/react';
+import React from 'react';
+
+const LoadingPage: React.FC = () => {
+  return (
+    <Flex justifyContent='center' mt='20' maxW='950px'>
+      <Box mt='auto' mb='auto' textAlign='center'>
+        <Spinner thickness='4px' speed='0.55s' emptyColor='gray.200' color='blue.500' size='xl' />
+        <Text mt='2' color='gray.500' userSelect='none'>
+          Loading...
+        </Text>
+      </Box>
+    </Flex>
+  );
+};
+
+export default LoadingPage;
diff --git a/src/components/LoadingPage/index.ts b/src/components/LoadingPage/index.ts
new file mode 100644
index 0000000..f661969
--- /dev/null
+++ b/src/components/LoadingPage/index.ts
@@ -0,0 +1,3 @@
+import LoadingPage from './LoadingPage';
+
+export default LoadingPage;
diff --git a/src/components/Nav/Mobile/index.tsx b/src/components/Nav/Mobile/index.tsx
index 74c657d..ec713aa 100644
--- a/src/components/Nav/Mobile/index.tsx
+++ b/src/components/Nav/Mobile/index.tsx
@@ -13,7 +13,9 @@ import config from 'config';
 import useLogoutQuery from 'hooks/useLogoutQuery';
 
 const NavMobile: React.FC = () => {
-  const { userStore } = useRootStore();
+  const {
+    userStore: { me },
+  } = useRootStore();
   const { colorMode } = useColorMode();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { logout } = useLogoutQuery();
@@ -29,38 +31,32 @@ const NavMobile: React.FC = () => {
               <Flex as='nav' flexDirection='column' alignItems='flex-start' textDecoration='none' mb='20px'>
                 <NavList links={config.links} onCloseDrawer={onClose} />
               </Flex>
-              {userStore.me ? (
-                <Box pb='10px'>
-                  <Box
-                    minHeight='60px'
-                    padding='10px'
-                    borderRadius='md'
-                    marginTop='auto'
-                    backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'}
-                  >
-                    <Flex alignItems='center'>
-                      <Avatar size='sm' name={`${userStore.me.first_name} ${userStore.me.last_name}`} marginRight={3} />
-                      <Flex flexDirection='column'>
-                        <Text as='span' mr={2} lineHeight='1.2'>
-                          {`${userStore.me.first_name} ${userStore.me.last_name}`}
-                        </Text>
-                        <Link
-                          to={`/profile`}
-                          style={{ fontSize: '13px', textDecoration: 'underline' }}
-                          onClick={onClose}
-                        >
-                          View profile
-                        </Link>
-                      </Flex>
-                      <IconButton
-                        onClick={logout}
-                        aria-label='Logout'
-                        backgroundColor={colorMode === 'dark' ? 'gray.600' : 'gray.200'}
-                        marginLeft='auto'
-                        icon={<MdExitToApp />}
-                      />
+              {me !== null ? (
+                <Box
+                  minHeight='60px'
+                  padding='10px'
+                  borderRadius='md'
+                  marginTop='auto'
+                  backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'}
+                >
+                  <Flex alignItems='center'>
+                    <Avatar size='sm' name={me.fullname} marginRight={3} />
+                    <Flex flexDirection='column'>
+                      <Text as='span' mr={2} lineHeight='1.2'>
+                        {me.fullname}
+                      </Text>
+                      <Link to={`/profile`} style={{ fontSize: '13px', textDecoration: 'underline' }} onClick={onClose}>
+                        View profile
+                      </Link>
                     </Flex>
-                  </Box>
+                    <IconButton
+                      onClick={logout}
+                      aria-label='Logout'
+                      backgroundColor={colorMode === 'dark' ? 'gray.600' : 'gray.200'}
+                      marginLeft='auto'
+                      icon={<MdExitToApp />}
+                    />
+                  </Flex>
                 </Box>
               ) : (
                 <Skeleton
diff --git a/src/pages/profile/components/CourseList/CourseList.tsx b/src/pages/profile/components/CourseList/CourseList.tsx
index 850c4a2..25b7e22 100644
--- a/src/pages/profile/components/CourseList/CourseList.tsx
+++ b/src/pages/profile/components/CourseList/CourseList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { IUser } from 'interfaces';
-import { Stack, StackDivider } from '@chakra-ui/layout';
+import { Box, Text, Stack, StackDivider } from '@chakra-ui/layout';
 import CourseItem from './CourseItem';
 
 type CourseListPropsType = {
@@ -16,6 +16,16 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses }) => {
     return null;
   }
 
+  if (courses.length === 0) {
+    return (
+      <Box textAlign='center' mt='10'>
+        <Text color='gray.500' userSelect='none'>
+          You are not a member of any course
+        </Text>
+      </Box>
+    );
+  }
+
   return (
     <Stack spacing='8' divider={<StackDivider />}>
       {courses.map(course => (