exercise 1.14

part1/src/App.js

@@ -8,6 +8,21 @@ const Button = ({ handler, text }) => {
 	)
 }
 
+const HighScore = ({ highScore, anecdotes, scores }) => {
+	if (highScore === -1) {
+		return (
+			<p>No Highest Scoring Annecdote</p>
+		)
+	}
+	return (
+		<>
+			<h2>The Highest Voted Annectdote</h2>
+			<p>It has {scores[highScore]} votes</p>
+			<p>{anecdotes[highScore]}</p>
+		</>
+	)
+}
+
 const App = () => {
 	const anecdotes = [
 		'If it hurts, do it more often.',
@@ -22,6 +37,7 @@ const App = () => {
 
 	const [selected, setSelected] = useState(0)
 	const [scores, setScores] = useState(Array(anecdotes.length).fill(0))
+	const [highScore, setHigh] = useState(-1)
 
 	const randomText = () => {
 		const value = Math.floor(Math.random() * anecdotes.length)
@@ -31,6 +47,9 @@ const App = () => {
 	const VoteUp = () => {
 		const copy = [...scores]
 		copy[selected] += 1
+		if (Math.max(...copy) === copy[selected]) {
+			setHigh(selected)
+		}
 		setScores(copy)
 	}
 
@@ -40,6 +59,7 @@ const App = () => {
 			<Button handler={VoteUp} text="Vote" />
 			<p>{anecdotes[selected]}</p>
 			<p>Votes: {scores[selected]}</p>
+			<HighScore anecdotes={anecdotes} highScore={highScore} scores={scores} />
 		</div>
 	)
 }