Kanban

[elicharlese]

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import {
  Paper,
  Typography,
  TextField,
  Button,
  Grid,
} from "@material-ui/core";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    padding: theme.spacing(2),
  },
  board: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(2),
  },
  column: {
    display: "flex",
    flexDirection: "column",
    padding: theme.spacing(1),
    marginBottom: theme.spacing(2),
    backgroundColor: theme.palette.background.default,
  },
  columnHeader: {
    marginBottom: theme.spacing(1),
  },
  task: {
    padding: theme.spacing(1),
    backgroundColor: theme.palette.background.paper,
    marginBottom: theme.spacing(1),
  },
  input: {
    marginRight: theme.spacing(1),
    marginBottom: theme.spacing(1),
  },
  button: {
    marginBottom: theme.spacing(1),
  },
}));

const initialData = {
  tasks: {
    "task-1": { id: "task-1", content: "Task 1" },
    "task-2": { id: "task-2", content: "Task 2" },
    "task-3": { id: "task-3", content: "Task 3" },
    "task-4": { id: "task-4", content: "Task 4" },
  },
  columns: {
    "column-1": {
      id: "column-1",
      title: "To Do",
      taskIds: ["task-1", "task-2"],
    },
    "column-2": {
      id: "column-2",
      title: "In Progress",
      taskIds: ["task-3"],
    },
    "column-3": {
      id: "column-3",
      title: "Done",
      taskIds: ["task-4"],
    },
  },
  columnOrder: ["column-1", "column-2", "column-3"],
};

export default function KanbanBoard() {
  const classes = useStyles();
  const [data, setData] = useState(initialData);
  const [newTaskText, setNewTaskText] = useState("");
  const [newColumnName, setNewColumnName] = useState("");

  const handleTaskAdd = () => {
    const taskId = `task-${Date.now()}`;
    setData({
      ...data,
      tasks: {
        ...data.tasks,
        [taskId]: { id: taskId, content: newTaskText },
      },
      columns: {
        ...data.columns,
        "column-1": {
          ...data.columns["column-1"],
          taskIds: [...data.columns["column-1"].taskIds, taskId],
        },
      },
    });
    setNewTaskText("");
  };

  const handleColumnAdd = () => {
    const columnId = `column-${Date.now()}`;
    setData({
      ...data,
      columns: {
        ...data.columns,
        [columnId]: { id: columnId, title: newColumnName, taskIds: [] },
      },
      columnOrder: [...data.columnOrder, columnId],
    });
    setNewColumnName("");
  };

  const handleDragEnd = (result) => {
    const { destination, source, draggableId } = result;
    if (!destination) {
      return;
    }
    if (

incomplete