completed exercise 1.7

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

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} />
+      <StatisticDisplay statisticName="good" statisticValue={good} />
-      <Counter counterName="neutral" counterValue={neutral} />
+      <StatisticDisplay statisticName="neutral" statisticValue={neutral} />
-      <Counter counterName="bad" counterValue={bad} />
+      <StatisticDisplay statisticName="bad" statisticValue={bad} />
+      <StatisticDisplay
+        statisticName="count"
+        statisticValue={computeTotalCount()}
+      />
+      <StatisticDisplay
+        statisticName="average"
+        statisticValue={computeAverage()}
+      />
+      <StatisticDisplay
+        statisticName="positive"
+        statisticValue={computePercentagePositive() * 100 + "%"}
+      />
     </div>
   );
   // Buttons