Exercises 1.13-1.14

part1/unicafe/src/App.js

@@ -1,5 +1,52 @@
 import { useState } from 'react'
 
+const Button = ({onClick, text}) => (
+  <button onClick={onClick}>
+    {text}
+  </button>
+)
+
+const StatisticLine = ({text, amount}) => (
+  <tr>
+    <td>{text}</td>
+    <td>{amount}</td>
+  </tr>
+)
+
+const Feedback = ({good, setGood, neutral, setNeutral, bad, setBad}) => (
+  <div>
+    <h1>give feedback</h1>
+    <Button onClick={() => setGood(good + 1)} text="good" />
+    <Button onClick={() => setNeutral(neutral + 1)} text="neutral" />
+    <Button onClick={() => setBad(bad + 1)} text="bad" />
+  </div>
+)
+
+const Statistics = ({good, neutral, bad}) => {
+  const sum = good + neutral + bad;
+  if(sum) {
+    const average = (good - bad) / sum;
+    return <div>
+        <h1>statistics</h1>
+        <table>
+          <tbody>
+            <StatisticLine text="good" amount={good} />
+            <StatisticLine text="neutral" amount={neutral} />
+            <StatisticLine text="bad" amount={bad} />
+            <StatisticLine text="all" amount={sum} />
+            <StatisticLine text="average" amount={average} />
+            <StatisticLine text="positive" amount={good/sum*100 + ' %'} />
+          </tbody>
+        </table>
+    </div>
+  } else {
+    return <div>
+      <h1>statistics</h1>
+      <p>No feedback given</p>
+    </div>
+  }
+}
+
 const App = () => {
   // save clicks of each button to its own state
   const [good, setGood] = useState(0)
@@ -8,7 +55,8 @@ const App = () => {
 
   return (
     <div>
-      code here
+      <Feedback good={good} setGood={setGood} neutral={neutral} setNeutral={setNeutral} bad={bad} setBad={setBad} />
+      <Statistics good={good} neutral={neutral} bad={bad} />
     </div>
   )
 }