following along

parts/2/renderingCollections/db.json

@@ -3,17 +3,47 @@
     {
       "id": "1",
       "content": "HTML is easy",
-        "important": true
+      "important": false
     },
     {
       "id": "2",
       "content": "Browser can execute only JavaScript",
-        "important": false
+      "important": true
     },
     {
       "id": "3",
       "content": "GET and POST are the most important methods of HTTP protocol",
       "important": true
+    },
+    {
+      "id": "4",
+      "content": "123",
+      "important": false
+    },
+    {
+      "id": "5",
+      "content": "1233123111",
+      "important": true
+    },
+    {
+      "id": "6",
+      "content": "",
+      "important": true
+    },
+    {
+      "id": "7",
+      "content": "333",
+      "important": false
+    },
+    {
+      "id": "8",
+      "content": "123",
+      "important": false
+    },
+    {
+      "id": "9",
+      "content": "11111111111",
+      "important": false
     }
   ]
 }

parts/2/renderingCollections/src/App.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
 import Note from "./components/Note";
+import noteService from "./services/notes";
 
 const App = ({ startingNotes = [] }) => {
   const [notes, setNotes] = useState(startingNotes);
@@ -8,16 +8,13 @@ const App = ({ startingNotes = [] }) => {
   const [showAll, setShowAll] = useState(true);
 
   useEffect(() => {
-    console.log("effect");
-    axios.get("http://localhost:3001/notes").then((response) => {
-      console.log("promise fulfilled");
+    noteService.getAll().then((response) => {
       setTimeout(() => {
         setNotes(response.data);
       }, 2000);
     });
   }, []);
 
-  console.log("render", notes.length, "notes");
   const addNote = (event) => {
     event.preventDefault();
     const newNoteObject = {
@@ -26,12 +23,14 @@ const App = ({ startingNotes = [] }) => {
       id: String(notes.length + 1),
     };
 
-    setNotes(notes.concat(newNoteObject));
+    noteService.create(newNoteObject).then((response) => {
+      setNotes(notes.concat(response.data));
+    });
+
     setNewNote("");
   };
 
   const handleNoteChange = (event) => {
-    console.log(event.target.value);
     setNewNote(event.target.value);
   };
 
@@ -39,6 +38,15 @@ const App = ({ startingNotes = [] }) => {
     ? notes
     : notes.filter((note) => note.important === true);
 
+  const toggleImportanceOf = (id) => {
+    const note = notes.find((n) => n.id === id);
+    const changedNote = { ...note, important: !note.important };
+
+    noteService.update(id, changedNote).then((response) => {
+      setNotes(notes.map((note) => (note.id === id ? response.data : note)));
+    });
+  };
+
   return (
     <div>
       <h1>Notes</h1>
@@ -49,7 +57,16 @@ const App = ({ startingNotes = [] }) => {
           show {showAll ? "important" : "all"}{" "}
         </button>{" "}
       </div>
-      <ul>{notesToShow.map((note) => Note({ note }))}</ul>
+      <ul>
+        {notesToShow.map((note) =>
+          Note({
+            note,
+            toggleImportance: () => {
+              toggleImportanceOf(note.id);
+            },
+          })
+        )}
+      </ul>
       <form onSubmit={addNote}>
         <input value={newNote} onChange={handleNoteChange} />
         <button type="submit">save</button>

parts/2/renderingCollections/src/components/Note.jsx

@@ -1,5 +1,14 @@
-const Note = ({ note }) => {
-  return <li key={note.id}> {note.content}</li>;
+const Note = ({ note, toggleImportance }) => {
+  const importanceLabel = note.important
+    ? "make not important"
+    : "make important";
+  return (
+    <li key={note.id}>
+      {" "}
+      {note.content}{" "}
+      <button onClick={toggleImportance}>{importanceLabel}</button>
+    </li>
+  );
 };
 
-export default Note
+export default Note;

parts/2/renderingCollections/src/services/notes.js

@@ -0,0 +1,20 @@
+import axios from "axios";
+const baseUrl = "http://localhost:3001/notes";
+
+const getAll = () => {
+  return axios.get(baseUrl);
+};
+
+const create = (newObject) => {
+  return axios.post(baseUrl, newObject);
+};
+
+const update = (id, newObject) => {
+  return axios.put(`${baseUrl}/${id}`, newObject);
+};
+
+export default {
+  getAll: getAll,
+  create: create,
+  update: update,
+};