Mover Cards para uma lista vazia

README.md

@@ -0,0 +1,7 @@
+# youtube-ui-clone-pipefy
+Código produzido durante o vídeo "Recriando Pipefy do zero (com drag n' drop)"
+
+Acompanhei esse projeto interessante do Diego Fernandes CTO da RocketSeat e resolvi dar minha contribuição.
+
+
+1 - Mover Cards para uma lista vazia.

src/components/Board/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import produce from 'immer';
 
 import { loadLists } from '../../services/api';
@@ -11,22 +11,35 @@ import { Container } from './styles';
 
 const data = loadLists();
 
+
+
+
 export default function Board() {
   const [lists, setLists] = useState(data);
 
-  function move(fromList, toList, from, to) {
-    setLists(produce(lists, draft => {
-      const dragged = draft[fromList].cards[from];
 
-      draft[fromList].cards.splice(from, 1);
-      draft[toList].cards.splice(to, 0, dragged);
-    }))
-  }
+  const handleDrop = useCallback(
+    (index, item) => {
+      setLists(produce(lists, draft => {
+        const dragged = draft[item.listIndex].cards[item.index];
+        draft[item.listIndex].cards.splice(item.index, 1);
+        draft[index].cards.push(dragged);
+      }))
+
+    },
+    [lists]
+  )
 
   return (
-    <BoardContext.Provider value={{ lists, move }}>
+    <BoardContext.Provider value={{ lists }}>
       <Container>
-        {lists.map((list, index) => <List key={list.title} index={index} data={list} />)}
+        {lists.map((list, index) => 
+          <List accepts={['CARD']} 
+                onDrop={item => handleDrop(index, item)} 
+                key={list.title} 
+                index={index} 
+                data={list} 
+          />)}
       </Container>
     </BoardContext.Provider>
   );

src/components/Card/index.js

@@ -1,14 +1,10 @@
-import React, { useRef, useContext } from 'react';
+import React, { useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 
-import BoardContext from '../Board/context';
-
 import { Container, Label } from './styles';
 
 export default function Card({ data, index, listIndex }) {
   const ref = useRef();
-  const { move } = useContext(BoardContext);
-
   const [{ isDragging }, dragRef] = useDrag({
     item: { type: 'CARD', index, listIndex },
     collect: monitor => ({
@@ -17,37 +13,7 @@ export default function Card({ data, index, listIndex }) {
   });
 
   const [, dropRef] = useDrop({
-    accept: 'CARD',
-    hover(item, monitor) {
-      const draggedListIndex = item.listIndex;
-      const targetListIndex = listIndex;
-
-      const draggedIndex = item.index;
-      const targetIndex = index;
-
-      if (draggedIndex === targetIndex && draggedListIndex === targetListIndex) {
-        return;
-      }
-
-      const targetSize = ref.current.getBoundingClientRect();
-      const targetCenter = (targetSize.bottom - targetSize.top) / 2;
-
-      const draggedOffset = monitor.getClientOffset();
-      const draggedTop = draggedOffset.y - targetSize.top;
-
-      if (draggedIndex < targetIndex && draggedTop < targetCenter) {
-        return;
-      }
-
-      if (draggedIndex > targetIndex && draggedTop > targetCenter) {
-        return;
-      }
-
-      move(draggedListIndex, targetListIndex, draggedIndex, targetIndex);
-
-      item.index = targetIndex;
-      item.listIndex = targetListIndex;
-    }
+    accept: 'CARD'
   })
 
   dragRef(dropRef(ref));

src/components/List/index.js

@@ -4,10 +4,14 @@ import { MdAdd } from 'react-icons/md';
 
 import Card from '../Card';
 
+import { DropTarget } from 'react-dnd';
+
 import { Container } from './styles';
 
-export default function List({ data, index: listIndex }) {
-  return (
+function List({ data, index: listIndex, connectDropTarget }) {
+
+  return connectDropTarget(
+    <div style={{flexGrow:0,flexShrink:0,flexBasis:320}}>
     <Container done={data.done}>
       <header>
         <h2>{data.title}</h2>
@@ -29,5 +33,19 @@ export default function List({ data, index: listIndex }) {
         )) }
       </ul>
     </Container>
+    </div>
   );
 }
+
+export default DropTarget (
+  props => props.accepts,
+  {
+    drop(props, monitor) {
+      props.onDrop(monitor.getItem())
+    },
+  },
+  (connect, monitor) => ({
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+  }),
+)(List);