From 711764b874c3dcc4f83203e19272ebd36913c90a Mon Sep 17 00:00:00 2001
From: Anish Lakhwara <anish+git@lakhwara.com>
Date: Mon, 15 May 2023 21:14:50 +1000
Subject: [PATCH] exercise 1.6

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

diff --git a/part1/src/App.js b/part1/src/App.js
index edc4436..ea413aa 100644
--- a/part1/src/App.js
+++ b/part1/src/App.js
@@ -1,46 +1,50 @@
 import { useState } from 'react'
 
-const Display = ({ counter }) => {
+const Stats = ({ positive, neutral, negative }) => {
 	return (
-		<div>{counter}</div>
+		<>
+			<h2> Results </h2>
+			<p> Positive:  {positive} </p>
+			<p> Neutral:  {neutral} </p>
+			<p> Negative:  {negative} </p>
+		</>
 	)
 }
 
-const Button = ({ handleClick, text }) => {
+const Button = ({ handler, text }) => {
 	return (
-		<button onClick={handleClick}>
+		<button onClick={handler}>
 			{text}
 		</button>
 	)
 }
 
 const App = () => {
-	const [counter, setCounter] = useState(0)
-	console.log('rendering with counter value', counter)
-	const increaseByOne = () => {
-		console.log('increasing, value before', counter)
-		setCounter(counter + 1)
+	const [good, setGood] = useState(0)
+	const [neutral, setNeutral] = useState(0)
+	const [bad, setBad] = useState(0)
+
+	const incPositive = () => {
+		setGood(good + 1)
 	}
 
-	const decreaseByOne = () => {
-		console.log('decreasing, value before', counter)
-		setCounter(counter - 1)
+	const incNegative = () => {
+		setBad(bad + 1)
 	}
 
-	const setToZero = () => {
-		console.log('resetting to zero, value before', counter)
-		setCounter(0)
+	const incNeutral = () => {
+		setNeutral(neutral + 1)
 	}
 
 	return (
 		<div>
-			<Display counter={counter} />
-			<Button handleClick={increaseByOne} text="plus" />
-			<Button handleClick={setToZero} text="zero" />
-			<Button handleClick={decreaseByOne} text="minus" />
+			<h2> Feedback </h2>
+			<Button handler={incPositive} text="positive" />
+			<Button handler={incNeutral} text="neutral" />
+			<Button handler={incNegative} text="negative" />
+			<Stats positive={good} negative={bad} neutral={neutral} />
 		</div>
 	)
-
 }
 
 export default App