TodoList — Приложение для управления задачами

Описание

TodoList — это простое и удобное приложение для управления задачами. Оно помогает вам организовать свои дела и контролировать время, затрачиваемое на выполнение задач.

Основные функции

• Добавление задач: Вводите название задачи и время, чтобы добавить её в список.
• Редактирование задач: Изменяйте описание задач по мере необходимости.
• Удаление задач: Удаляйте задачи одним нажатием кнопки.
• Переключение состояния: Отмечайте задачи как выполненные или активные.
• Фильтрация задач: Фильтруйте задачи по статусу (все, активные, выполненные).
• Управление таймером: Запускайте и останавливайте таймер для каждой задачи.

Стек технологий

• JavaScript — основной язык программирования.
• React — библиотека для создания пользовательского интерфейса.
• Vercel — платформа для деплоя и хостинга приложения.

Реализация

В проекте реализованы две ветки с различными подходами к управлению состоянием:

Ветка main

В этой ветке используется общий Context API для управления состоянием приложения.

Алгоритм реализации:

1. Создание контекста: Реализована техника разделения на несколько контекстов. Создаются контексты для различных задач: один для хранения данных, другой для фильтрованных данных, и третий для функций.
2. Провайдер: Каждый контекст имеет свой компонент-провайдер, который объединен в один компонент высшего порядка. Это позволяет удобно управлять состоянием.
3. Подписка на контекст: Для упрощения доступа к данным контекста созданы кастомные хуки, которые позволяют многократно использовать данные.

Достоинства:

• Централизованное управление состоянием: Упрощает взаимодействие между компонентами, которые должны обмениваться данными.
• Устранение лишних перерисовок: Использование мемоизации и нескольких независимых контекстов помогает избежать ненужных перерисовок компонентов.
• Удобочитаемость кода: Централизованное получение данных из контекста избавляет от необходимости передавать множество props через несколько уровней компонентов.
• Простота интеграции: Context API легко внедряется в существующие компоненты без необходимости использования дополнительных библиотек.

Ветка updateTodo

В этой ветке используется React Hooks для управления состоянием.

Алгоритм реализации:

1. Реализация функционала в App: Вся логика и данные для управления задачами хранятся на верхнем уровне в компоненте App.jsx.
2. Централизованное управление: Функциональность реализована с использованием useReducer, что позволяет эффективно управлять состоянием.
3. Использование React хуков: Создаются кастомные хуки для управления задачами, которые инкапсулируют логику работы с состоянием.

Достоинства:

• Простота и удобство: Хуки позволяют легко управлять состоянием и логикой компонентов, делая код более чистым и понятным.
• Повторное использование логики: Кастомные хуки можно легко переиспользовать в разных компонентах, что способствует лучшей организации кода.

Как использовать

1. Перейдите на сайт приложения: TodoList на Vercel.
2. Введите название задачи в поле ввода и нажмите Enter.
3. Запустите таймер для контроля времени выполнения задач.
4. Удаляйте, редактируйте или отмечайте задачи как выполненные, используя иконки рядом с задачами.
5. Фильтруйте задачи по статусу с помощью вкладок внизу списка.

Установка и запуск

Если вы хотите запустить проект локально, выполните следующие шаги:

1. Клонируйте репозиторий:

   git clone https://github.com/your-username/todolist.git
   

2. Перейдите в папку проекта:

   cd todolist
   

   Run

3. Установите зависимости:

   npm install
   

4. Запустите проект:

   npm run dev
   

5. Откройте браузер и перейдите по адресу: http://localhost:5173.

Автор

• Всеволод Могучий