bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 18:29:15 +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) && ( {(me.isAdmin || me.isTeacher) && (
<Flex justifyContent='flex-end'> <Flex justifyContent='flex-end'>
<Box position='absolute' zIndex='1' padding='10px'> <Box position='absolute' zIndex='1' padding='10px'>
<Menu> <Menu isLazy>
{({ isOpen, onClose }) => ( <MenuButton
<> as={IconButton}
<MenuButton backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'}
as={IconButton} aria-label='Actions'
backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'} icon={<MdMoreHoriz size='18px' />}
aria-label='Actions' _hover={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
icon={<MdMoreHoriz size='18px' />} _active={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
_hover={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }} />
_active={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }} <MenuList>
/> <MenuItem icon={<EditIcon />}>Edit course</MenuItem>
<MenuList> {course.status === CourseStatusEnum.DRAFT && (
<MenuItem icon={<EditIcon />}>Edit course</MenuItem> <MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.PUBLISHED)} icon={<CheckIcon />}>
{course.status === CourseStatusEnum.DRAFT && ( Publish
<MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.PUBLISHED)} icon={<CheckIcon />}> </MenuItem>
Publish )}
</MenuItem> {course.status === CourseStatusEnum.PUBLISHED && (
)} <MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.DRAFT)} icon={<MdNote />}>
{course.status === CourseStatusEnum.PUBLISHED && ( Mark as Draft
<MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.DRAFT)} icon={<MdNote />}> </MenuItem>
Mark as Draft )}
</MenuItem> <MenuItem
)} onClick={() => onDelete({ id: course.id, title: course.title })}
<MenuItem icon={<DeleteIcon />}
onClick={() => onDelete({ id: course.id, title: course.title })} color='red.500'
icon={<DeleteIcon />} >
color='red.500' Delete
> </MenuItem>
Delete </MenuList>
</MenuItem>
</MenuList>
</>
)}
</Menu> </Menu>
</Box> </Box>
</Flex> </Flex>

29
src/stores/CourseStore.ts
View File

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