feat: a table already existing can now be moved

src/Components/TablesView/DroppableTable.js

@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { useDrag } from "react-dnd";
 import React, { useEffect, useState } from "react";
 
 /**
@@ -22,11 +23,17 @@ function DroppableTable({
 	setOrders,
 	orderSelect,
 }) {
-	const [border, setBorder] = useState("border-black");
-	const [fuseBorder, setFuseBorder] = useState("border-kitchen-green");
-	const [currentTime, setCurrentTime] = useState(new Date());
-	const [tableSize, setTableSize] = useState(20);
-
+    const [border, setBorder] = useState("border-black")
+    const [fuseBorder, setFuseBorder] = useState("border-kitchen-green")
+    const [currentTime, setCurrentTime] = useState(new Date());
+    const [tableSize, setTableSize] = useState(20);
+    const [{ isDragging }, drag] = useDrag(() => ({
+        type: table.type,
+        item: { id: table.id, table },
+        collect: (monitor) => ({
+            isDragging: !!monitor.isDragging(),
+        }),
+    }));
 	const onTableClick = (orderId) => {
 		if (inFuse.type !== "None") {
 			setInFuse((fused) => {
@@ -154,6 +161,7 @@ function DroppableTable({
 
 	return (
 		<div
+            ref={inEdit ? drag : null}
 			onClick={() => onTableClick(table.orderId)}
 			name={table.id}
 			className={`${table.type === "circle" ? "rounded-full" : ""} border-4 absolute col-span-1 grid grid-flow-row ${inEdit === true ? `bg-grey-bg ${border} grid-rows-2` : table.time === "00:00" ? `bg-kitchen-green ${fuseBorder} grid-rows-3` : `bg-kitchen-yellow ${fuseBorder} grid-rows-3`} justify-center justify-items-center`}
@@ -162,6 +170,7 @@ function DroppableTable({
 				width: `${table.w / tableSize}vw`,
 				top: table.top,
 				left: table.left,
+                opacity: isDragging ? 0.5 : 1
 			}}
 		>
 			<div

src/Components/TablesView/TablesView.js

@@ -44,48 +44,63 @@ export default function TablesView({
 	const [dataToBeSaved, setDataToBeSaved] = useState(false);
 	const [isFirstRender, setIsFirstRender] = useState(true);
 
-	const drop = useDrop(() => ({
-		accept: [ItemTypes.CIRCLE, ItemTypes.SQUARE, ItemTypes.RECTANGLE],
-		drop: (item, monitor) => {
-			const offset = monitor.getClientOffset();
-			if (!offset) return;
+    const drop = useDrop(() => ({
+        accept: [ItemTypes.CIRCLE, ItemTypes.SQUARE, ItemTypes.RECTANGLE],
+        drop: (item, monitor) => {
+            const dropArea = document.getElementById("drop-area");
+            if (!dropArea) return;
 
-			const container = document.getElementById("drop-area");
-			const containerRect = container.getBoundingClientRect();
-			const left = offset.x;
-			const top = offset.y;
+            if (item.table) {
+                const delta = monitor.getDifferenceFromInitialOffset();
+                if (!delta) return;
 
-			if (left > containerRect.left && top > containerRect.top) {
-				addTable(item.id, left, top, containerRect);
-			}
-		},
-		collect: (monitor) => ({
-			isOver: !!monitor.isOver(),
-		}),
-	}))[1];
+                const currentTable = board.find(t => t.id === item.id);
+                if (!currentTable) return;
 
-	const doesOverlap = (x, y, board) => {
-		let check = false;
-		board.forEach((table) => {
-			if (
-				x < table.left + table.w &&
-				x + table.w > table.left &&
-				y < table.top + table.h &&
-				y + table.h > table.top
-			) {
-				check = true;
-			}
-		});
-		return check;
-	};
+                const left = currentTable.left + delta.x;
+                const top = currentTable.top + delta.y;
 
-	const outOfBounds = (x, y, elem, containerRect) => {
-		let check = false;
-		if (x + elem.w > containerRect.width || y + elem.h > containerRect.height) {
-			check = true;
-		}
-		return check;
-	};
+                setBoard((prevBoard) =>
+                    prevBoard.map((table) =>
+                    table.id === item.id ? { ...table, left, top } : table
+                    )
+                );
+            } else {
+                const offset = monitor.getSourceClientOffset();
+                if (!offset) return;
+
+                const containerRect = dropArea.getBoundingClientRect();
+                const left = offset.x;
+                const top = offset.y;
+
+                if (left > containerRect.left && top > containerRect.top) {
+                    addTable(item.id, left, top, containerRect);
+                }
+            }
+            setDataToBeSaved(true);
+        },
+        collect: (monitor) => ({
+            isOver: !!monitor.isOver(),
+        }),
+    }), [board])[1];
+
+    const doesOverlap = (x, y, board) => {
+        let check = false;
+        board.forEach((table) => {
+            if (x < table.left + table.w && x + table.w > table.left && y < table.top + table.h && y + table.h > table.top) {
+                check = true;
+            }
+        });
+        return check;
+    };
+
+    const outOfBounds = (x, y, elem, containerRect) => {
+        let check = false;
+        if (x + elem.w > containerRect.width || y + elem.h > containerRect.height) {
+            check = true;
+        }
+        return check;
+    };
 
 	function collectIds(board) {
 		const ids = new Set();

src/__tests__/Components/TableView/DroppableTable.test.js

@@ -2,6 +2,16 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import DroppableTable from "../../../Components/TablesView/DroppableTable";
+/* eslint-disable react/prop-types */
+jest.mock("react-dnd", () => ({
+    useDrag: () => [
+        { isDragging: false },
+        (el) => el,
+    ],
+    useDrop: () => [{}, (el) => el],
+    DndProvider: ({ children }) => <div>{children}</div>,
+}));
+/* eslint-enable react/prop-types */
 
 describe("DroppableTable Component", () => {
     const baseTable = {id: "1", type: "circle", w: 100, h: 100, left: 50, top: 50, plates: 2, time: "00:00"};