kovalenkoiryna15 / rsclone Goto Github PK

1. Alerts
2. Login Page
3. Registration Page
4. Authorization Logic

Данный компонент будет отображаться в модальном окне.

Это форма с полями:

• поле для ввода - Project Name
• datepicker для выбора даты дедлайна
• timepicker для ввода Estimated Time
• [optional] colorpicker для выбора цвета
• [optional] поле ввода или select для выбора клиента
• кнопка Save
• кнопка Cansel

Входные параметры компонента:

• projectData - объект с информацией о проекте - будет null на добавление нового проекта или с данными для редактирования проекта,
• метод onProjectSave (вызов на submit формы с данными из формы),
• метод onClose.

Можно использовать компоненты Bootstrap для datepicker, timepicker, colorpicker, select.

Создать отельный store с данными о проектах:

State:
- tasks - массив проектов
- loading - булево значение
- error - null или объект ошибки

Actions:
- FETCH_TASKS
- FETCH_TASKS_SUCCESS
- FETCH_TASKS_FAILURE
- ADD_TASK
- UPDATE_TASK
- DELETE_TASK

Nav
MainView

• TaskListNav
• TaskList
• TaskView

При выборе проекта (путь projects/:id) отобразить название проекта и список задач для этого проекта.
Внизу списка создать кнопку Add task, которая добавляет новую задачу к списку. При нажатии на неё добавляется новая задача с полем для ввода вместо имени. При потере фокуса сохранить эту задачу, если поле не пустое (ADD_TASK action).

Для вкладки Tasks (путь /tasks) отображать задачи всех проектов (с пометкой к какому проекту относится задача) и без назначенных проектов.

Выполнить рефакторинг текущего кода

• В директории store, создать поддиректории по названиям компонентов user, project, task или сервисов firebase. В каждой директории могут быть следующие файлы: reducers.ts, actions.ts, action-types.ts и action-constatns.ts;
• Добавить store/firebase
• Добавить в store/task/actions методы позволяющие взаимодействовать с firebase
• Реализовать TaskList
• Реализовать TaskItem

Общий компонент без содержимого - можно скрыть/показать по клику на стрелке сбоку. Все содержимое в него помещается через входной параметр children.

user.json

внутри данные на юзера и два массива tasks и projects.

task: {id(new Date()), name, description, deadline, estimatedTime, wastedTime(timeEntries.sum()), timeEntries([timeSession]), project(id || null)}

project: {id(new Date()), name, description, deadline, estimatedTime}

Это должен быть общий компонент модального окна без содержимого - только пустое окно с кнопкой закрытия (обычно модальное окно также закрывается по клику по области вне модального окна). Самый распространенный подход для модальных окон в React - это Порталы (https://ru.reactjs.org/docs/portals.html). Содержимое окна будет отображаться внутри как this.props.children.

Создать отельный store с данными о проектах:

State:
- projects - массив проектов
- loading - булево значение
- error - null или объект ошибки

Actions:
- FETCH_PROJECTS
- FETCH_PROJECTS_SUCCESS
- FETCH_PROJECTS_FAILURE
- ADD_PROJECT
- UPDATE_PROJECT
- DELETE_PROJECT

• npx create-react-app rsclone --template redux-typescript (под капотом CRA: webpack, cli, babel и др. https://github.com/facebook/create-react-app#whats-included
  +template redux-typescript)
• eslint, eslint-config-airbnb-base
• gitignore
• editorconfig
• pretirier

Внутри Sidebar (как children) добавить навигацию - Tasks, Projects и список проектов c раскрывающимся меню - Edit project, Delete Project, кнопку Add project.

Реализовать обработчик клика для конок Add project, Edit project и Delete project.

Реализовать роутинг и добавить ссылки на /tasks и projects/:id. Пример и документация по react router тут - https://reactrouter.com/web/example/basic

Добавить select - в нем заложить возможность сортировки проектов по длительности, по дедлайну, по алфавиту и т.д.

Данный компонент будет отображаться в модальном окне.

Это форма с полями:

• чекбокс done - статус сделана таска или нет
• datepicker для выбора даты дедлайна
• поле для ввода - Task Name
• select с выбором проекта
• timepicker для ввода Estimated Time

Входные параметры компонента:

• taskData - объект с информацией о задаче - будет null на добавление новой задачи или с данными для редактирования задачи,
• метод onTaskSave (вызов на потерю фокуса любого поля),
• метод onClose.

Можно использовать компоненты Bootstrap для datepicker, timepicker, select.

При загрузке приложения добавить загрузку проектов и задач - FETCH_PROJECTS и FETCH_TASKS actions. Добавить спиннер на загрузку и отобразить ошибку в случае ошибки загрузки.