Patch: Adding drag and drop function on tag component

Patch: Adding drag and drop function on tag component

Author: AntonioGally

package.json

@@ -9,6 +9,7 @@
     "antd": "^4.16.8",
     "firebase": "^8.7.1",
     "html-react-parser": "^1.2.8",
+    "immutability-helper": "^3.1.1",
     "react": "^17.0.2",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",

src/components/Card/index.js

@@ -81,7 +81,7 @@ const CardContainer = () => {
       {todoList?.length > 0 ? (
         <>
           <Col sm={24} md={12} lg={12}>
-            {filterTodo().map((data, index) => {
+            {filterTodo()?.map((data, index) => {
               if (index % 2 === 0) {
                 return (
                   <Card
@@ -95,7 +95,7 @@ const CardContainer = () => {
             })}
           </Col>
           <Col sm={24} md={12} lg={12}>
-            {filterTodo().map((data, index) => {
+            {filterTodo()?.map((data, index) => {
               if (index % 2 !== 0) {
                 return (
                   <Card

src/components/SideBar/Tag.js

@@ -1,12 +1,71 @@
-import React, { useEffect, useState, memo, useContext } from "react";
-
+import React, { useEffect, useState, memo, useContext, useRef } from "react";
+import { useDrag, useDrop } from "react-dnd";
 //Scripts
 import { dataContext } from "../../context/dataContext";
 
 //Minor components
 import { TagContent, Tag, DeleteIcon } from "./styles";
 
-const TagComponent = ({ data, index, type, style, todoAmount }) => {
+const TagComponent = ({ data, index, type, style, todoAmount, moveTag, id }) => {
+  const ref = useRef(null);
+  const [{ handlerId }, drop] = useDrop({
+    accept: "tag",
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+    hover(item, monitor) {
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // Determine rectangle on screen
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+      // Get vertical middle
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      // Get pixels to the top
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+      // Time to actually perform the action
+      moveTag(dragIndex, hoverIndex);
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex;
+    },
+  });
+  //eslint-disable-next-line
+  const [{ isDragging }, drag] = useDrag({
+    type: "tag",
+    item: () => {
+      return { id, index };
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drag(drop(ref));
+
   const [opacity, setOpacity] = useState(0);
   const [background, setBackground] = useState("");
   const [padding, setPadding] = useState(0);
@@ -86,10 +145,11 @@ const TagComponent = ({ data, index, type, style, todoAmount }) => {
       setOpacity(1);
     }, 250);
   }
-
   return (
     <>
       <TagContent
+        ref={ref}
+        data-handler-id={handlerId}
         style={{
           ...style,
           opacity: opacity,

src/components/SideBar/index.js

@@ -1,4 +1,5 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useCallback } from "react";
+import update from "immutability-helper";
 //Context
 import { dataContext } from "../../context/dataContext.js";
 
@@ -21,10 +22,25 @@ import {
 } from "./styles";
 
 const SideBar = () => {
-  const { tagList, todoList, relationTagTodo } = useContext(dataContext);
+  const { tagList, setTagList, todoList, relationTagTodo } = useContext(dataContext);
   const [showModal, setShowModal] = useState(false);
   const [searchValue, setSearchValue] = useState("");
 
+  const moveTag = useCallback(
+    (dragIndex, hoverIndex) => {
+      const dragCard = tagList[dragIndex];
+      setTagList(
+        update(tagList, {
+          $splice: [
+            [dragIndex, 1],
+            [hoverIndex, 0, dragCard],
+          ],
+        })
+      );
+    },
+    [tagList, setTagList]
+  );
+
   function handleClickAdd() {
     window.gtag("event", "click-event", {
       event_category: "Open",
@@ -52,7 +68,14 @@ const SideBar = () => {
                   />
                 </SearchContent>
                 {filterArr(searchValue, tagList, "text").map((data, index) => (
-                  <TagComponent data={data} index={index} key={index} todoAmount={relationTagTodo}/>
+                  <TagComponent
+                    data={data}
+                    index={index}
+                    key={index}
+                    id={data.id}
+                    moveTag={moveTag}
+                    todoAmount={relationTagTodo}
+                  />
                 ))}
               </>
             ) : (

src/pages/Main/app.js

@@ -1,6 +1,9 @@
 import React, { useContext, useState, useEffect } from "react";
 import { Col, Drawer } from "antd";
 
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
 //Minor Components
 import {
   Container,
@@ -103,14 +106,18 @@ const App = () => {
               style={{ position: "absolute" }}
             >
               <SideBarContent>
-                <SideBar />
+                <DndProvider backend={HTML5Backend}>
+                  <SideBar />
+                </DndProvider>
               </SideBarContent>
             </Drawer>
           </div>
         ) : (
           <Col xs={24} sm={24} md={24} lg={6} xl={6}>
             <SideBarContent>
-              <SideBar />
+              <DndProvider backend={HTML5Backend}>
+                <SideBar />
+              </DndProvider>
             </SideBarContent>
           </Col>
         )}