Merge pull request #450 from gianantoniopini/develop

Add support for drag & drop to the List component
2026-07-10 13:05:48 +10:00 · 2021-02-12 11:17:43 +05:30
parent 89936b651a bd1bd2fc97
commit b6d5f0ce12
4 changed files with 229 additions and 68 deletions
@@ -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,83 @@ 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;
+    }
+
+    if (source.index === destination.index) {
+      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>

@@ -1,11 +1,14 @@
 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';
 import { useDispatch } from '../../../contexts/ResumeContext';
 import styles from './ListItem.module.css';

+const dataTestIdPrefix = 'list-item-';
+
 const ListItem = ({
  title,
  subtitle,
@@ -15,6 +18,7 @@ const ListItem = ({
  isFirst,
  isLast,
  onEdit,
+  index,
 }) => {
  const dispatch = useDispatch();
  const { t } = useTranslation();
@@ -66,50 +70,68 @@ const ListItem = ({
  };

  return (
-    <div className={styles.listItem}>
-      <div className="grid">
-        <span className="font-medium truncate">{title}</span>
-
-        {subtitle && (
-          <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>
-        )}
-      </div>
-
-      <div className={styles.menu}>
-        <MdMoreVert
-          size="18px"
-          aria-haspopup="true"
-          onClick={handleClick}
-          className="cursor-context-menu"
-        />
-        <Menu
-          keepMounted
-          anchorEl={anchorEl}
-          onClose={handleClose}
-          open={Boolean(anchorEl)}
+    <Draggable draggableId={data.id} index={index}>
+      {(dragProvided) => (
+        <div
+          ref={dragProvided.innerRef}
+          className={styles.listItem}
+          data-testid={`${dataTestIdPrefix}${path}`}
+          {...dragProvided.draggableProps}
+          {...dragProvided.dragHandleProps}
        >
-          <div className="flex items-center space-around">
-            <MenuItem disabled={isFirst} onClick={handleMoveUp}>
-              <IoIosArrowUp size="18px" />
-            </MenuItem>
-            <MenuItem disabled={isLast} onClick={handleMoveDown}>
-              <IoIosArrowDown size="18px" />
-            </MenuItem>
+          <div className="grid">
+            <span className="font-medium truncate">{title}</span>
+
+            {subtitle && (
+              <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>
+            )}
          </div>
-          <MenuItem onClick={handleEdit}>{t('shared.buttons.edit')}</MenuItem>
-          <MenuItem onClick={handleDelete}>
-            <span className="text-red-600 font-medium">
-              {t('shared.buttons.delete')}
-            </span>
-          </MenuItem>
-        </Menu>
-      </div>
-    </div>
+
+          <div className={styles.menu}>
+            <MdMoreVert
+              size="18px"
+              aria-haspopup="true"
+              onClick={handleClick}
+              className="cursor-context-menu"
+            />
+            <Menu
+              keepMounted
+              anchorEl={anchorEl}
+              onClose={handleClose}
+              open={Boolean(anchorEl)}
+            >
+              <div className="flex items-center space-around">
+                <MenuItem disabled={isFirst} onClick={handleMoveUp}>
+                  <IoIosArrowUp size="18px" />
+                </MenuItem>
+                <MenuItem disabled={isLast} onClick={handleMoveDown}>
+                  <IoIosArrowDown size="18px" />
+                </MenuItem>
+              </div>
+              <MenuItem onClick={handleEdit}>
+                {t('shared.buttons.edit')}
+              </MenuItem>
+              <MenuItem onClick={handleDelete}>
+                <span className="text-red-600 font-medium">
+                  {t('shared.buttons.delete')}
+                </span>
+              </MenuItem>
+            </Menu>
+          </div>
+        </div>
+      )}
+    </Draggable>
  );
 };

 export default memo(ListItem);
+
+export { dataTestIdPrefix };
@@ -0,0 +1,63 @@
+import { get } from 'lodash';
+import { screen } from '@testing-library/react';
+
+import { DatabaseConstants } from 'gatsby-plugin-firebase';
+
+import { dataTestIdPrefix as listItemDataTestIdPrefix } from '../../../components/builder/lists/ListItem';
+
+import {
+  setupAndWait,
+  expectDatabaseUpdateToHaveCompleted,
+  dragAndDropDirectionDown,
+  dragAndDropListItem,
+} from './helpers/builder';
+
+const testTimeoutInMilliseconds = 20000;
+jest.setTimeout(testTimeoutInMilliseconds);
+
+test('allows to drag & drop', async () => {
+  const resumeId = DatabaseConstants.demoStateResume1Id;
+  const { resume, mockDatabaseUpdateFunction } = await setupAndWait(
+    resumeId,
+    true,
+    true,
+  );
+
+  const now = new Date().getTime();
+
+  const dataPath = 'skills.items';
+  const dataItems = get(resume, dataPath);
+  expect(dataItems.length).toBeGreaterThan(1);
+
+  const listItems = screen.getAllByTestId(
+    `${listItemDataTestIdPrefix}${dataPath}`,
+  );
+  const firstListItem = listItems[0];
+  expect(firstListItem).toHaveTextContent(dataItems[0].name);
+  const secondListItem = listItems[1];
+  expect(secondListItem).toHaveTextContent(dataItems[1].name);
+
+  dragAndDropListItem(firstListItem, dragAndDropDirectionDown);
+
+  const actualListItems = screen.getAllByTestId(
+    `${listItemDataTestIdPrefix}${dataPath}`,
+  );
+  const actualFirstListItem = actualListItems[0];
+  expect(actualFirstListItem).toHaveTextContent(dataItems[1].name);
+  const actualSecondListItem = actualListItems[1];
+  expect(actualSecondListItem).toHaveTextContent(dataItems[0].name);
+
+  await expectDatabaseUpdateToHaveCompleted(mockDatabaseUpdateFunction);
+  const mockDatabaseUpdateFunctionCallArgument =
+    mockDatabaseUpdateFunction.mock.calls[0][0];
+  expect(mockDatabaseUpdateFunctionCallArgument.id).toBe(resumeId);
+  expect(mockDatabaseUpdateFunctionCallArgument.skills.items[0]).toEqual(
+    dataItems[1],
+  );
+  expect(mockDatabaseUpdateFunctionCallArgument.skills.items[1]).toEqual(
+    dataItems[0],
+  );
+  expect(
+    mockDatabaseUpdateFunctionCallArgument.updatedAt,
+  ).toBeGreaterThanOrEqual(now);
+});
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  fireEvent,
  render,
  screen,
  waitFor,
@@ -46,6 +47,36 @@ const expectDatabaseUpdateToHaveCompleted = async (
  );
 };

+const dragAndDropDirectionUp = 'DND_DIRECTION_UP';
+const dragAndDropDirectionDown = 'DND_DIRECTION_DOWN';
+
+const dragAndDropListItem = (listItemElement, direction) => {
+  const spaceKey = { keyCode: 32 };
+  const arrowUpKey = { keyCode: 38 };
+  const arrowDownKey = { keyCode: 40 };
+  const getKeyForDirection = () => {
+    switch (direction) {
+      case dragAndDropDirectionUp:
+        return arrowUpKey;
+      case dragAndDropDirectionDown:
+        return arrowDownKey;
+      default:
+        throw new Error('Unhandled `direction`!');
+    }
+  };
+
+  listItemElement.focus();
+
+  // start the drag
+  fireEvent.keyDown(listItemElement, spaceKey);
+
+  // move element based on direction
+  fireEvent.keyDown(listItemElement, getKeyForDirection());
+
+  // drop
+  fireEvent.keyDown(listItemElement, spaceKey);
+};
+
 // eslint-disable-next-line no-underscore-dangle
 async function _setup(
  resumeId,
@@ -124,4 +155,7 @@ export {
  setupAndWait,
  waitForDatabaseUpdateToHaveCompletedFn as waitForDatabaseUpdateToHaveCompleted,
  expectDatabaseUpdateToHaveCompleted,
+  dragAndDropDirectionUp,
+  dragAndDropDirectionDown,
+  dragAndDropListItem,
 };