From a3629fcbbcd2a0fecebf6eee7b8f4f3879fcbfb1 Mon Sep 17 00:00:00 2001
From: Jesse Hurdle <Jesse.Hurdle@gmail.com>
Date: Sat, 28 Aug 2021 14:24:50 -0400
Subject: [PATCH] add routes and post detail page

---
 package.json                 |  1 +
 src/Routes.js                | 18 ++++++++++++++++
 src/components/PostDetail.js | 41 ++++++++++++++++++++++++++++++++++++
 src/data/source/blogApi.js   |  8 ++++++-
 src/index.js                 |  4 ++--
 5 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 src/Routes.js
 create mode 100644 src/components/PostDetail.js

diff --git a/package.json b/package.json
index f0713d8..7088f15 100644
--- a/package.json
+++ b/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"
diff --git a/src/Routes.js b/src/Routes.js
new file mode 100644
index 0000000..9bafddb
--- /dev/null
+++ b/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;
diff --git a/src/components/PostDetail.js b/src/components/PostDetail.js
new file mode 100644
index 0000000..885e777
--- /dev/null
+++ b/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;
diff --git a/src/data/source/blogApi.js b/src/data/source/blogApi.js
index 1c0c399..ade9302 100644
--- a/src/data/source/blogApi.js
+++ b/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 };
diff --git a/src/index.js b/src/index.js
index a9d5395..cd3d08f 100644
--- a/src/index.js
+++ b/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")
 );