Skip to content

23. Todo list rozszerzony

This content is not available in your language yet.

Todo list z rozbudowanymi funkcjami — priorytety, tagi, terminy, filtrowanie i sortowanie. Nie prostą listą, a prawdziwym narzędziem produktywności.

function useTodo() {
const [todos, setTodos] = useLocalStorage('todos', []);
const [filter, setFilter] = useState({ status: 'all', priority: 'all', tag: null });
const filteredTodos = useMemo(() => {
return todos
.filter((todo) => {
if (filter.status === 'active') return !todo.completed;
if (filter.status === 'completed') return todo.completed;
return true;
})
.filter((todo) => {
if (filter.priority === 'all') return true;
return todo.priority === filter.priority;
})
.filter((todo) => {
if (!filter.tag) return true;
return todo.tags?.includes(filter.tag);
});
}, [todos, filter]);
function addTodo(text, { priority = 'medium', tags = [], dueDate = null } = {}) {
setTodos([...todos, {
id: crypto.randomUUID(),
text,
completed: false,
priority,
tags,
dueDate,
createdAt: new Date().toISOString(),
}]);
}
return { todos: filteredTodos, filter, setFilter, addTodo, /* ... */ };
}
  • Dodawanie, ukończenie i usuwanie zadań
  • Filtrowanie (wszystkie / aktywne / ukończone)
  • Priorytet (Low / Medium / High) z kolorem
  • Zapis w localStorage
Ocena: 3.0

Powodzenia!

“Todo list” brzmi banalnie, ale rozszerzony z priorytetami, tagami i subtaskami to solidny projekt. Kluczem jest dobrze zaprojektowana struktura danych na początku — zmiana modelu danych po napisaniu 200 linii kodu to koszmar. Zaplanuj strukturę obiektu todo zanim zaczniesz kodować!