144 lines
4.1 KiB
JavaScript
144 lines
4.1 KiB
JavaScript
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>
|
|
);
|
|
}
|