From f9bfc61e6c0b314cda4e13a50699f545bc72f8ed Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Mon, 19 May 2025 23:37:27 +0200
Subject: [PATCH] completed exercise 1.7

---
 parts/1/notes.md            |  2 +-
 parts/1/uniCafe/src/App.jsx | 32 +++++++++++++++++++++++++++-----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/parts/1/notes.md b/parts/1/notes.md
index 7cfdb53..a886a53 100644
--- a/parts/1/notes.md
+++ b/parts/1/notes.md
@@ -8,7 +8,7 @@ Exercises:
 * [X] 1.4
 * [X] 1.5
 * [X] 1.6
-* [ ] 1.7
+* [X] 1.7
 * [ ] 1.8
 * [ ] 1.9
 * [ ] 1.10
diff --git a/parts/1/uniCafe/src/App.jsx b/parts/1/uniCafe/src/App.jsx
index 6f65d1d..1ab4c6b 100644
--- a/parts/1/uniCafe/src/App.jsx
+++ b/parts/1/uniCafe/src/App.jsx
@@ -8,10 +8,10 @@ const Button = (props) => {
   return <button onClick={props.onClickCallback}>{props.buttonText} </button>;
 };
 
-const Counter = (props) => {
+const StatisticDisplay = (props) => {
   return (
     <p>
-      {props.counterName} {props.counterValue}
+      {props.statisticName} {props.statisticValue}
     </p>
   );
 };
@@ -22,6 +22,16 @@ const App = () => {
   const [neutral, setNeutral] = useState(0);
   const [bad, setBad] = useState(0);
 
+  const computeTotalCount = () => {
+    return good + neutral + bad;
+  };
+  const computeAverage = () => {
+    return (good - bad) / computeTotalCount();
+  };
+  const computePercentagePositive = () => {
+    return good / computeTotalCount();
+  };
+
   return (
     <div>
       <Header headerText="give feedback" />
@@ -44,9 +54,21 @@ const App = () => {
         buttonText="bad"
       />
       <Header headerText="statistics" />
-      <Counter counterName="good" counterValue={good} />
-      <Counter counterName="neutral" counterValue={neutral} />
-      <Counter counterName="bad" counterValue={bad} />
+      <StatisticDisplay statisticName="good" statisticValue={good} />
+      <StatisticDisplay statisticName="neutral" statisticValue={neutral} />
+      <StatisticDisplay statisticName="bad" statisticValue={bad} />
+      <StatisticDisplay
+        statisticName="count"
+        statisticValue={computeTotalCount()}
+      />
+      <StatisticDisplay
+        statisticName="average"
+        statisticValue={computeAverage()}
+      />
+      <StatisticDisplay
+        statisticName="positive"
+        statisticValue={computePercentagePositive() * 100 + "%"}
+      />
     </div>
   );
   // Buttons