From 63beba1e0e8fcbad7f25b3a0468e06767a9a76b5 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sun, 17 Oct 2021 23:33:22 +0300
Subject: [PATCH] refactor: resume course status if error in request

---
 .../components/CourseList/CourseItem.tsx      | 62 +++++++++----------
 src/stores/CourseStore.ts                     | 29 ++++++---
 2 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/pages/courses/components/CourseList/CourseItem.tsx b/src/pages/courses/components/CourseList/CourseItem.tsx
index db9abfb..5acc994 100644
--- a/src/pages/courses/components/CourseList/CourseItem.tsx
+++ b/src/pages/courses/components/CourseList/CourseItem.tsx
@@ -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>
diff --git a/src/stores/CourseStore.ts b/src/stores/CourseStore.ts
index e0b5295..bd0ca02 100644
--- a/src/stores/CourseStore.ts
+++ b/src/stores/CourseStore.ts
@@ -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;
     }
   }