add routes and post detail page

package.json

@@ -9,6 +9,7 @@
     "npm": "^7.21.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "uniqid": "^5.3.0",
     "web-vitals": "^1.1.2"

src/Routes.js

@@ -0,0 +1,18 @@
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+import App from "./App";
+import PostDetail from "./components/PostDetail";
+
+const Routes = () => {
+  const posts = "/posts";
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route exact path="/" component={App} />
+        <Route exact path={posts} component={App} />
+        <Route path={`${posts}/:id`} component={PostDetail} />
+      </Switch>
+    </BrowserRouter>
+  );
+};
+
+export default Routes;

src/components/PostDetail.js

@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+import { getPost } from "../data/source/blogApi";
+
+const PostDetail = () => {
+  const [post, setPost] = useState({
+    title: "",
+    timestamp: "",
+    text: "",
+    user: {
+      username: "",
+      password: "",
+    },
+  });
+
+  const { id } = useParams();
+
+  useEffect(() => {
+    const pullPost = async () => {
+      setPost(await getPost(id));
+    };
+    pullPost();
+  }, [id]);
+
+  let { title, timestamp, text, user } = post;
+  return (
+    <div className="PostDetail">
+      <h1>{title}</h1>
+      <div>- {user.username}</div>
+      <div>{timestamp}</div>
+      <hr />
+      <div>{text}</div>
+      <hr />
+      <div>TODO: add comments</div>
+      <div>TODO: display comments</div>
+    </div>
+  );
+};
+
+export default PostDetail;

src/data/source/blogApi.js

@@ -1,9 +1,15 @@
 const API_URL = process.env.REACT_APP_API_URL;
 
+const getPost = async (id) => {
+  const response = await fetch(`${API_URL}/posts/${id}`, { mode: "cors" });
+  const post = await response.json();
+  return post;
+};
+
 const getPosts = async () => {
   const response = await fetch(`${API_URL}/posts`, { mode: "cors" });
   const posts = await response.json();
   return posts;
 };
 
-export { getPosts };
+export { getPost, getPosts };

src/index.js

@@ -1,11 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import Routes from "./Routes";
 
 document.title = "Blog Reader";
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Routes />
   </React.StrictMode>,
   document.getElementById("root")
 );