bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 02:09:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: added courses page store

Browse Source
This commit is contained in:
Sergey Yarkov 2021-12-08 20:47:06 +03:00
parent 9fb8b18b23
commit d1d345ca88
13 changed files with 168 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Buttons/index.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { ButtonProps, Button } from '@chakra-ui/button';
import { AddIcon, EditIcon } from '@chakra-ui/icons';
import { AddIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons';
import { MdSave } from 'react-icons/md';
export const CreateButton: React.FC<ButtonProps> = props => (
@ -9,6 +9,12 @@ export const CreateButton: React.FC<ButtonProps> = props => (
</Button>
);
export const DeleteButton: React.FC<ButtonProps> = props => (
<Button variant='outline' leftIcon={<DeleteIcon />} colorScheme='red' size='sm' {...props}>
Delete
</Button>
);
export const EditButton: React.FC<ButtonProps> = props => (
<Button leftIcon={<EditIcon />} variant='outline' size='sm' {...props}>
Edit

3
src/components/SetCourseStatusButton/index.ts
View File

@ -1,3 +0,0 @@
import SetCourseStatusButton from './SetCourseStatusButton';
export default SetCourseStatusButton;

10
src/pages/courses/components/CategoryList/CategoryItem.tsx
View File

@ -15,19 +15,23 @@ import { CoursesPageContext } from '@educt/contexts';
* Hooks
*/
import { useContext } from 'react';
import { useRootStore } from '@educt/hooks/useRootStore';
export type CategoryItemPropsType = {
category: ICategory;
};
const CategoryItem: React.FC<CategoryItemPropsType> = ({ category }) => {
const { selectedCategory, setSelectedCategory } = useContext(CoursesPageContext);
const isSelected = selectedCategory?.id === category.id;
const {
pageStore: { coursesStore },
} = useRootStore();
const isSelected = coursesStore.selectedCategory?.id === category.id;
/**
* Handle click on change category
*/
const onCategoryChange = () => setSelectedCategory(category);
const onCategoryChange = () => coursesStore.setSelectedCategory(category);
return (
<Tag

10
src/pages/courses/components/CategoryList/CategoryList.tsx
View File

@ -29,8 +29,10 @@ type CategoryListPropsType = {
};
const CategoryList: React.FC<CategoryListPropsType> = ({ render: Item }) => {
const { categoryStore } = useRootStore();
const { selectedCategory, setSelectedCategory } = useContext(CoursesPageContext);
const {
categoryStore,
pageStore: { coursesStore },
} = useRootStore();
const handleError = useErrorHandler();
const { categories, isLoading } = categoryStore;
@ -51,11 +53,11 @@ const CategoryList: React.FC<CategoryListPropsType> = ({ render: Item }) => {
<Flex sx={{ columnGap: '7px', rowGap: '5px' }} flexWrap='wrap'>
<Tag
borderRadius='full'
variant={selectedCategory === undefined ? 'solid' : 'outline'}
variant={coursesStore.selectedCategory === null ? 'solid' : 'outline'}
cursor='pointer'
transition='all .1s'
_hover={{ opacity: '.8' }}
onClick={() => setSelectedCategory(undefined)}
onClick={() => coursesStore.setSelectedCategory(null)}
>
<TagLabel>All categories</TagLabel>
</Tag>

14
src/pages/courses/components/CourseList/CourseList.tsx
View File

@ -36,12 +36,12 @@ const CourseList: React.FC<CourseListPropsType> = ({ render: Item }) => {
const {
userStore: { me },
courseStore,
pageStore: { coursesStore },
} = useRootStore();
const [deleting, setDeleting] = useState<Pick<ICourse, 'id' | 'title'> | null>(null);
const { selectedCategory, courseStatus } = useContext(CoursesPageContext);
const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
const { setCourseStatus } = useSetCourseStatus();
const { courses, isLoading } = courseStore;
const { courses, isLoading, loadCourses } = courseStore;
const handleDeleteCourse = (course: Pick<ICourse, 'id' | 'title'>) => {
setDeleting(course);
@ -54,11 +54,11 @@ const CourseList: React.FC<CourseListPropsType> = ({ render: Item }) => {
useEffect(() => {
if (me !== null) {
courseStore.loadCourses({
category_id: selectedCategory?.id,
status: me.isAdmin || me.isTeacher ? courseStatus : CourseStatusEnum.PUBLISHED,
category_id: coursesStore.selectedCategory?.id,
status: me.isAdmin || me.isTeacher ? coursesStore.showedStatus : CourseStatusEnum.PUBLISHED,
});
}
}, [courseStore, selectedCategory, courseStatus]);
}, [courseStore, coursesStore.selectedCategory, coursesStore.showedStatus]);
if (courses === null || isLoading) return <LoadingList />;
@ -80,9 +80,9 @@ const CourseList: React.FC<CourseListPropsType> = ({ render: Item }) => {
<Box textAlign='center' mt='10' userSelect='none'>
<Text color='gray.500'>
There are no courses&nbsp;
{!selectedCategory && !courseStatus
{!coursesStore.selectedCategory && !coursesStore.showedStatus
? 'in the system yet'
: `in this category${courseStatus ? ' or with this status' : ''}`}
: `in this category${coursesStore.showedStatus ? ' or with this status' : ''}`}
.
</Text>
</Box>

36
src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx
View File

@ -1,36 +0,0 @@
import React from 'react';
import { Tabs, TabList, Tab } from '@chakra-ui/react';
/**
* Types
*/
import { CourseStatusEnum } from '@educt/enums';
/**
* Contexts
*/
import { CoursesPageContext } from '@educt/contexts';
/**
* Hooks
*/
import { useContext } from 'react';
type CourseStatusTabsProps = {};
const CourseStatusTabs: React.FC<CourseStatusTabsProps> = () => {
const { setCourseStatus } = useContext(CoursesPageContext);
const handleChangeStatus = (status: CourseStatusEnum | undefined) => setCourseStatus(status);
return (
<Tabs variant='solid-rounded'>
<TabList justifyContent='center'>
<Tab onClick={() => handleChangeStatus(undefined)}>All</Tab>
<Tab onClick={() => handleChangeStatus(CourseStatusEnum.PUBLISHED)}>Published</Tab>
<Tab onClick={() => handleChangeStatus(CourseStatusEnum.DRAFT)}>Unpublished Drafts</Tab>
</TabList>
</Tabs>
);
};
export default CourseStatusTabs;

3
src/pages/courses/components/CourseStatusTabs/index.ts
View File

@ -1,3 +0,0 @@
import CourseStatusTabs from './CourseStatusTabs';
export default CourseStatusTabs;

31
src/pages/courses/components/index.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { BoxProps, Box } from '@chakra-ui/layout';
import { Tabs, TabList, Tab } from '@chakra-ui/tabs';
import { CourseStatusEnum } from '@educt/enums';
/**
* Hooks
*/
import { useRootStore } from '@educt/hooks/useRootStore';
export const CoursesTabs: React.FC<BoxProps> = props => {
const {
userStore: { me },
pageStore: { coursesStore },
} = useRootStore();
return (
me &&
(me.isAdmin || me.isTeacher ? (
<Box {...props}>
<Tabs variant='solid-rounded'>
<TabList justifyContent='center' {...props}>
<Tab onClick={() => coursesStore.setShowedStatus(undefined)}>All</Tab>
<Tab onClick={() => coursesStore.setShowedStatus(CourseStatusEnum.PUBLISHED)}>Published</Tab>
<Tab onClick={() => coursesStore.setShowedStatus(CourseStatusEnum.DRAFT)}>Unpublished Drafts</Tab>
</TabList>
</Tabs>
</Box>
) : null)
);
};

32
src/pages/courses/courses.tsx
View File

@ -1,5 +1,4 @@
import React from 'react';
import { Box } from '@chakra-ui/react';
/**
* Types
@ -10,22 +9,19 @@ import { IPageProps } from '@educt/interfaces';
* Components
*/
import { PageWrapper, PageHeading, PageContent } from '@educt/components/PageElements';
import { CreateButton } from '@educt/components/Buttons';
import LoadingPage from '@educt/components/LoadingPage';
import CourseList from './components/CourseList';
import CategoryList from './components/CategoryList';
import CourseStatusTabs from './components/CourseStatusTabs';
import CategoryItem from './components/CategoryList/CategoryItem';
import CourseItem from './components/CourseList/CourseItem';
/**
* Providers
*/
import { CoursesPageContextProvider } from '@educt/providers';
/**
* Hooks
*/
import { useRootStore } from '@educt/hooks/useRootStore';
import { useHistory } from 'react-router';
import { CoursesTabs } from './components';
/**
* Courses page
@ -34,22 +30,20 @@ const CoursesPage: React.FC<IPageProps> = () => {
const {
userStore: { me },
} = useRootStore();
const history = useHistory();
if (me === null) return <LoadingPage />;
return (
<CoursesPageContextProvider>
<PageWrapper>
<PageHeading heading='Courses' description='List of all courses' />
<PageContent mt='10'>
{(me.isAdmin || me.isTeacher) && <CourseStatusTabs />}
<Box mt='5'>
<CategoryList render={CategoryItem} />
<CourseList render={CourseItem} />
</Box>
</PageContent>
</PageWrapper>
</CoursesPageContextProvider>
<PageWrapper>
<PageHeading heading='Courses' description='List of all courses' />
{(me.isAdmin || me.isTeacher) && <CreateButton onClick={() => history.push('/courses/create')} />}
<PageContent mt='10'>
<CoursesTabs mb='7' />
<CategoryList render={CategoryItem} />
<CourseList render={CourseItem} />
</PageContent>
</PageWrapper>
);
};

35
src/components/SetCourseStatusButton/SetCourseStatusButton.tsx → src/pages/courses/edit/components/index.tsx
View File

@ -1,20 +1,21 @@
import React, { useState } from 'react';
import { Button } from '@chakra-ui/react';
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
import React from 'react';
import { ButtonProps, Button } from '@chakra-ui/button';
import { CourseStatusEnum } from '@educt/enums';
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
/**
* Hooks
*/
import { useState } from 'react';
import { useSetCourseStatus } from '@educt/hooks/queries';
type SetCourseStatusButtonPropsType = {
interface IStatusButtonProps extends ButtonProps {
courseId: string;
currentStatus: CourseStatusEnum;
loadingText?: string | undefined;
};
const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
courseId,
currentStatus,
loadingText = 'Wait a second...',
}) => {
}
export const StatusButton: React.FC<IStatusButtonProps> = props => {
const { courseId, currentStatus, loadingText, ...btnProps } = props;
const [status, setStatus] = useState<keyof typeof CourseStatusEnum>(currentStatus);
const { setCourseStatus, isLoading } = useSetCourseStatus();
@ -28,8 +29,11 @@ const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
<Button
onClick={() => handleChangeStatus(CourseStatusEnum.DRAFT)}
isLoading={isLoading}
loadingText={loadingText}
loadingText={loadingText || 'Saving...'}
leftIcon={<AiOutlineEyeInvisible />}
size='sm'
variant='outline'
{...btnProps}
>
Mark as Draft
</Button>
@ -38,8 +42,11 @@ const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
<Button
onClick={() => handleChangeStatus(CourseStatusEnum.PUBLISHED)}
isLoading={isLoading}
loadingText={loadingText}
loadingText={loadingText || 'Saving...'}
leftIcon={<AiOutlineEye />}
size='sm'
variant='outline'
{...btnProps}
>
Publish course
</Button>
@ -48,5 +55,3 @@ const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
return Components[status];
};
export default SetCourseStatusButton;

82
src/pages/courses/edit/edit.tsx
View File

@ -1,8 +1,7 @@
import React from 'react';
import Helmet from 'react-helmet';
import { Redirect } from 'react-router-dom';
import { Box, Heading, Text, Tab, TabList, Flex, Tabs, TabPanels, TabPanel, Button } from '@chakra-ui/react';
import { DeleteIcon } from '@chakra-ui/icons';
import { Box, Heading, Text, Tab, TabList, Flex, Tabs, TabPanels, TabPanel } from '@chakra-ui/react';
/**
* Types
@ -14,7 +13,6 @@ import type { IPageProps } from '@educt/interfaces';
*/
import LoadingPage from '@educt/components/LoadingPage';
import { EditCourseForm } from '@educt/components/Forms/CourseForm';
import SetCourseStatusButton from '@educt/components/SetCourseStatusButton';
import DeleteCourseDialog from '@educt/components/Dialogs/DeleteCourseDialog';
import { StudentTableList, StudentTableRow } from './components/StudentTableList';
import LessonList from './components/LessonList';
@ -26,6 +24,9 @@ import { useParams } from 'react-router-dom';
import { useRootStore } from '@educt/hooks/useRootStore';
import { useFetchCourse } from '@educt/hooks/queries';
import { useDisclosure } from '@chakra-ui/hooks';
import { PageContent, PageWrapper } from '@educt/components/PageElements';
import { DeleteButton } from '@educt/components/Buttons';
import { StatusButton } from './components';
/**
* Course editor
@ -53,55 +54,58 @@ const EditCoursePage: React.FC<IPageProps> = () => {
if (!course || isLoading) return <LoadingPage />;
return (
<>
<PageWrapper>
<Helmet>
<title>Editing {course.title}</title>
</Helmet>
<DeleteCourseDialog course={course} onClose={onCloseDeleteDialog} isOpen={isOpenDeleteDialog} />
<Flex justifyContent='space-between' alignItems='center' flexWrap='wrap'>
<Box mr='3'>
<Heading as='h1'>Course editor</Heading>
<Text mt='2'>{course.title}</Text>
</Box>
<Box ml='auto' alignSelf='flex-end' justifySelf='flex-end' mt={{ base: '7', md: '0' }}>
<SetCourseStatusButton courseId={course.id} currentStatus={course.status} />
<Button onClick={onOpenDeleteDialog} ml='2' variant='outline' leftIcon={<DeleteIcon />} colorScheme='red'>
Delete
</Button>
<StatusButton courseId={course.id} currentStatus={course.status} />
<DeleteButton onClick={onOpenDeleteDialog} ml='2' />
</Box>
</Flex>
<Box>
<Tabs isLazy mt='8'>
<TabList>
<Tab>Info</Tab>
<Tab>Lessons</Tab>
<Tab>Students</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Box>
<EditCourseForm
defaultValues={{
title: course.title,
description: course.description,
category_id: course.category.id,
teacher_id: course.teacher.id,
image: undefined,
}}
/>
</Box>
</TabPanel>
<TabPanel>
<LessonList course={course} />
</TabPanel>
<TabPanel>
<StudentTableList render={StudentTableRow} students={course.students} />
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</>
<PageContent>
<Box>
<Tabs isLazy mt='8'>
<TabList>
<Tab>Info</Tab>
<Tab>Lessons</Tab>
<Tab>Students</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Box>
<EditCourseForm
defaultValues={{
title: course.title,
description: course.description,
category_id: course.category.id,
teacher_id: course.teacher.id,
image: undefined,
}}
/>
</Box>
</TabPanel>
<TabPanel>
<LessonList course={course} />
</TabPanel>
<TabPanel>
<StudentTableList render={StudentTableRow} students={course.students} />
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</PageContent>
</PageWrapper>
);
};

4
src/stores/PageStore.ts
View File

@ -1,10 +1,13 @@
import { makeAutoObservable } from 'mobx';
import CoursesStore from './pages/CoursesStore';
import EditCourseStore from './pages/EditCourseStore';
import RootStore from './RootStore';
export default class PageStore {
public root: RootStore;
public coursesStore: CoursesStore;
public editCourseStore: EditCourseStore;
constructor(root: RootStore) {
@ -13,6 +16,7 @@ export default class PageStore {
/**
* Pages
*/
this.coursesStore = new CoursesStore(this);
this.editCourseStore = new EditCourseStore(this);
makeAutoObservable(this);

30
src/stores/pages/CoursesStore.ts Normal file
View File

@ -0,0 +1,30 @@
import { makeAutoObservable } from 'mobx';
import { CourseStatusEnum } from '@educt/enums';
import PageStore from '../PageStore';
/**
* Types
*/
import type { ICategory } from '@educt/interfaces';
export default class CoursesStore {
public pageStore: PageStore;
public selectedCategory: ICategory | null = null;
public showedStatus: CourseStatusEnum | undefined;
constructor(pageStore: PageStore) {
this.pageStore = pageStore;
makeAutoObservable(this);
}
public setSelectedCategory(category: ICategory | null): void {
this.selectedCategory = category;
}
public setShowedStatus(newStatus: CourseStatusEnum | undefined): void {
this.showedStatus = newStatus;
}
}