From a62d2f712a52851c9e33c89c05dc148d2fd1d9a7 Mon Sep 17 00:00:00 2001
From: Anish Lakhwara <anish+git@lakhwara.com>
Date: Mon, 15 May 2023 21:32:23 +1000
Subject: [PATCH] exercise 1.10

---
 part1/src/App.js | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/part1/src/App.js b/part1/src/App.js
index 629ac91..d7a2aa7 100644
--- a/part1/src/App.js
+++ b/part1/src/App.js
@@ -1,9 +1,16 @@
 import { useState } from 'react'
 
-const Stats = ({ positive, neutral, negative }) => {
-	const total = positive - negative
-	const votes = positive + neutral + negative
-	if (votes == 0) {
+const StatisticLine = ({ value, text }) => {
+	return (
+		<tr>
+			<td>{text}</td>
+			<td>{value}</td>
+		</tr>
+	)
+}
+
+const Stats = ({ positive, neutral, negative, total, votes }) => {
+	if (votes === 0) {
 		return (
 			<>
 				<p> No Votes Cast Yet </p>
@@ -13,12 +20,12 @@ const Stats = ({ positive, neutral, negative }) => {
 	return (
 		<>
 			<h2> Results </h2>
-			<p> Positive:  {positive} </p>
-			<p> Neutral:  {neutral} </p>
-			<p> Negative:  {negative} </p>
-			<p> All: {votes} </p>
-			<p> Average: {total / votes} </p>
-			<p> Positive: {positive / votes} </p>
+			<StatisticLine text="Positive" value={positive} />
+			<StatisticLine text="Neutral" value={neutral} />
+			<StatisticLine text="Negative" value={negative} />
+			<StatisticLine text="All" value={votes} />
+			<StatisticLine text="Average" value={total / votes} />
+			<StatisticLine text="Positive" value={positive / votes} />
 		</>
 	)
 }
@@ -35,6 +42,8 @@ const App = () => {
 	const [good, setGood] = useState(0)
 	const [neutral, setNeutral] = useState(0)
 	const [bad, setBad] = useState(0)
+	const total = good - bad
+	const votes = good + neutral + bad
 
 	const incPositive = () => {
 		setGood(good + 1)
@@ -54,7 +63,7 @@ const App = () => {
 			<Button handler={incPositive} text="positive" />
 			<Button handler={incNeutral} text="neutral" />
 			<Button handler={incNegative} text="negative" />
-			<Stats positive={good} negative={bad} neutral={neutral} />
+			<Stats positive={good} negative={bad} neutral={neutral} total={total} votes={votes} />
 		</div>
 	)
 }