From 5d66bf963fa552a0abecdce00ffd6a22bca53dfb Mon Sep 17 00:00:00 2001
From: AndrewTrieu <andrewtrieu.2003@gmail.com>
Date: Thu, 23 Mar 2023 14:11:16 +0200
Subject: [PATCH] Upload 2.11

---
 README.md                         |  0
 part2/phonebook/db.json           | 24 ++++++++++++++++++++++++
 part2/phonebook/package-lock.json | 29 +++++++++++++++++++++++++++++
 part2/phonebook/package.json      |  1 +
 part2/phonebook/src/App.js        | 20 +++++++++++---------
 5 files changed, 65 insertions(+), 9 deletions(-)
 delete mode 100644 README.md
 create mode 100644 part2/phonebook/db.json

diff --git a/README.md b/README.md
deleted file mode 100644
index e69de29..0000000
diff --git a/part2/phonebook/db.json b/part2/phonebook/db.json
new file mode 100644
index 0000000..0636619
--- /dev/null
+++ b/part2/phonebook/db.json
@@ -0,0 +1,24 @@
+{
+  "persons":[
+    { 
+      "name": "Arto Hellas", 
+      "number": "040-123456",
+      "id": 1
+    },
+    { 
+      "name": "Ada Lovelace", 
+      "number": "39-44-5323523",
+      "id": 2
+    },
+    { 
+      "name": "Dan Abramov", 
+      "number": "12-43-234345",
+      "id": 3
+    },
+    { 
+      "name": "Mary Poppendieck", 
+      "number": "39-23-6423122",
+      "id": 4
+    }
+  ]
+}
\ No newline at end of file
diff --git a/part2/phonebook/package-lock.json b/part2/phonebook/package-lock.json
index abb9dd4..f53c2f8 100644
--- a/part2/phonebook/package-lock.json
+++ b/part2/phonebook/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.3.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
@@ -5091,6 +5092,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -14049,6 +14073,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/part2/phonebook/package.json b/part2/phonebook/package.json
index 22b98cd..86c56f6 100644
--- a/part2/phonebook/package.json
+++ b/part2/phonebook/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js
index 08b4514..bdf8d56 100644
--- a/part2/phonebook/src/App.js
+++ b/part2/phonebook/src/App.js
@@ -1,19 +1,21 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
 import PersonForm from "./components/PersonForm";
 import Filter from "./components/Filter";
 import ShowPersons from "./components/ShowPersons";
 
 const App = () => {
-  const [persons, setPersons] = useState([
-    { name: "Arto Hellas", number: "040-123456", id: 1 },
-    { name: "Ada Lovelace", number: "39-44-5323523", id: 2 },
-    { name: "Dan Abramov", number: "12-43-234345", id: 3 },
-    { name: "Mary Poppendieck", number: "39-23-6423122", id: 4 },
-  ]);
-
+  const [persons, setPersons] = useState([]);
   const [newPerson, setNewPerson] = useState({ name: "", number: "" });
   const [filter, setFilter] = useState("");
-  const [showedPersons, setShowedPersons] = useState(persons);
+  const [showedPersons, setShowedPersons] = useState([]);
+
+  useEffect(() => {
+    axios.get("http://localhost:3001/persons").then((response) => {
+      setPersons(response.data);
+      setShowedPersons(response.data);
+    });
+  }, []);
 
   const addPerson = (event) => {
     event.preventDefault();