Koliadjun / goit-react-hw-04-hooks-feedback

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

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

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

Крок 1

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

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

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

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

Крок 2

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

Крок 3

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

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

Крок 4

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