From c699628d8d1819f910d29d7642645fb627b2b2fe Mon Sep 17 00:00:00 2001
From: Pablo Martin <pablo.martin@superhog.com>
Date: Tue, 20 May 2025 18:41:16 +0200
Subject: [PATCH] followed along part 2b, ready for next exercises

---
 parts/2/notes.md                          |  6 ++++
 parts/2/renderingCollections/src/App.jsx  | 41 +++++++++++++++++++++--
 parts/2/renderingCollections/src/main.jsx |  2 +-
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/parts/2/notes.md b/parts/2/notes.md
index 0173fc0..b4d97c8 100644
--- a/parts/2/notes.md
+++ b/parts/2/notes.md
@@ -4,3 +4,9 @@ Exercises:
 * [X] 2.3
 * [X] 2.4
 * [X] 2.5
+* [ ] 2.5
+* [ ] 2.6
+* [ ] 2.7
+* [ ] 2.8
+* [ ] 2.9
+* [ ] 2.10
diff --git a/parts/2/renderingCollections/src/App.jsx b/parts/2/renderingCollections/src/App.jsx
index a39d2e8..a684d52 100644
--- a/parts/2/renderingCollections/src/App.jsx
+++ b/parts/2/renderingCollections/src/App.jsx
@@ -1,10 +1,47 @@
+import { useState } from "react";
 import Note from "./components/Note";
 
-const App = ({ notes }) => {
+const App = ({ startingNotes }) => {
+  const [notes, setNotes] = useState(startingNotes);
+  const [newNote, setNewNote] = useState("a new note...");
+  const [showAll, setShowAll] = useState(true);
+
+  const addNote = (event) => {
+    event.preventDefault();
+    const newNoteObject = {
+      content: newNote,
+      important: Math.random() < 0.5,
+      id: String(notes.length + 1),
+    };
+
+    setNotes(notes.concat(newNoteObject));
+    setNewNote("");
+  };
+
+  const handleNoteChange = (event) => {
+    console.log(event.target.value);
+    setNewNote(event.target.value);
+  };
+
+  const notesToShow = showAll
+    ? notes
+    : notes.filter((note) => note.important === true);
+
   return (
     <div>
       <h1>Notes</h1>
-      <ul>{notes.map((note) => Note({ note }))}</ul>
+      <div>
+        {" "}
+        <button onClick={() => setShowAll(!showAll)}>
+          {" "}
+          show {showAll ? "important" : "all"}{" "}
+        </button>{" "}
+      </div>
+      <ul>{notesToShow.map((note) => Note({ note }))}</ul>
+      <form onSubmit={addNote}>
+        <input value={newNote} onChange={handleNoteChange} />
+        <button type="submit">save</button>
+      </form>
     </div>
   );
 };
diff --git a/parts/2/renderingCollections/src/main.jsx b/parts/2/renderingCollections/src/main.jsx
index 27319ff..47bb16b 100644
--- a/parts/2/renderingCollections/src/main.jsx
+++ b/parts/2/renderingCollections/src/main.jsx
@@ -20,5 +20,5 @@ const notes = [
 ]
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <App notes={notes} />
+  <App startingNotes={notes} />
 )
\ No newline at end of file