List component: added support for drag & drop

src/components/builder/lists/List.js

@@ -1,10 +1,11 @@
 import { get, isEmpty } from 'lodash';
 import React, { memo, useContext } from 'react';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { useTranslation } from 'react-i18next';
 import { MdAdd } from 'react-icons/md';
 import ModalContext from '../../../contexts/ModalContext';
-import { useSelector } from '../../../contexts/ResumeContext';
-import { formatDateRange } from '../../../utils';
+import { useDispatch, useSelector } from '../../../contexts/ResumeContext';
+import { formatDateRange, reorder } from '../../../utils';
 import Button from '../../shared/Button';
 import EmptyList from './EmptyList';
 import styles from './List.module.css';
@@ -24,42 +25,79 @@ const List = ({
   const { t, i18n } = useTranslation();
   const items = useSelector(path, []);
   const { emitter } = useContext(ModalContext);
+  const dispatch = useDispatch();
 
   const handleAdd = () => emitter.emit(event);
 
   const handleEdit = (data) => emitter.emit(event, data);
 
+  const onDragEnd = (result) => {
+    const { source, destination } = result;
+
+    if (!destination) {
+      return;
+    }
+
+    const sourceDroppableId = source.droppableId;
+    const destinationDroppableId = destination.droppableId;
+    if (sourceDroppableId !== destinationDroppableId) {
+      return;
+    }
+
+    const itemsReordered = reorder(items, source.index, destination.index);
+    dispatch({
+      type: 'on_input',
+      payload: {
+        path,
+        value: itemsReordered,
+      },
+    });
+  };
+
   return (
     <div className="flex flex-col">
       <div className={styles.list}>
         {isEmpty(items) ? (
           <EmptyList />
         ) : (
-          items.map((x, i) => (
-            <ListItem
-              key={x.id}
-              data={x}
-              path={path}
-              title={title || get(x, titlePath, '')}
-              subtitle={
-                subtitle ||
-                get(x, subtitlePath, '') ||
-                (hasDate &&
-                  formatDateRange(
-                    {
-                      startDate: x.startDate,
-                      endDate: x.endDate,
-                      language: i18n.language,
-                    },
-                    t,
-                  ))
-              }
-              text={text || get(x, textPath, '')}
-              onEdit={() => handleEdit(x)}
-              isFirst={i === 0}
-              isLast={i === items.length - 1}
-            />
-          ))
+          <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable droppableId={path}>
+              {(dropProvided) => (
+                <div
+                  ref={dropProvided.innerRef}
+                  {...dropProvided.droppableProps}
+                >
+                  {items.map((x, i) => (
+                    <ListItem
+                      key={x.id}
+                      data={x}
+                      path={path}
+                      title={title || get(x, titlePath, '')}
+                      subtitle={
+                        subtitle ||
+                        get(x, subtitlePath, '') ||
+                        (hasDate &&
+                          formatDateRange(
+                            {
+                              startDate: x.startDate,
+                              endDate: x.endDate,
+                              language: i18n.language,
+                            },
+                            t,
+                          ))
+                      }
+                      text={text || get(x, textPath, '')}
+                      onEdit={() => handleEdit(x)}
+                      isFirst={i === 0}
+                      isLast={i === items.length - 1}
+                      index={i}
+                    />
+                  ))}
+                  {dropProvided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
         )}
       </div>