From 53abf6660818e78495886655cfd6231a5a6b0380 Mon Sep 17 00:00:00 2001
From: Pablo Martin <pablo.martin@superhog.com>
Date: Tue, 20 May 2025 15:02:17 +0200
Subject: [PATCH] completed exercise 1.13

---
 parts/1/anecdotes/src/App.jsx  | 39 +++++++++++++++++++---------------
 parts/1/anecdotes/src/main.jsx | 11 +++++++++-
 parts/1/notes.md               |  4 ++--
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/parts/1/anecdotes/src/App.jsx b/parts/1/anecdotes/src/App.jsx
index 91ce188..f4892ea 100644
--- a/parts/1/anecdotes/src/App.jsx
+++ b/parts/1/anecdotes/src/App.jsx
@@ -1,8 +1,12 @@
 import { useState } from 'react'
 
 const AnecdoteDisplay = (props) => {
+
+  const inflectedVotesString =  (props.anecdoteVotes === 1) ? 'vote' : 'votes'
+
   return <div>
-    {props.anecdotes[props.anecdoteIndex]}
+    <p>{props.anecdotes[props.anecdoteIndex]}</p>
+    <p>This quote has <em>{props.anecdoteVotes}</em> {inflectedVotesString}.</p>
   </div>
 }
 
@@ -10,25 +14,26 @@ const Button = (props) => {
   return <button onClick={props.onClickCallback}>{props.buttonText} </button>;
 };
 
-const App = () => {
-  const anecdotes = [
-    'If it hurts, do it more often.',
-    'Adding manpower to a late software project makes it later!',
-    'The first 90 percent of the code accounts for the first 90 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
-    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
-    'Premature optimization is the root of all evil.',
-    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
-    'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients.',
-    'The only way to go fast, is to go well.'
-  ]
-   
-  const [selected, setSelected] = useState(Math.floor(Math.random() * anecdotes.length));
-  const selectRandomAnecdote = () => {
-    setSelected(Math.floor(Math.random() * anecdotes.length))
+const App = (props) => {
+  const [selected, setSelected] = useState(Math.floor(Math.random() * props.anecdotes.length));
+  const [votes, setVotes] = useState(
+    Array(props.anecdotes.length).fill(0)
+  )
+  
+  const voteQuote = () => {
+    const newVotes = [...votes]
+    newVotes[selected]++
+    setVotes(newVotes);
   }
+
+  const selectRandomAnecdote = () => {
+    setSelected(Math.floor(Math.random() * props.anecdotes.length))
+  }
+
   return (
     <>
-    <AnecdoteDisplay anecdotes={anecdotes} anecdoteIndex={selected}/>
+    <AnecdoteDisplay anecdotes={props.anecdotes} anecdoteIndex={selected} anecdoteVotes={votes[selected]}/>
+    <Button buttonText={'Vote this'} onClickCallback={voteQuote}/>
     <Button buttonText={'Next'} onClickCallback={selectRandomAnecdote}/>
     </>
   )
diff --git a/parts/1/anecdotes/src/main.jsx b/parts/1/anecdotes/src/main.jsx
index 14ef96e..955edf5 100644
--- a/parts/1/anecdotes/src/main.jsx
+++ b/parts/1/anecdotes/src/main.jsx
@@ -3,5 +3,14 @@ import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-    <App />
+    <App anecdotes={[
+        'If it hurts, do it more often.',
+        'Adding manpower to a late software project makes it later!',
+        'The first 90 percent of the code accounts for the first 90 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
+        'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
+        'Premature optimization is the root of all evil.',
+        'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
+        'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients.',
+        'The only way to go fast, is to go well.'
+      ]}/>
 )
diff --git a/parts/1/notes.md b/parts/1/notes.md
index ca41b56..2f21423 100644
--- a/parts/1/notes.md
+++ b/parts/1/notes.md
@@ -14,7 +14,7 @@ Exercises:
 * [X] 1.10
 * [X] 1.11
 * [X] 1.12
-* [ ] 1.13
+* [X] 1.13
 * [ ] 1.14
 
 My own final exercise:
@@ -22,5 +22,5 @@ My own final exercise:
     - Assume loans are always one year long and paid monthly.
     - Assume french amortization.
     - The app refreshes everything automatically every time any input is edited.
-    - The state of the application should be stored locally. The user must see the same thing if they close and visit the page again.
     - Make it so that the user can compare multiple options side by side.
+    - The state of the application should be stored locally. The user must see the same thing if they close and visit the page again.