Initial React Kanban app with Docker

2026-03-11 17:23:32 +00:00
commit 1b97b8cfe1
12 changed files with 2075 additions and 0 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,143 @@
+import { useEffect, useMemo, useState } from "react";
+
+const STORAGE_KEY = "kanban.tasks.v1";
+
+const COLUMNS = [
+  { id: "todo", title: "To Do" },
+  { id: "in-progress", title: "In Progress" },
+  { id: "done", title: "Done" }
+];
+
+function loadTasks() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+}
+
+function createTask(title, description) {
+  return {
+    id: crypto.randomUUID(),
+    title: title.trim(),
+    description: description.trim(),
+    status: "todo",
+    createdAt: new Date().toISOString()
+  };
+}
+
+export default function App() {
+  const [tasks, setTasks] = useState(loadTasks);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
+  }, [tasks]);
+
+  const groupedTasks = useMemo(() => {
+    return COLUMNS.reduce((acc, column) => {
+      acc[column.id] = tasks.filter((task) => task.status === column.id);
+      return acc;
+    }, {});
+  }, [tasks]);
+
+  const addTask = (event) => {
+    event.preventDefault();
+    if (!title.trim()) {
+      return;
+    }
+    setTasks((current) => [createTask(title, description), ...current]);
+    setTitle("");
+    setDescription("");
+  };
+
+  const updateTaskStatus = (taskId, direction) => {
+    setTasks((current) =>
+      current.map((task) => {
+        if (task.id !== taskId) {
+          return task;
+        }
+        const currentIndex = COLUMNS.findIndex((column) => column.id === task.status);
+        const nextIndex = currentIndex + direction;
+        if (nextIndex < 0 || nextIndex >= COLUMNS.length) {
+          return task;
+        }
+        return { ...task, status: COLUMNS[nextIndex].id };
+      })
+    );
+  };
+
+  const removeTask = (taskId) => {
+    setTasks((current) => current.filter((task) => task.id !== taskId));
+  };
+
+  return (
+    <main className="app">
+      <header className="header">
+        <h1>Kanban Task Manager</h1>
+        <p>All data stays in your browser via localStorage.</p>
+      </header>
+
+      <section className="create-task">
+        <form onSubmit={addTask}>
+          <input
+            type="text"
+            placeholder="Task title"
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            aria-label="Task title"
+          />
+          <textarea
+            placeholder="Task description (optional)"
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            rows={3}
+            aria-label="Task description"
+          />
+          <button type="submit">Add Task</button>
+        </form>
+      </section>
+
+      <section className="board">
+        {COLUMNS.map((column, columnIndex) => (
+          <article key={column.id} className="column">
+            <h2>{column.title}</h2>
+            <div className="task-list">
+              {groupedTasks[column.id]?.length ? (
+                groupedTasks[column.id].map((task) => (
+                  <div key={task.id} className="task">
+                    <h3>{task.title}</h3>
+                    {task.description && <p>{task.description}</p>}
+                    <div className="task-actions">
+                      <button
+                        type="button"
+                        onClick={() => updateTaskStatus(task.id, -1)}
+                        disabled={columnIndex === 0}
+                      >
+                        ←
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => updateTaskStatus(task.id, 1)}
+                        disabled={columnIndex === COLUMNS.length - 1}
+                      >
+                        →
+                      </button>
+                      <button type="button" className="danger" onClick={() => removeTask(task.id)}>
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p className="empty">No tasks yet.</p>
+              )}
+            </div>
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}