fix: fixing problems with dnd after sync (#212)

openedx · Apr 15, 2024 · fdccc68 · fdccc68
1 parent 223540b
commit fdccc68
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
@@ -6,6 +6,7 @@ import { Container, Layout, Stack } from '@openedx/paragon';
 import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
 import { DraggableList, ErrorAlert } from '@edx/frontend-lib-content-components';
 import { Warning as WarningIcon } from '@openedx/paragon/icons';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 
 import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
 import SubHeader from '../generic/sub-header/SubHeader';
@@ -151,21 +152,27 @@ const CourseUnit = ({ courseId }) => {
                   setState={setUnitXBlocks}
                   updateOrder={finalizeXBlockOrder}
                 >
-                  {unitXBlocks.map(({
-                    name, id, blockType: type, shouldScroll, userPartitionInfo,
-                  }) => (
-                    <CourseXBlock
-                      id={id}
-                      key={id}
-                      title={name}
-                      type={type}
-                      shouldScroll={shouldScroll}
-                      unitXBlockActions={unitXBlockActions}
-                      data-testid="course-xblock"
-                      className="course-unit__xblock"
-                      userPartitionInfo={userPartitionInfo}
-                    />
-                  ))}
+                  <SortableContext
+                    id="root"
+                    items={unitXBlocks}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {unitXBlocks.map(({
+                      name, id, blockType: type, shouldScroll, userPartitionInfo,
+                    }) => (
+                      <CourseXBlock
+                        id={id}
+                        key={id}
+                        title={name}
+                        type={type}
+                        shouldScroll={shouldScroll}
+                        unitXBlockActions={unitXBlockActions}
+                        data-testid="course-xblock"
+                        className="course-unit__xblock"
+                        userPartitionInfo={userPartitionInfo}
+                      />
+                    ))}
+                  </SortableContext>
                 </DraggableList>
               </Stack>
               <AddComponent

diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
@@ -42,6 +42,7 @@ const CourseXBlock = ({
         as={ConditionalSortableElement}
         id={id}
         draggable
+        category="xblock"
         componentStyle={{ marginBottom: 0 }}
       >
         <Card.Header