From 82c90213896b86dc91162bc2ebcf80d700db1ff3 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sat, 30 Oct 2021 00:09:28 +0300 Subject: [PATCH] refactor: layout --- src/components/Layout/Layout.tsx | 10 ++-- src/components/LoadingPage/LoadingPage.tsx | 2 +- src/components/Nav/Desktop/index.tsx | 12 ++++- src/components/Nav/Mobile/index.tsx | 17 +++++-- src/components/Nav/NavLink.tsx | 6 ++- src/components/Nav/NavList.tsx | 14 ++++- src/pages/auth/auth.tsx | 3 ++ .../auth/components/AuthForm/AuthForm.tsx | 20 +++++++- .../components/CategoryList/CategoryItem.tsx | 11 ++-- .../components/CategoryList/CategoryList.tsx | 31 ++++++++--- .../components/CourseList/CourseItem.tsx | 29 ++++------- .../components/CourseList/CourseList.tsx | 22 +++----- .../CourseStatusTabs/CourseStatusTabs.tsx | 7 ++- src/pages/courses/courses.tsx | 8 ++- .../components/CourseList/CourseItem.tsx | 31 +++++++---- .../components/CourseList/CourseList.tsx | 18 ++++--- .../UpdateUserContactsForm.tsx | 7 +-- .../UserAccountInfo/UserAccountInfo.tsx | 22 +++++--- .../MainContainer/MainContainer.tsx | 51 +++++-------------- src/pages/profile/profile.tsx | 3 +- .../users/components/UserList/UserList.tsx | 2 +- 21 files changed, 198 insertions(+), 128 deletions(-) diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index eb89150..4585475 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -1,4 +1,4 @@ -import React, { Suspense, useEffect } from 'react'; +import React, { Suspense } from 'react'; import { observer } from 'mobx-react'; import { Redirect } from 'react-router'; import { useErrorHandler } from 'react-error-boundary'; @@ -20,6 +20,7 @@ import NavDesktop from '@educt/components/Nav/Desktop'; /** * Hooks */ +import { useEffect } from 'react'; import { useRootStore } from '@educt/hooks/useRootStore'; type LayoutPropsType = { roles: UserRoleEnum[] | undefined }; @@ -31,6 +32,9 @@ const Layout: React.FC = ({ children, roles }) => { const { userStore } = useRootStore(); const handleError = useErrorHandler(); + /** + * Fetch authorized user handler + */ useEffect(() => { userStore.loadCurrentUserData().catch(error => handleError(error)); }, [handleError, userStore]); @@ -38,8 +42,8 @@ const Layout: React.FC = ({ children, roles }) => { return ( <>
- - + + { return ( - + diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx index 38700ba..24c2762 100644 --- a/src/components/Nav/Desktop/index.tsx +++ b/src/components/Nav/Desktop/index.tsx @@ -1,10 +1,18 @@ -import config from '@educt/config'; import React from 'react'; import { observer } from 'mobx-react'; import { Flex, Box, useColorMode } from '@chakra-ui/react'; -import { useRootStore } from '@educt/hooks/useRootStore'; +import config from '@educt/config'; + +/** + * Components + */ import NavList from '../NavList'; +/** + * Hooks + */ +import { useRootStore } from '@educt/hooks/useRootStore'; + /** * * Nav component diff --git a/src/components/Nav/Mobile/index.tsx b/src/components/Nav/Mobile/index.tsx index 0f87860..2c82c02 100644 --- a/src/components/Nav/Mobile/index.tsx +++ b/src/components/Nav/Mobile/index.tsx @@ -1,16 +1,25 @@ import React from 'react'; import { observer } from 'mobx-react'; -import { MdExitToApp } from 'react-icons/md'; import { Link } from 'react-router-dom'; -import { useRootStore } from '@educt/hooks/useRootStore'; +import { IconButton, Skeleton } from '@chakra-ui/react'; import { Avatar } from '@chakra-ui/avatar'; import { Flex, Box, Text } from '@chakra-ui/layout'; import { Drawer, DrawerOverlay, DrawerContent, DrawerBody } from '@chakra-ui/modal'; +import { MdExitToApp } from 'react-icons/md'; import { HamburgerIcon } from '@chakra-ui/icons'; -import { useDisclosure, IconButton, useColorMode, Skeleton } from '@chakra-ui/react'; -import NavList from '../NavList'; import config from '@educt/config'; + +/** + * Components + */ +import NavList from '../NavList'; + +/** + * Hooks + */ import useLogoutQuery from '@educt/hooks/useLogoutQuery'; +import { useRootStore } from '@educt/hooks/useRootStore'; +import { useColorMode, useDisclosure } from '@chakra-ui/react'; const NavMobile: React.FC = () => { const { diff --git a/src/components/Nav/NavLink.tsx b/src/components/Nav/NavLink.tsx index 8d8041b..1b1957f 100644 --- a/src/components/Nav/NavLink.tsx +++ b/src/components/Nav/NavLink.tsx @@ -1,9 +1,13 @@ import React from 'react'; import { observer } from 'mobx-react'; +import { userContainRoles } from '@educt/helpers'; import { Box, useColorMode } from '@chakra-ui/react'; import type { LinkType } from '@educt/types'; + +/** + * Hooks + */ import { useRootStore } from '@educt/hooks/useRootStore'; -import { userContainRoles } from '@educt/helpers'; type NavLinkPropsType = { link: LinkType; diff --git a/src/components/Nav/NavList.tsx b/src/components/Nav/NavList.tsx index 0e4984a..b7e18a7 100644 --- a/src/components/Nav/NavList.tsx +++ b/src/components/Nav/NavList.tsx @@ -1,9 +1,21 @@ import React, { useCallback } from 'react'; import { observer } from 'mobx-react'; -import { useHistory } from 'react-router-dom'; + +/** + * Types + */ import { LinkType } from '@educt/types'; + +/** + * Components + */ import NavLink from './NavLink'; +/** + * Hooks + */ +import { useHistory } from 'react-router-dom'; + type NavListPropsType = { links: LinkType[]; onCloseDrawer?: () => void; diff --git a/src/pages/auth/auth.tsx b/src/pages/auth/auth.tsx index e422311..e402a3d 100644 --- a/src/pages/auth/auth.tsx +++ b/src/pages/auth/auth.tsx @@ -14,6 +14,9 @@ import AuthForm from './components/AuthForm'; const AuthPage: React.FC = () => { const { authStore } = useRootStore(); + /** + * User already authorized + */ if (authStore.isLoggedIn) { return ; } diff --git a/src/pages/auth/components/AuthForm/AuthForm.tsx b/src/pages/auth/components/AuthForm/AuthForm.tsx index 7b50fe8..414c1fc 100644 --- a/src/pages/auth/components/AuthForm/AuthForm.tsx +++ b/src/pages/auth/components/AuthForm/AuthForm.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { MdAccountCircle, MdSchool, MdVpnKey } from 'react-icons/md'; import { FormControl, FormLabel, @@ -12,9 +11,23 @@ import { Flex, Box, } from '@chakra-ui/react'; -import { SubmitHandler, useForm } from 'react-hook-form'; +import { MdAccountCircle, MdSchool, MdVpnKey } from 'react-icons/md'; import { yupResolver } from '@hookform/resolvers/yup'; + +/** + * Types + */ +import type { SubmitHandler } from 'react-hook-form'; + +/** + * Hooks + */ +import { useForm } from 'react-hook-form'; import useLoginQuery from '@educt/hooks/useLoginQuery'; + +/** + * Schema + */ import LoginSchema from './AuthForm.validator'; type AuthInputType = { @@ -33,6 +46,9 @@ const AuthForm: React.FC = () => { }); const { login, loading } = useLoginQuery(); + /** + * Login handler + */ const onSubmit: SubmitHandler = data => { login(data.login, data.password).finally(() => reset()); }; diff --git a/src/pages/courses/components/CategoryList/CategoryItem.tsx b/src/pages/courses/components/CategoryList/CategoryItem.tsx index 4054224..34bfcc0 100644 --- a/src/pages/courses/components/CategoryList/CategoryItem.tsx +++ b/src/pages/courses/components/CategoryList/CategoryItem.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React from 'react'; import { Tag, TagLabel } from '@chakra-ui/react'; /** @@ -11,6 +11,11 @@ import { ICategory } from '@educt/interfaces'; */ import { CoursesPageContext } from '@educt/contexts'; +/** + * Hooks + */ +import { useContext } from 'react'; + type CategoryItemProps = { category: ICategory; }; @@ -21,9 +26,7 @@ const CategoryItem: React.FC = ({ category }) => { /** * Handle click on change category */ - const onCategoryChange = () => { - setSelectedCategory(category); - }; + const onCategoryChange = () => setSelectedCategory(category); return ( = ({ categories, isLoading } const { selectedCategory, setSelectedCategory } = useContext(CoursesPageContext); const handleError = useErrorHandler(); + /** + * Fetch handler + */ useEffect(() => { categoryStore.loadCategories().catch(error => handleError(error)); }, [categoryStore, handleError]); @@ -42,9 +58,10 @@ const CategoryList: React.FC = ({ categories, isLoading } > All categories - {categories.map((category, i) => { - return ; - })} + {/* Render items */} + {categories.map((category, i) => ( + + ))} ); diff --git a/src/pages/courses/components/CourseList/CourseItem.tsx b/src/pages/courses/components/CourseList/CourseItem.tsx index 5ea2248..f628b64 100644 --- a/src/pages/courses/components/CourseList/CourseItem.tsx +++ b/src/pages/courses/components/CourseList/CourseItem.tsx @@ -1,20 +1,9 @@ import React from 'react'; -import { - Flex, - Box, - Heading, - Text, - Menu, - MenuButton, - Badge, - MenuItem, - MenuList, - Image, - Link, - IconButton, -} from '@chakra-ui/react'; +import { observer } from 'mobx-react'; import { Link as ReactRouterLink } from 'react-router-dom'; -import { Icon } from '@chakra-ui/react'; +import { Badge, Image, Link, IconButton, Icon } from '@chakra-ui/react'; +import { Flex, Box, Heading, Text } from '@chakra-ui/layout'; +import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu'; import { MdNote, MdMoreHoriz, MdGroup, MdThumbUp, MdVideoLibrary } from 'react-icons/md'; import { CheckIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons'; @@ -22,15 +11,18 @@ import { CheckIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons'; * Types */ import { ICourse } from '@educt/interfaces'; +import { CourseStatusEnum } from '@educt/enums'; + +/** + * Components + */ +import CourseStatusBadge from '@educt/components/CourseStatusBadge'; /** * Hooks */ import { useColorMode } from '@chakra-ui/color-mode'; import { useRootStore } from '@educt/hooks/useRootStore'; -import CourseStatusBadge from '@educt/components/CourseStatusBadge'; -import { CourseStatusEnum } from '@educt/enums'; -import { observer } from 'mobx-react'; type CourseItemPropsType = { course: Omit; @@ -51,6 +43,7 @@ const CourseItem: React.FC = ({ course, onDelete, onSetStat {(me.isAdmin || me.isTeacher) && ( + {/* Actions */} [] | null; @@ -42,6 +43,9 @@ const CourseList: React.FC = ({ courses, isLoading }) => { const handleError = useErrorHandler(); const toast = useToast(); + /** + * Fetch handler + */ useEffect(() => { if (me !== null) { courseStore.loadCourses({ @@ -84,18 +88,8 @@ const CourseList: React.FC = ({ courses, isLoading }) => { <> {deletingCourse && } {courses.length !== 0 ? ( - + + {/* Render items */} {courses.map(course => ( ))} diff --git a/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx b/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx index 3b53bc0..ac89c72 100644 --- a/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx +++ b/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React from 'react'; import { Tabs, TabList, Tab } from '@chakra-ui/react'; /** @@ -11,6 +11,11 @@ import { CourseStatusEnum } from '@educt/enums'; */ import { CoursesPageContext } from '@educt/contexts'; +/** + * Hooks + */ +import { useContext } from 'react'; + type CourseStatusTabsProps = {}; const CourseStatusTabs: React.FC = () => { diff --git a/src/pages/courses/courses.tsx b/src/pages/courses/courses.tsx index a0ef5fb..8a0066a 100644 --- a/src/pages/courses/courses.tsx +++ b/src/pages/courses/courses.tsx @@ -16,12 +16,16 @@ import CategoryList from './components/CategoryList'; import CourseStatusTabs from './components/CourseStatusTabs'; import LoadingPage from '@educt/components/LoadingPage'; +/** + * Providers + */ +import { CoursesPageContextProvider } from '@educt/providers'; + /** * Hooks */ import { useRootStore } from '@educt/hooks/useRootStore'; -import { CoursesPageContextProvider } from '@educt/providers'; -import { useHistory, useLocation } from 'react-router'; +import { useHistory } from 'react-router'; /** * Courses page diff --git a/src/pages/profile/components/CourseList/CourseItem.tsx b/src/pages/profile/components/CourseList/CourseItem.tsx index 3d2b577..c15a3fb 100644 --- a/src/pages/profile/components/CourseList/CourseItem.tsx +++ b/src/pages/profile/components/CourseList/CourseItem.tsx @@ -1,9 +1,13 @@ import React from 'react'; -import { Text, Link, Box, Flex } from '@chakra-ui/layout'; import { Link as ReactRouterLink } from 'react-router-dom'; -import { MdVideoLibrary, MdGroup, MdThumbUp } from 'react-icons/md'; -import { UserCourseType } from '@educt/interfaces'; import { Tag, TagLabel } from '@chakra-ui/react'; +import { Text, Link, Box, Flex } from '@chakra-ui/layout'; +import { MdVideoLibrary, MdGroup, MdThumbUp } from 'react-icons/md'; + +/** + * Types + */ +import { UserCourseType } from '@educt/interfaces'; type CourseItemPropsType = { course: UserCourseType; @@ -11,16 +15,21 @@ type CourseItemPropsType = { const CourseItem: React.FC = ({ course }) => { return ( - + + + {course.category.title} + - + {course.title} - - - {course.category.title} - - {course.description} @@ -37,7 +46,7 @@ const CourseItem: React.FC = ({ course }) => { {course.likes_count} likes - + ); }; diff --git a/src/pages/profile/components/CourseList/CourseList.tsx b/src/pages/profile/components/CourseList/CourseList.tsx index 3b6f4b3..97db274 100644 --- a/src/pages/profile/components/CourseList/CourseList.tsx +++ b/src/pages/profile/components/CourseList/CourseList.tsx @@ -1,16 +1,20 @@ import React from 'react'; +import { Box, Text, Flex } from '@chakra-ui/layout'; + +/** + * Types + */ import { IMe } from '@educt/interfaces'; -import { Box, Text, Stack, StackDivider } from '@chakra-ui/layout'; + +/** + * Components + */ import CourseItem from './CourseItem'; type CourseListPropsType = { courses: IMe['courses']; }; -/** - * Render the course list on profile page for STUDENT role - * in "Available courses" tab - */ const CourseList: React.FC = ({ courses }) => { if (courses === undefined) { return null; @@ -27,11 +31,11 @@ const CourseList: React.FC = ({ courses }) => { } return ( - }> + {courses.map(course => ( ))} - + ); }; diff --git a/src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx b/src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx index dfc6ce4..50dc024 100644 --- a/src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx +++ b/src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx @@ -90,11 +90,8 @@ const UpdateUserContactsForm: React.FC = ({ con return (
- - - My Contacts - - + + Phone number with country code = ({ user }) => { const { setStatusPageView } = useContext(ProfilePageContext); return ( - - - Account information - - }> + + }> diff --git a/src/pages/profile/containers/MainContainer/MainContainer.tsx b/src/pages/profile/containers/MainContainer/MainContainer.tsx index 09ffb32..a3faa31 100644 --- a/src/pages/profile/containers/MainContainer/MainContainer.tsx +++ b/src/pages/profile/containers/MainContainer/MainContainer.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Heading, Flex, Avatar, Text, Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react'; +import { Box, Heading, Flex, Avatar, Text, Tabs, TabList, Tab, TabPanels, TabPanel, Button } from '@chakra-ui/react'; /** * Components @@ -12,6 +12,7 @@ import CourseList from '@educt/pages/profile/components/CourseList'; /** * Hooks */ +import useLogoutQuery from '@educt/hooks/useLogoutQuery'; import { useRootStore } from '@educt/hooks/useRootStore'; import { useColorMode } from '@chakra-ui/color-mode'; @@ -20,6 +21,7 @@ const MainContainer: React.FC = () => { userStore: { me }, } = useRootStore(); const { colorMode } = useColorMode(); + const { logout } = useLogoutQuery(); if (me === null) return null; @@ -29,47 +31,17 @@ const MainContainer: React.FC = () => { Update you contacts information or password here. - + {me.fullname} - - + + {me.email} @@ -83,7 +55,7 @@ const MainContainer: React.FC = () => { My contacts {me.isStudent && Available courses} - + @@ -98,6 +70,11 @@ const MainContainer: React.FC = () => { + + + ); }; diff --git a/src/pages/profile/profile.tsx b/src/pages/profile/profile.tsx index fa75bb5..6d4a7b0 100644 --- a/src/pages/profile/profile.tsx +++ b/src/pages/profile/profile.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { observer } from 'mobx-react'; /** @@ -22,6 +22,7 @@ import ConfirmEmailContainer from './containers/ConfirmEmailContainer'; /** * Hooks */ +import { useEffect } from 'react'; import { useRootStore } from '@educt/hooks/useRootStore'; import { useHistory } from 'react-router-dom'; diff --git a/src/pages/users/components/UserList/UserList.tsx b/src/pages/users/components/UserList/UserList.tsx index d2bac98..c9bc920 100644 --- a/src/pages/users/components/UserList/UserList.tsx +++ b/src/pages/users/components/UserList/UserList.tsx @@ -121,7 +121,7 @@ const UserList: React.FC = ({ users, pagination }) => { )} - + Page {pagination.current_page} of {pagesCount}