From c33bcb13cc37673c610879674e3a1190e574963e Mon Sep 17 00:00:00 2001
From: SaishJ <saishjagtap0003@gmail.com>
Date: Tue, 13 Sep 2022 13:56:55 +0530
Subject: [PATCH] :globe_with_meridians: HTTP Get Request

HTTP Get Request
---
 README.md                  |  2 +-
 package-lock.json          | 44 ++++++++++++++++++++++++++++++++++++++
 package.json               |  1 +
 src/App.js                 |  6 ++++--
 src/components/PostList.js | 42 ++++++++++++++++++++++++++++++++++++
 5 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/components/PostList.js

diff --git a/README.md b/README.md
index 8f4d455..e7779b8 100644
--- a/README.md
+++ b/README.md
@@ -241,4 +241,4 @@ export default UpdatedComponent;
 
 ### [Render Peops](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/d60d9bec7747e75247a97d22406520cbac48fa0a)
 
-### [Context]()
+### [Context](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/c925fec6db26889ac391d1c8cd072b67e40c2b49)
diff --git a/package-lock.json b/package-lock.json
index 295809b..2ecd10d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.27.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
@@ -4771,6 +4772,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.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": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -19991,6 +20014,27 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
       "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA=="
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "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==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
diff --git a/package.json b/package.json
index 7b44cc9..8693d2a 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
diff --git a/src/App.js b/src/App.js
index b68b8cf..df84486 100644
--- a/src/App.js
+++ b/src/App.js
@@ -31,13 +31,15 @@ import ClickCounterTwo from "./components/ClickCounterTwo";
 import HoverCounterTwo from "./components/HoverCounterTwo";
 import { UserProvider } from "./components/useContext";
 import ComponentA from "./components/ComponentA";
+import PostList from "./components/PostList";
 
 function App() {
   return (
     <div className="App">
-      <UserProvider value="Saish">
+      <PostList />
+      {/* <UserProvider value="Saish">
         <ComponentA />
-      </UserProvider>
+      </UserProvider> */}
       {/* <Increment
         render={(count, incrementCount) => (
           <ClickCounterTwo count={count} incrementCount={incrementCount} />
diff --git a/src/components/PostList.js b/src/components/PostList.js
new file mode 100644
index 0000000..864b8d1
--- /dev/null
+++ b/src/components/PostList.js
@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import axios from "axios";
+
+class PostList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      posts: [],
+      errMsg: "",
+    };
+  }
+
+  componentDidMount() {
+    axios
+      .get("https://jsonplaceholder.typicode.com/posts")
+      .then((response) => {
+        console.log(response);
+        this.setState({ posts: response.data });
+      })
+      .catch((error) => {
+        console.log(error);
+        this.setState({ errMsg: "Error retrieving data..." });
+      });
+  }
+
+  render() {
+    const { posts, errMsg } = this.state;
+    return (
+      <div>
+        <h1>Post List</h1>
+        {posts.length ? (
+          posts.map((post) => <h3 key={post.id}>{post.title}</h3>)
+        ) : (
+          <h3>{errMsg}</h3>
+        )}
+      </div>
+    );
+  }
+}
+
+export default PostList;