/goit-react-hw-02-phonebook

React phone book

Primary LanguageJavaScript

goit-react-hw-02-phonebook

Читать на других языках: Русский, Українська.

Критерії прийому

  • Створено репозиторії goit-react-hw-02-feedback і goit-react-hw-02-phonebook.
  • При здачі домашньої роботи є два посилання: на вихідні файли і робочі. сторінки кожного завдання на GitHub pages.
  • При запуску коду завдання, в консолі немає помилок і попереджень.
  • Для кожного компонента є окремий файл в папці src/components.
  • Для компонентів описані propTypes, і де необхідно,defaultProps.
  • Все що компонент очікує у вигляді пропсів, передається йому при виклику.
  • JS-код чистий і зрозумілий, використовується Prettier.
  • Стилізація робиться тільки SASS, CSS-модулями або Styled Components. Виділяй 20% часу на стилізацію і 80% на JS.

Завдання

Читать на других языках: Русский, Українська.

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

Напиши додаток зберігання контактів телефонної книги.

Крок 1

Додаток має складатися з форми і списку контактів. На поточному етапі реалізуй додавання імені контакту та відображення списку контактів. Додаток не має зберігати контакти між різними сесіями (оновлення сторінки).

Стан зберігається в батьківському компоненті <App> обов'язково має бути наступного виду, додавати нові властивості не можна.

state = {
  contacts: [],
  name: ''
}

Кожен контакт повинен бути об'єктом з властивостями name і id. Для генерації ідентифікаторів використовуй будь-який відповідний пакет, наприклад uuid. Після завершення цього кроку, додаток повинен виглядати приблизно так.

preview

Крок 2

Розшир функціонал додатка, дозволивши користувачам додавати номера телефонів. Для цього додай другий інпут в форму, і властивість для зберігання його значення в стані.

state = {
  contacts: [],
  name: '',
  number: ''
}

Після завершення цього кроку, додаток повинен виглядати приблизно так.

preview

Крок 3

Додай поле пошуку, яке можна використовувати для фільтрації списку контактів по імені.

  • Поле пошуку це інпут без форми, значення якого записується в стан (контрольований елемент).
  • Логіка фільтрації повинна бути нечутлива до регістру.
state = {
  contacts: [],
  filter: '',
  name: '',
  number: ''
}

preview

Коли ми працюємо над новим функціоналом, буває зручно жорстко закодувати деякі дані в стан. Це позбавить від необхідності вручну вводити дані в інтерфейсі для тестування роботи нового функціоналу. Наприклад можна використовувати таке початковий стан.

state = {
  contacts: [
    {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
    {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
    {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
    {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
  ],
  filter: '',
  name: '',
  number: ''
}

Крок 4

Якщо твій додаток реалізовано в одному компоненті <App>, виконай рефакторинг, виділивши відповідні частини в окремі компоненти. В стані кореневого компонента <App> залишаться тільки властивості contacts і filter.

state = {
  contacts: [],
  filter: ''
}

Досить виділити чотири компоненти: форма додавання контактів, список контактів, елемент списку контактів і фільтр пошуку.

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

<div>
  <h1>Phonebook</h1>
  <ContactForm ... />

  <h2>Contacts</h2>
  <Filter ... />
  <ContactList ... />
</div>

Крок 5

Заборони користувачеві можливість додавати контакти, імена яких вже є в телефонній книзі. При спробі виконати таку дію виведи alert з попередженням.

preview

Крок 6

Розшир функціонал додатка, дозволивши користувачеві видаляти раніше збережені контакти.

preview