completed 1.11

parts/1/notes.md

@@ -12,7 +12,7 @@ Exercises:
 * [X] 1.8
 * [X] 1.9
 * [X] 1.10
-* [ ] 1.11
+* [X] 1.11
 * [ ] 1.12
 * [ ] 1.13
 * [ ] 1.14

parts/1/uniCafe/src/App.jsx

@@ -8,16 +8,50 @@ const Button = (props) => {
   return <button onClick={props.onClickCallback}>{props.buttonText} </button>;
 };
 
-const StatisticDisplay = (props) => {
+const StatisticsTable = (props) => {
+  if (props.isThereAnyFeedback) {
     return (
-    <p>
-      {props.statisticName} {props.statisticValue}
-    </p>
+      <>
+        <table>
+          <tbody>
+          <StatisticTableRowDisplay statisticName="good" statisticValue={props.good} />
+          <StatisticTableRowDisplay statisticName="neutral" statisticValue={props.neutral} />
+          <StatisticTableRowDisplay statisticName="bad" statisticValue={props.bad} />
+          <StatisticTableRowDisplay
+            statisticName="count"
+            statisticValue={props.totalCount}
+          />
+          <StatisticTableRowDisplay
+            statisticName="average"
+            statisticValue={props.average}
+          />
+          <StatisticTableRowDisplay
+            statisticName="positive"
+            statisticValue={props.percentagePositive * 100 + "%"}
+          />
+          </tbody>
+        </table>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <p>No feedback given.</p>
+      </>
+    );
+  }
+}
+
+const StatisticTableRowDisplay = (props) => {
+  return (
+    <tr>
+      <td>{props.statisticName}</td>
+      <td>{props.statisticValue}</td>
+    </tr>
   );
 };
 
 const App = () => {
-  // save clicks of each button to its own state
   const [good, setGood] = useState(0);
   const [neutral, setNeutral] = useState(0);
   const [bad, setBad] = useState(0);
@@ -36,33 +70,14 @@ const App = () => {
     return computeTotalCount() !== 0;
   };
 
-  let feedbackSection;
-  if (isThereAnyFeedback()) {
-    feedbackSection = (
-      <>
-        <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 + "%"}
-        />
-      </>
-    );
-  } else {
-    feedbackSection = (
-      <>
-        <p>No feedback given.</p>
-      </>
-    );
+  const feedbackStatisticsSnapshot = {
+    good: good,
+    neutral: neutral,
+    bad: bad,
+    totalCount: computeTotalCount(),
+    average: computeAverage(),
+    percentagePositive: computePercentagePositive(),
+    isThereAnyFeedback: isThereAnyFeedback()
   }
 
   return (
@@ -87,7 +102,8 @@ const App = () => {
         buttonText="bad"
       />
       <Header headerText="statistics" />
-      {feedbackSection}
+       
+      <StatisticsTable {...feedbackStatisticsSnapshot}/>
     </div>
   );
   // Buttons