From c72d4615d0b574e2bcf0f789dee5af3836fce144 Mon Sep 17 00:00:00 2001
From: Anish Lakhwara <anish+git@lakhwara.com>
Date: Mon, 15 May 2023 19:36:02 +1000
Subject: [PATCH] Component State checkpoint

---
 part1/src/App.js | 76 +++++++++++++++++-------------------------------
 1 file changed, 26 insertions(+), 50 deletions(-)

diff --git a/part1/src/App.js b/part1/src/App.js
index 29e1e36..edc4436 100644
--- a/part1/src/App.js
+++ b/part1/src/App.js
@@ -1,70 +1,46 @@
-const Header = (props) => {
+import { useState } from 'react'
+
+const Display = ({ counter }) => {
 	return (
-		<h1>
-			{props.course.course}
-		</h1>
+		<div>{counter}</div>
 	)
 }
 
-const Part = (props) => {
-	console.log(props)
+const Button = ({ handleClick, text }) => {
 	return (
-		<>
-			<p>
-				{props.part.name} {props.part.exercises}
-			</p>
-		</>
-	)
-}
-
-const Content = (props) => {
-	return (
-		<>
-			<Part part={props.course.parts[0]} />
-			<Part part={props.course.parts[1]} />
-			<Part part={props.course.parts[2]} />
-		</>
-	)
-}
-
-const Total = (props) => {
-	const total = props.course.parts[0].exercises + props.course.parts[1].exercises + props.course.parts[2].exercises
-	return (
-		<>
-			<p>
-				Number of exercises {total}
-			</p>
-		</>
+		<button onClick={handleClick}>
+			{text}
+		</button>
 	)
 }
 
 const App = () => {
-	const title = 'Half Stack application development'
-	const part1 = {
-		name: 'Fundamentals of React',
-		exercises: 10
+	const [counter, setCounter] = useState(0)
+	console.log('rendering with counter value', counter)
+	const increaseByOne = () => {
+		console.log('increasing, value before', counter)
+		setCounter(counter + 1)
 	}
-	const part2 = {
-		name: 'Using props to pass data',
-		exercises: 7
+
+	const decreaseByOne = () => {
+		console.log('decreasing, value before', counter)
+		setCounter(counter - 1)
 	}
-	const part3 = {
-		name: 'State of a component',
-		exercises: 14
-	}
-	const parts = [part1, part2, part3]
-	const course = {
-		course: title,
-		parts: parts
+
+	const setToZero = () => {
+		console.log('resetting to zero, value before', counter)
+		setCounter(0)
 	}
 
 	return (
 		<div>
-			<Header course={course} />
-			<Content course={course} />
-			<Total course={course} />
+			<Display counter={counter} />
+			<Button handleClick={increaseByOne} text="plus" />
+			<Button handleClick={setToZero} text="zero" />
+			<Button handleClick={decreaseByOne} text="minus" />
 		</div>
 	)
+
 }
 
 export default App