> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/44-kanban-board-for-managing-tasks-with-drag-and-drop.md).

# 44 - Kanban board for managing tasks with drag-and-drop

### Description

Create a Kanban board for managing tasks with drag-and-drop functionality, displaying multiple columns representing different stages of a workflow (e.g., To Do, In Progress, Done), rendering tasks as draggable cards within each column, allowing users to move cards between columns using drag-and-drop to update their status, and displaying deadlines and priority indicators.

### **Algorithm**

1. Create a React component for the Kanban board
2. Define the data structure for tasks (id, title, description, status, deadline, priority)
3. Create a function to render the columns and tasks
4. Use a library like React Grid Layout to create a grid layout for the columns
5. Use a library like React Beautiful DND to enable drag-and-drop functionality
6. Create a function to update the task status when a card is moved
7. Render the deadlines and priority indicators for each task

### **Classes**

* `KanbanBoard`: The main Kanban board component
* `Column`: A single column component
* `TaskCard`: A single task card component
* `DeadlineIndicator`: A deadline indicator component
* `PriorityIndicator`: A priority indicator component

### **Code**

KanbanBoard.js

```javascript
import React from 'react';
import Column from './Column';
import TaskCard from './TaskCard';
import DeadlineIndicator from './DeadlineIndicator';
import PriorityIndicator from './PriorityIndicator';

const KanbanBoard = () => {
  const [tasks, setTasks] = useState([
    { id: 'task-1', title: 'Task 1', description: 'This is task 1', status: 'To Do', deadline: '2023-01-01', priority: 'High' },
    { id: 'task-2', title: 'Task 2', description: 'This is task 2', status: 'In Progress', deadline: '2023-01-15', priority: 'Medium' },
    { id: 'task-3', title: 'Task 3', description: 'This is task 3', status: 'Done', deadline: '2023-01-31', priority: 'Low' },
  ]);

  const handleDragEnd = (result) => {
    const { destination, source } = result;
    if (!destination) return;
    const task = tasks.find((task) => task.id === source.droppableId);
    const newStatus = destination.droppableId;
    setTasks((prevTasks) =>
      prevTasks.map((prevTask) =>
        prevTask.id === task.id ? { ...prevTask, status: newStatus } : prevTask
      )
    );
  };

  return (
    <div>
      <Column id="To Do" title="To Do">
        {tasks.filter((task) => task.status === 'To Do').map((task) => (
          <TaskCard
            key={task.id}
            task={task}
            handleDragEnd={handleDragEnd}
          />
        ))}
      </Column>
      <Column id="In Progress" title="In Progress">
        {tasks.filter((task) => task.status === 'In Progress').map((task) => (
          <TaskCard
            key={task.id}
            task={task}
            handleDragEnd={handleDragEnd}
          />
        ))}
      </Column>
      <Column id="Done" title="Done">
        {tasks.filter((task) => task.status === 'Done').map((task) => (
          <TaskCard
            key={task.id}
            task={task}
            handleDragEnd={handleDragEnd}
          />
        ))}
      </Column>
      {tasks.map((task) => (
        <DeadlineIndicator
          key={task.id}
          deadline={task.deadline}
        />
      ))}
      {tasks.map((task) => (
        <PriorityIndicator
          key={task.id}
          priority={task.priority}
        />
      ))}
    </div>
  );
};

export default KanbanBoard;

```

Column.js

```javascript
import React from 'react';

const Column = ({ id, title, children }) => {
  return (
    <div>
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
};

export default Column;
```

TaskCard.js

```javascript
import React from 'react';

const TaskCard = ({ task, handleDragEnd }) => {
  return (
    <div>
      <h3>{task.title}</h3>
      <p>{task.description}</p>
      <DeadlineIndicator deadline={task.deadline} />
      <PriorityIndicator priority={task.priority} />
      <button onClick={() => handleDragEnd({ id: (link unavailable) })}>
        Move to next column
      </button>
    </div>
  );
};

export default TaskCard;
```

DeadlineIndicator.js

```javascript
import React from 'react';

const DeadlineIndicator = ({ deadline }) => {
  return (
    <span>{deadline}</span>
  );
};

export default DeadlineIndicator;
```

PriorityIndicator.js

```javascript
import React from 'react';

const PriorityIndicator = ({ priority }) => {
  let color;
  switch (priority) {
    case 'High':
      color = 'red';
      break;
    case 'Medium':
      color = 'yellow';
      break;
    case 'Low':
      color = 'green';
      break;
    default:
      color = 'gray';
  }
  return (
    <span style={{ color }}>{priority}</span>
  );
};

export default PriorityIndicator;
```

### Explanation

The code creates a Kanban board with three columns (To Do, In Progress, Done) and renders tasks as draggable cards within each column. The tasks have deadlines and priority indicators, which are displayed as text and colored dots, respectively. The user can drag and drop tasks between columns to update their status.

### Possible Future Enhancements

* Add support for editing task details
* Add support for assigning tasks to users
* Add support for due dates and reminders
* Integrate with a backend API for data persistence
* Add more advanced drag-and-drop functionality (e.g., sorting within columns)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/44-kanban-board-for-managing-tasks-with-drag-and-drop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.