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

feat: set course status

Browse Source
This commit is contained in:
Sergey Yarkov 2021-10-17 22:33:29 +03:00
parent ae6ea38f22
commit d74b539395
8 changed files with 134 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/pages/courses/components/CourseList/CourseItem.tsx
View File

@ -16,7 +16,7 @@ import {
import { Link as ReactRouterLink } from 'react-router-dom';
import { Icon } from '@chakra-ui/react';
import { MdNote, MdMoreHoriz, MdGroup, MdThumbUp, MdVideoLibrary } from 'react-icons/md';
import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
import { CheckIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons';
/**
* Types
@ -29,13 +29,16 @@ import { ICourse } from '@educt/interfaces';
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<ICourse, 'teacher' | 'students' | 'lessons'>;
onDelete: (course: Pick<ICourse, 'id' | 'title'>) => void;
onSetStatus: (id: string, status: CourseStatusEnum) => Promise<void>;
};
const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete }) => {
const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStatus }) => {
const {
userStore: { me },
} = useRootStore();
@ -49,25 +52,38 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete }) => {
<Flex justifyContent='flex-end'>
<Box position='absolute' zIndex='1' padding='10px'>
<Menu>
<MenuButton
as={IconButton}
backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'}
aria-label='Actions'
icon={<MdMoreHoriz size='18px' />}
_hover={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
_active={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
/>
<MenuList>
<MenuItem icon={<EditIcon />}>Edit course</MenuItem>
<MenuItem icon={<MdNote />}>Mark as Draft</MenuItem>
<MenuItem
onClick={() => onDelete({ id: course.id, title: course.title })}
icon={<DeleteIcon />}
color='red.500'
>
Delete
</MenuItem>
</MenuList>
{({ isOpen, onClose }) => (
<>
<MenuButton
as={IconButton}
backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'}
aria-label='Actions'
icon={<MdMoreHoriz size='18px' />}
_hover={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
_active={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
/>
<MenuList>
<MenuItem icon={<EditIcon />}>Edit course</MenuItem>
{course.status === CourseStatusEnum.DRAFT && (
<MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.PUBLISHED)} icon={<CheckIcon />}>
Publish
</MenuItem>
)}
{course.status === CourseStatusEnum.PUBLISHED && (
<MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.DRAFT)} icon={<MdNote />}>
Mark as Draft
</MenuItem>
)}
<MenuItem
onClick={() => onDelete({ id: course.id, title: course.title })}
icon={<DeleteIcon />}
color='red.500'
>
Delete
</MenuItem>
</MenuList>
</>
)}
</Menu>
</Box>
</Flex>
@ -131,4 +147,4 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete }) => {
);
};
export default CourseItem;
export default observer(CourseItem);

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

@ -18,6 +18,8 @@ import DeleteCourseDialog from '../DeleteCourseDialog';
*/
import { useRootStore } from '@educt/hooks/useRootStore';
import { useDisclosure } from '@chakra-ui/hooks';
import { useToast } from '@chakra-ui/toast';
import { useErrorHandler } from 'react-error-boundary';
/**
* Contexts
@ -37,6 +39,8 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
} = useRootStore();
const { selectedCategory, courseStatus, deletingCourse, setDeletingCourse } = useContext(CoursesPageContext);
const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
const handleError = useErrorHandler();
const toast = useToast();
useEffect(() => {
if (me !== null) {
@ -47,11 +51,31 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
}
}, [courseStore, selectedCategory, courseStatus, me]);
/**
* Handle delete course
* Set deleting course to context and open dialog
*/
const onDeleteCourse = (course: Pick<ICourse, 'id' | 'title'>) => {
setDeletingCourse(course);
onOpenDeleteDialog();
};
/**
* Handle update course status
*/
const onSetStatus = async (id: string, status: CourseStatusEnum) => {
try {
await courseStore.setCourseStatus(id, status);
toast({ title: 'Status updated.', status: 'info' });
} catch (error: any) {
if (error.response) {
toast({ title: error.message, status: 'error' });
} else {
handleError(error);
}
}
};
if (isLoading || courses === null) {
return <CourseListLoading />;
}
@ -73,7 +97,7 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
}}
>
{courses.map(course => (
<CourseItem key={course.id} course={course} onDelete={onDeleteCourse} />
<CourseItem key={course.id} course={course} onDelete={onDeleteCourse} onSetStatus={onSetStatus} />
))}
</Grid>
) : (

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

@ -1,8 +1,16 @@
import React, { useContext } from 'react';
import { Tabs, TabList, Tab } from '@chakra-ui/react';
import { CoursesPageContext } from '@educt/contexts';
/**
* Types
*/
import { CourseStatusEnum } from '@educt/enums';
/**
* Contexts
*/
import { CoursesPageContext } from '@educt/contexts';
type CourseStatusTabsProps = {};
const CourseStatusTabs: React.FC<CourseStatusTabsProps> = () => {
@ -13,16 +21,11 @@ const CourseStatusTabs: React.FC<CourseStatusTabsProps> = () => {
<Tabs>
<TabList justifyContent='center'>
<Tab onClick={() => handleChangeStatus(undefined)}>All</Tab>
{Object.values(CourseStatusEnum).map(status => {
return (
<Tab key={status} onClick={() => handleChangeStatus(status)}>{`${status.charAt(0).toUpperCase()}${status
.substr(1)
.toLowerCase()}`}</Tab>
);
})}
<Tab onClick={() => handleChangeStatus(CourseStatusEnum.PUBLISHED)}>Published</Tab>
<Tab onClick={() => handleChangeStatus(CourseStatusEnum.DRAFT)}>Unpublished Drafts</Tab>
</TabList>
</Tabs>
);
};
export default React.memo(CourseStatusTabs);
export default CourseStatusTabs;

5
src/pages/courses/components/DeleteCourseDialog/DeleteCourseDialog.tsx
View File

@ -36,6 +36,11 @@ const DeleteCourseDialog: React.FC<DeleteCourseDialogProps> = ({ onClose, isOpen
const handleError = useErrorHandler();
const toast = useToast();
/**
* Delete course handler
*
* @param id Course id
*/
const onDelete = async (id: string) => {
try {
setIsLoading(true);

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

@ -1,15 +1,19 @@
import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import React from 'react';
import { observer } from 'mobx-react';
import { Flex, Box, Heading, Text, Button } from '@chakra-ui/react';
import { IPageProps } from '@educt/interfaces';
import { AddIcon } from '@chakra-ui/icons';
/**
* Types
*/
import { IPageProps } from '@educt/interfaces';
/**
* Components
*/
import CourseList from './components/CourseList';
import CategoryList from './components/CategoryList';
import CourseStatusTabs from './components/CourseStatusTabs';
import LoadingPage from '@educt/components/LoadingPage';
/**
@ -17,7 +21,6 @@ import LoadingPage from '@educt/components/LoadingPage';
*/
import { useRootStore } from '@educt/hooks/useRootStore';
import { CoursesPageContextProvider } from '@educt/providers';
import CourseStatusTabs from './components/CourseStatusTabs';
/**
* Courses page
@ -29,10 +32,6 @@ const CoursesPage: React.FC<IPageProps> = ({ title }) => {
courseStore,
} = useRootStore();
useEffect(() => {
console.log('upadate');
});
if (me === null) return <LoadingPage />;
return (

15
src/services/CourseService.ts
View File

@ -1,6 +1,7 @@
import { AxiosInstance } from 'axios';
import { IApiRespose, ICourse } from '@educt/interfaces';
import { FetchCoursesParams } from '@educt/types';
import { CourseStatusEnum } from '@educt/enums';
export class CourseService {
public api: AxiosInstance;
@ -26,6 +27,20 @@ export class CourseService {
return result.data;
}
/**
* Update status of course by id
*
* @param id Course id
* @param status Course status
* @returns Empty data
*/
public async setStatus(id: string, status: CourseStatusEnum): Promise<IApiRespose<{}>> {
const result = await this.api.post(`/v1/courses/${id}/set-status`, {
status,
});
return result.data;
}
/**
* Delete course by id
*

31
src/stores/CourseStore.ts
View File

@ -16,6 +16,7 @@ import { CourseService } from '@educt/services/CourseService';
* Stores
*/
import RootStore from './RootStore';
import { CourseStatusEnum } from '@educt/enums';
export default class CourseStore {
public root: RootStore;
@ -41,6 +42,9 @@ export default class CourseStore {
this.setLoading(true);
const result = await this.courseService.fetchAll(params);
/**
* Load courses in store
*/
runInAction(() => {
this.courses = result.data;
});
@ -56,8 +60,10 @@ export default class CourseStore {
public async deleteCourse(id: string) {
try {
const result = await this.courseService.delete(id);
console.log(`[${this.constructor.name}]: ${result.message}`, result);
/**
* Remove deleted course form store
*/
runInAction(() => {
if (this.courses !== null) {
this.courses = this.courses.filter(course => course.id !== id);
@ -69,4 +75,27 @@ export default class CourseStore {
throw error;
}
}
public async setCourseStatus(id: string, status: CourseStatusEnum) {
try {
const result = await this.courseService.setStatus(id, status);
/**
* Update status in store
*/
runInAction(() => {
if (this.courses !== null) {
const courseIndex = this.courses.findIndex(course => course.id === id);
if (courseIndex !== -1) {
this.courses[courseIndex].status = status;
}
}
});
return result;
} catch (error: any) {
throw error;
}
}
}

2
vite.config.ts
View File

@ -5,7 +5,7 @@ import { visualizer } from 'rollup-plugin-visualizer';
import { dependencies } from './package.json';
function renderChunks(deps: Record<string, string>) {
let chunks = {};
const chunks = {};
Object.keys(deps).forEach(key => {
if (['@chakra-ui/react', '@chakra-ui/icons', 'framer-motion'].includes(key)) chunks[key] = [key];
return;