continue lesson

parts/2/renderingCollections/src/App.jsx

@@ -1,11 +1,23 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
 import Note from "./components/Note";
 
-const App = ({ startingNotes }) => {
+const App = ({ startingNotes = [] }) => {
   const [notes, setNotes] = useState(startingNotes);
   const [newNote, setNewNote] = useState("a new note...");
   const [showAll, setShowAll] = useState(true);
 
+  useEffect(() => {
+    console.log("effect");
+    axios.get("http://localhost:3001/notes").then((response) => {
+      console.log("promise fulfilled");
+      setTimeout(() => {
+        setNotes(response.data);
+      }, 2000);
+    });
+  }, []);
+
+  console.log("render", notes.length, "notes");
   const addNote = (event) => {
     event.preventDefault();
     const newNoteObject = {

parts/2/renderingCollections/src/main.jsx

@@ -3,9 +3,4 @@ import App from "./App";
 
 import axios from "axios";
 
-axios.get("http://localhost:3001/notes").then((response) => {
-  const notes = response.data;
-  ReactDOM.createRoot(document.getElementById("root")).render(
-    <App startingNotes={notes} />
-  );
-});
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);