fix: prevent same index drag to start request and restore state on error

open-craft · Dec 8, 2023 · 26a9cba · 26a9cba
1 parent 4bb85ca
commit 26a9cba
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
@@ -80,6 +80,8 @@ const CourseOutline = ({ courseId }) => {
   document.title = getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle));
   const [sections, setSections] = useState(sectionsList);
 
+  const initialSections = [...sections];
+
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
@@ -98,8 +100,10 @@ const CourseOutline = ({ courseId }) => {
   }, []);
 
   const finalizeSectionOrder = () => {
-    handleDragNDrop(sections.map((section) => section.id));
-  }
+    handleDragNDrop(sections.map((section) => section.id), () => {
+      setSections(() => initialSections);
+    });
+  };
 
   useEffect(() => {
     if (sectionsList) {

diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
@@ -262,7 +262,7 @@ export function addNewCourseSectionQuery(courseBlockId) {
   };
 }
 
-export function setSectionOrderListQuery(courseId, newListId) {
+export function setSectionOrderListQuery(courseId, newListId, restoreCallback) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
     dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
@@ -277,6 +277,7 @@ export function setSectionOrderListQuery(courseId, newListId) {
     } catch (error) {
       dispatch(hideProcessingNotification());
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      restoreCallback();
     }
   };
 }
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -110,8 +110,8 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(duplicateCourseSectionQuery(currentSection.id, courseStructure.id));
   };
 
-  const handleDragNDrop = (newListId) => {
-    dispatch(setSectionOrderListQuery(courseId, newListId));
+  const handleDragNDrop = (newListId, restoreCallback) => {
+    dispatch(setSectionOrderListQuery(courseId, newListId, restoreCallback));
   };
 
   useEffect(() => {

diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
@@ -96,14 +96,19 @@ const SectionCard = ({
       item.index = hoverIndex;
     },
   });
+
+  const indexCopy = index;
   const [{ isDragging }, drag] = useDrag({
     type: ItemTypes.SECTION,
-    item: () => ({ id, index }),
+    item: () => ({ id, index, startingIndex: indexCopy }),
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
-    end: () => {
-      finalizeSectionOrder();
+    end: (item) => {
+      const { startingIndex } = item;
+      if (index !== startingIndex) {
+        finalizeSectionOrder();
+      }
     },
   });
   const opacity = isDragging ? 0 : 1;