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

refactor: resume course status if error in request

Browse Source
This commit is contained in:
Sergey Yarkov 2021-10-17 23:33:22 +03:00
parent d74b539395
commit 63beba1e0e
2 changed files with 50 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,39 +51,35 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
{(me.isAdmin || me.isTeacher) && (
<Flex justifyContent='flex-end'>
<Box position='absolute' zIndex='1' padding='10px'>
<Menu>
{({ 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 isLazy>
<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>

29
src/stores/CourseStore.ts
View File

@ -77,24 +77,37 @@ export default class CourseStore {
}
public async setCourseStatus(id: string, status: CourseStatusEnum) {
try {
const result = await this.courseService.setStatus(id, status);
const course = this.courses?.find(course => course.id === id);
/**
* Save previous course status before sending request
*/
const { status: prevCourseStatus } = course ?? {};
try {
/**
* 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;
}
if (this.courses !== null && course !== undefined) {
course.status = status;
}
});
/**
* Make request on update course status
*/
const result = await this.courseService.setStatus(id, status);
return result;
} catch (error: any) {
/**
* Resume status if there was an error on request
*/
runInAction(() => {
if (this.courses !== null && course !== undefined && prevCourseStatus !== undefined) {
course.status = prevCourseStatus;
}
});
throw error;
}
}