/goit-react-hw-02-feedback

react feedback component

Primary LanguageJavaScript

goit-react-hw-02-feedback

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

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

  • Створено репозиторії 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.

Завдання

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

Віджет відгуків

Як і більшість компаній, кафе Expresso збирає відгуки від своїх клієнтів. Твоя задача - створити додаток для збору статистики. Є всього три варіанти зворотного зв'язку: добре, нейтрально і погано.

Крок 1

Додаток має відображати кількість зібраних відгуків для кожної категорії. Додаток не повинен зберігати статистику відгуків між різними сесіями (оновлення сторінки).

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

state = {
  good: 0,
  neutral: 0,
  bad: 0
}

Інтерфейс може виглядати так.

preview

Крок 2

Розшир функціонал додатка так, щоб в інтерфейсі відображалося більше статистики про зібрані відгуки. Додай відображення загальної кількості зібраних відгуків з усіх категорій і відсоток позитивних відгуків. Для цього створи допоміжні методи countTotalFeedback() і countPositiveFeedbackPercentage(), що підраховують ці значення грунтуючись на даних в стані (обчислювані дані).

preview

Крок 3

Виконай рефакторинг додатку. Стан додатку повинен залишатися в кореневому компоненті <App>.

  • Винеси відображення статистики в окремий компонент <Statistics good={} neutral={} bad={} total={} positivePercentage={}>.
  • Винеси блок кнопок в компонент <FeedbackOptions options={} onLeaveFeedback={}>.
  • Створи компонент <Section title="">, який рендерить секцію з заголовком і дітей (children). Оберни кожен з <Statistics> і <FeedbackOptions> в створений компонент секції.

Крок 4

Розшир функціонал додатка так, щоб блок статистики рендерився тільки після того, як був зібраний хоча б один відгук. Повідомлення про відсутність статистики винеси в компонент <Notification message="No feedback given">.

preview