goit-react-hw-08-phonebook

Використовуй цей шаблон React-проекту як стартову точку своєї програми.

Критерії приймання

• Створений репозиторій goit-react-hw-08-phonebook
• При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку проекту на GitHub Pages
• Під час запуску коду завдання в консолі відсутні помилки та попередження.
• Для кожного компонента є окрема папка з файлом React-компонента та файлом стилів
• Для компонентів описані propTypes

Книга контактів

Додай у програму «Книга контактів» можливість реєстрації, логіна та оновлення користувача, а також роботу з приватною колекцією контактів.

Бекенд

Для цього завдання є готовий бекенд. Ознайомся з документацією. Він підтримує всі необхідні операції з колекцією контактів, а також реєстрацію, логін та оновлення користувача за допомогою JWT. Використовуй його замість твого бекенда створеного через сервіс mockapi.io.

Маршрутизація

Додай маршрутизацію з бібліотекою React Router. У програмі має бути кілька сторінок:

• /register – публічний маршрут реєстрації нового користувача з формою
• /login – публічний маршрут логіна існуючого користувача з формою
• /contacts – приватний маршрут для роботи з колекцією контактів користувача

Додай компонент навігації <Navigation> з посиланнями для переходу по маршрутах.

Меню користувача

Створи компонент <UserMenu>, що відображає пошту користувача і кнопку виходу з облікового запису. Ось як може виглядати його розмітка.

mango@mail.com

Logout

Стилізація

Це фінальна версія програми, тому попрацюй над оформленням інтерфейсу. Можна використовувати бібліотеку стилізації або компонентів, наприклад Chakra UI або Material-UI.

---

Критерії приймання попередньої роботи

• Створений репозиторій goit-react-hw-07-phonebook
• Використана бібліотека Redux Toolkit

Телефонна книга

Виконай рефакторинг коду застосунку «Телефонна книга». Видали код, який відповідає за зберігання та читання контактів з локального сховища, та додай роботу з бекендом для зберігання контактів.

Створи бекенд для розробки за допомогою UI-сервісу mockapi.io. Зареєструйся, використовуючи свій обліковий запис GitHub.

Створи ресурс contacts, щоб отримати ендпоінт /contacts. Використовуй конструктор ресурсу та опиши об'єкт контакту як на ілюстрації.

Використовуй функцію createAsyncThunk або RTK Query для взаємодії з бекендом та асинхронними запитами.

Попереднє завдання

• Створений репозиторій goit-react-hw-06-phonebook
• При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку проекту на GitHub Pages або Netlify
• В Redux-стані зберігається мінімально необхідний набір даних
• Під час запуску коду завдання в консолі відсутні помилки та попередження.
• Для кожного компонента є окрема папка з файлом React-компонента та файлом стилів
• Для компонентів описані propTypes
• Використана бібліотека Redux Toolkit

Книга контактів

Виконай рефакторинг коду застосунку «Книга контактів», додавши управління станом за допомогою бібліотеки Redux Toolkit.

Нехай Redux-стан виглядає наступним чином.

{
  contacts: [],
  filter: ""
}

• Створи сховище з configureStore()
• Використовуй функцію createSlice()
• Створи дії збереження та видалення контакту, а також оновлення фільтра
• Зв'яжи React-компоненти з Redux-логікою за допомогою хуків бібліотеки react-redux.
• Використай бібліотеку Redux Persist для збереження масиву контактів у локальному сховищі

---

npm install styled-components@5.3.10

import styled from 'styled-components';

---

npm i react-redux

import { Provider } from 'react-redux'

---

npm i redux-persist

import { PersistGate } from 'redux-persist/es/integration/react'

---

npm i @reduxjs/toolkit

Попереднє завдання: Книга контактів

• Створений репозиторій goit-react-hw-04-phonebook.
• Проведи рефакторинг коду завдання, використовуючи React-хуки.

Попереднє завдання: Телефонна книга

Візьми своє рішення завдання з попередньої домашньої роботи і додай зберігання контактів телефонної книги в localStorage. Використовуй методи життєвого циклу.

• Під час додавання та видалення контакту контакти зберігаються у локальне сховище.
• Під час завантаження застосунку контакти, якщо такі є, зчитуються з локального сховища і записуються у стан.

---

React homework template

Этот проект был создан при помощи Create React App. Для знакомства и настройки дополнительных возможностей обратись к документации.

Создание репозитория по шаблону

Используй этот репозиторий организации GoIT как шаблон для создания репозитория своего проекта. Для этого нажми на кнопку «Use this template» и выбери опцию «Create a new repository», как показано на изображении.

На следующем шаге откроется страница создания нового репозитория. Заполни поле его имени, убедись что репозиторий публичный, после чего нажми кнопку «Create repository from template».

После того как репозиторий будет создан, необходимо перейти в настройки созданного репозитория на вкладку Settings > Actions > General как показано на изображении.

Проскролив страницу до самого конца, в секции «Workflow permissions» выбери опцию «Read and write permissions» и поставь галочку в чекбоксе. Это необходимо для автоматизации процесса деплоя проекта.

Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на GitHub.

Подготовка к работе

1. Убедись что на компьютере установлена LTS-версия Node.js. Скачай и установи её если необходимо.
2. Установи базовые зависимости проекта командой npm install.
3. Запусти режим разработки, выполнив команду npm start.
4. Перейди в браузере по адресу http://localhost:3000. Эта страница будет автоматически перезагружаться после сохранения изменений в файлах проекта.

Деплой

Продакшн версия проекта будет автоматически проходить линтинг, собираться и деплоиться на GitHub Pages, в ветку gh-pages, каждый раз когда обновляется ветка main. Например, после прямого пуша или принятого пул-реквеста. Для этого необходимо в файле package.json отредактировать поле homepage, заменив your_username и your_repo_name на свои, и отправить изменения на GitHub.

"homepage": "https://your_username.github.io/your_repo_name/"

Далее необходимо зайти в настройки GitHub-репозитория (Settings > Pages) и выставить раздачу продакшн версии файлов из папки /root ветки gh-pages, если это небыло сделано автоматически.

Статус деплоя

Статус деплоя крайнего коммита отображается иконкой возле его идентификатора.

• Желтый цвет - выполняется сборка и деплой проекта.
• Зеленый цвет - деплой завершился успешно.
• Красный цвет - во время линтинга, сборки или деплоя произошла ошибка.

Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в выпадающем окне перейти по ссылке Details.

Живая страница

Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть по адресу указанному в отредактированном свойстве homepage. Например, вот ссылка на живую версию для этого репозитория https://goitacademy.github.io/react-homework-template.

Если открывается пустая страница, убедись что во вкладке Console нет ошибок связанных с неправильными путями к CSS и JS файлам проекта (404). Скорее всего у тебя неправильное значение свойства homepage в файле package.json.

Маршрутизация

Если приложение использует библиотеку react-router-dom для маршрутизации, необходимо дополнительно настроить компонент <BrowserRouter>, передав в пропе basename точное название твоего репозитория. Слеш в начале строки обязателен.

<BrowserRouter basename="/your_repo_name">
  <App />
</BrowserRouter>

Как это работает

1. После каждого пуша в ветку main GitHub-репозитория, запускается специальный скрипт (GitHub Action) из файла .github/workflows/deploy.yml.
2. Все файлы репозитория копируются на сервер, где проект инициализируется и проходит линтинг и сборку перед деплоем.
3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта отправляется в ветку gh-pages. В противном случае, в логе выполнения скрипта будет указано в чем проблема.