fix: finalize section order on drop instead of hover

open-craft · Dec 7, 2023 · 4bb85ca · 4bb85ca
1 parent ad50b9a
commit 4bb85ca
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
@@ -93,15 +93,14 @@ const CourseOutline = ({ courseId }) => {
           [hoverIndex, 0, prevSections[dragIndex]],
         ],
       });
-      const idList = [];
-      for (let i = 0; i < newList.length; i++) {
-        idList.push(newList[i].id);
-      }
-      handleDragNDrop(idList);
       return newList;
     });
   }, []);
 
+  const finalizeSectionOrder = () => {
+    handleDragNDrop(sections.map((section) => section.id));
+  }
+
   useEffect(() => {
     if (sectionsList) {
       setSections(sectionsList);
@@ -182,6 +181,7 @@ const CourseOutline = ({ courseId }) => {
                                 onDuplicateSubmit={handleDuplicateSectionSubmit}
                                 isSectionsExpanded={isSectionsExpanded}
                                 moveSection={moveSection}
+                                finalizeSectionOrder={finalizeSectionOrder}
                               />
                             ))}
                           </DndProvider>

diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
@@ -25,6 +25,7 @@ const SectionCard = ({
   onDuplicateSubmit,
   isSectionsExpanded,
   moveSection,
+  finalizeSectionOrder,
 }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -101,6 +102,9 @@ const SectionCard = ({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
+    end: () => {
+      finalizeSectionOrder();
+    },
   });
   const opacity = isDragging ? 0 : 1;
   drag(drop(moveRef));
@@ -224,6 +228,7 @@ SectionCard.propTypes = {
   onDuplicateSubmit: PropTypes.func.isRequired,
   isSectionsExpanded: PropTypes.bool.isRequired,
   moveSection: PropTypes.func.isRequired,
+  finalizeSectionOrder: PropTypes.func.isRequired,
 };
 
 export default SectionCard;