EarlyTalent · andrewmo15 · Oct 3, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.4.1",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

diff --git a/public/index.html b/public/index.html
@@ -38,4 +38,9 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <title>React App</title>
+  </head>
+  <body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,23 +1,25 @@
-.App {
-  text-align: center;
+.header {
+  color: white;
+  background-color: darkcyan;
+  padding: 15px;
+  font-family: "Georgia", serif;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.body {
+  margin: 20px;
+  font-family: "Georgia", serif;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.person {
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
-.App-link {
-  color: #61dafb;
+.recipe-box {
+  border: 2px solid;
+  border-color: darkorange;
 }
+
+.recipe {
+  margin: 10px;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,16 @@
-import logo from './levvel-logo.svg';
 import './App.css';
+import Home from './Home'
+import User from './User'
+import { Route, Routes } from 'react-router-dom'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Routes>
+        <Route path="/" element={<Home />}/>
+        <Route path="/:id" element={<User/>}/>
+      </Routes>
     </div>
-  );
+  )
 }
-
 export default App;
diff --git a/src/Home.js b/src/Home.js
@@ -0,0 +1,57 @@
+import './App.css';
+import React, { useState, useEffect } from 'react';
+import {Link} from 'react-router-dom'
+
+export default function Home() {
+    const [data, setData] = useState({})            // {userid: {title: string, body: string}}
+    const [users, setUsers] = useState({})          // {userid: name}
+    useEffect(() => {
+        fetch("https://jsonplaceholder.typicode.com/posts")
+        .then(response => response.json()).catch(err => alert(err))
+        .then(json => {
+            var userPosts = {}
+            for (let post of json) {
+                if (!(post.userId in userPosts)) {
+                    userPosts[post.userId] = {"title": post.title, "body": post.body}
+                }
+            }
+            setData(userPosts)
+        }).catch(err => alert(err))
+
+        fetch("https://jsonplaceholder.typicode.com/users")
+        .then(response => response.json()).catch(err => alert(err))
+        .then(json => {
+            var userIDs = {}
+            for (let data of json) {
+                userIDs[data.id] = data.name
+            }
+            setUsers(userIDs)
+        }).catch(err => alert(err))
+
+        return () => {
+            setData({})
+            setUsers({})
+        }
+    }, [setData, setUsers])
+    return (
+        <div>
+            <div className="header">
+                <h1>Levvel's Food Blog</h1>
+            </div>
+            <div className="body">
+                <h4>Check out Top Posts from our Authors!</h4>
+                {Object.keys(data).map((user) => (
+                    <div className="person" key={user}>
+                        <Link to={`/${user}`}>{users[user]}</Link>
+                        <div className="recipe-box" key={user}>
+                            <div className="recipe">
+                                <p><strong>{data[user].title}</strong></p>
+                                <p>{data[user].body}</p>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/src/User.js b/src/User.js
@@ -0,0 +1,50 @@
+import './App.css';
+import React, { useState, useEffect } from 'react';
+import { useParams } from "react-router-dom";
+
+export default function User() {
+    const [posts, setPosts] = useState([])  // [{title: string, body: string, "postid": string}]
+    const [name, setName] = useState("")
+    const {id} = useParams();
+    useEffect(() => {
+        fetch("https://jsonplaceholder.typicode.com/posts")
+        .then(response => response.json()).catch(err => alert(err))
+        .then(json => {
+            let posts = json.filter(data => data.userId === Number(id)).map(data => {return {"title": data.title, "body": data.body, "postid": data.id}})
+            setPosts(posts)
+        }).catch(err => alert(err))
+
+        fetch("https://jsonplaceholder.typicode.com/users")
+        .then(response => response.json()).catch(err => alert(err))
+        .then(json => {
+            let name = json.filter(data => data.id === Number(id)).map(data => data.name)[0]
+            setName(name)
+        }).catch(err => alert(err))
+
+        return () => {
+            setPosts([])
+            setName("")
+        }
+    }, [id, setPosts, setName])
+    return (
+        <div>
+            <div className="header">
+                <h1>Levvel's Food Blog</h1>
+            </div>
+            <div className="body">
+                <h3>{name}</h3>
+                <h5>Check out {name.split(" ")[0]}'s Recipes!</h5>
+                {posts.map((post) => (
+                    <div className="person">
+                        <div className="recipe-box" key={post.postid}>
+                            <div className="recipe">
+                                <p><strong>{post.title}</strong></p>
+                                <p>{post.body}</p>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/src/index.js b/src/index.js
@@ -2,11 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import {BrowserRouter} from 'react-router-dom'
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
-);
-
+);