rename files and add data as parameter

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "drag-drop-playground",
+  "name": "simple-kanban-board",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

src/Kanban.js

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import './App.css';
+
+const CardType = { TEXT: 'text', TEST: 'test' };
+
+function KanbanCard({ text }) {
+  return (<p>{text}</p>);
+}
+
+function KanbanRow({
+  text, rowId, handleDrop,
+}) {
+  const [{ opacity }, drag] = useDrag(() => ({
+    type: CardType.TEXT,
+    item: { rowId },
+    collect: (monitor) => ({
+      opacity: monitor.isDragging() ? 0.5 : 0.9,
+    }),
+    end(item, monitor) {
+      const dropResult = monitor.getDropResult();
+      if (dropResult !== null) {
+        handleDrop(item.rowId, dropResult.colId);
+      }
+    },
+  }), [rowId]);
+
+  return (
+    <div ref={drag} className='content-row' style={{ opacity }}>
+      <KanbanCard text={text}/>
+    </div>
+  );
+}
+
+function KanbanColumn(props) {
+  const {
+    colName, color, colId,
+  } = props;
+  const [{ canDrop, isOver }, drop] = useDrop(() => ({
+    accept: CardType.TEXT,
+    drop: () => ({ colName, colId }),
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  }), [colName, colId]);
+
+  const isActive = canDrop && isOver;
+  const droppingBox = isActive ? 'dropping-box' : '';
+  return (
+    <div ref={drop} className={`col bg-color-${color} ${droppingBox}`}>
+      <div className='col-header'>{colName}</div>
+      {props.children}
+    </div>
+  );
+}
+
+function moveCards(kanbanColumns, destColId, rowId) {
+  const srcColumn = kanbanColumns
+    .find((column) => column.data.map((data) => data.rowId).includes(rowId));
+  const destColumn = kanbanColumns.find((column) => column.colId === destColId);
+  const rowIndexPosInSrcColumn = srcColumn.data.findIndex((row) => row.rowId === rowId);
+  destColumn.data.push(srcColumn.data[rowIndexPosInSrcColumn]);
+  srcColumn.data.splice(rowIndexPosInSrcColumn, 1);
+  return [...kanbanColumns];
+}
+
+function SimpleKanban({ initialKanbanColumns }) {
+  const [kanbanColumns, setKanbanColumns] = useState(initialKanbanColumns);
+
+  const handleDrop = (rowId, colId) => {
+    setKanbanColumns((prevKanbanColumns) => moveCards(prevKanbanColumns, colId, rowId));
+  };
+
+  return (
+    <div className="container">
+      {
+        kanbanColumns && kanbanColumns.map((column) => (
+          <KanbanColumn
+            key={column.colId}
+            colName={column.colName}
+            color={column.color}
+            colId={column.colId}
+          >
+            {column.data.map(
+              ({ text, rowId }) => <KanbanRow
+                key={rowId}
+                text={text}
+                rowId={rowId}
+                handleDrop={handleDrop}
+              />,
+            )
+            }
+          </KanbanColumn>))
+      }
+    </div>
+  );
+}
+
+export default SimpleKanban;

src/index.js

@@ -1,17 +1,45 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { v4 as uuidv4 } from 'uuid';
+import * as Quote from 'inspirational-quotes';
+import SimpleKanban from './Kanban';
+import reportWebVitals from './reportWebVitals';
+
+function getContent(n) {
+  const contents = [];
+  for (let i = 0; i < n; i += 1) {
+    contents.push({
+      text: Quote.getRandomQuote(),
+      rowId: uuidv4(),
+    });
+  }
+  return contents;
+}
+
+const initialKanbanColumns = [
+  {
+    colName: 'QuoteList1', color: 'purple', colId: uuidv4(), data: getContent(7),
+  },
+  {
+    colName: 'QuoteList2', color: 'orange', colId: uuidv4(), data: getContent(3),
+  },
+  {
+    colName: 'QuoteList3', color: 'green', colId: uuidv4(), data: getContent(2),
+  },
+  {
+    colName: 'QuoteList4', color: 'blue', colId: uuidv4(), data: getContent(5),
+  },
+];
 
 ReactDOM.render(
   <React.StrictMode>
     <DndProvider backend={HTML5Backend}>
-      <App />
+      <SimpleKanban initialKanbanColumns={initialKanbanColumns}/>
     </DndProvider>
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function

src/reportWebVitals.js

@@ -1,6 +1,8 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import('web-vitals').then(({
+      getCLS, getFID, getFCP, getLCP, getTTFB,
+    }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);