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,18 +25,49 @@ 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) => (
+          <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable droppableId={path}>
+              {(dropProvided) => (
+                <div
+                  ref={dropProvided.innerRef}
+                  {...dropProvided.droppableProps}
+                >
+                  {items.map((x, i) => (
                     <ListItem
                       key={x.id}
                       data={x}
@@ -58,8 +90,14 @@ const List = ({
                       onEdit={() => handleEdit(x)}
                       isFirst={i === 0}
                       isLast={i === items.length - 1}
+                      index={i}
                     />
-          ))
+                  ))}
+                  {dropProvided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
         )}
       </div>
 

src/components/builder/lists/ListItem.js

@@ -1,5 +1,6 @@
 import { Menu, MenuItem } from '@material-ui/core';
 import React, { memo, useState } from 'react';
+import { Draggable } from 'react-beautiful-dnd';
 import { useTranslation } from 'react-i18next';
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
 import { MdMoreVert } from 'react-icons/md';
@@ -15,6 +16,7 @@ const ListItem = ({
   isFirst,
   isLast,
   onEdit,
+  index,
 }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -66,16 +68,27 @@ const ListItem = ({
   };
 
   return (
-    <div className={styles.listItem}>
+    <Draggable draggableId={data.id} index={index}>
+      {(dragProvided) => (
+        <div
+          ref={dragProvided.innerRef}
+          className={styles.listItem}
+          {...dragProvided.draggableProps}
+          {...dragProvided.dragHandleProps}
+        >
           <div className="grid">
             <span className="font-medium truncate">{title}</span>
 
             {subtitle && (
-          <span className="mt-1 text-sm opacity-75 truncate">{subtitle}</span>
+              <span className="mt-1 text-sm opacity-75 truncate">
+                {subtitle}
+              </span>
             )}
 
             {text && (
-          <span className="w-4/5 mt-5 text-sm opacity-75 truncate">{text}</span>
+              <span className="w-4/5 mt-5 text-sm opacity-75 truncate">
+                {text}
+              </span>
             )}
           </div>
 
@@ -100,7 +113,9 @@ const ListItem = ({
                   <IoIosArrowDown size="18px" />
                 </MenuItem>
               </div>
-          <MenuItem onClick={handleEdit}>{t('shared.buttons.edit')}</MenuItem>
+              <MenuItem onClick={handleEdit}>
+                {t('shared.buttons.edit')}
+              </MenuItem>
               <MenuItem onClick={handleDelete}>
                 <span className="text-red-600 font-medium">
                   {t('shared.buttons.delete')}
@@ -109,6 +124,8 @@ const ListItem = ({
             </Menu>
           </div>
         </div>
+      )}
+    </Draggable>
   );
 };