adding single blog post view

Author: chrisminnick

reactjsfoundations.com/public/api-tests/getPost.http

@@ -0,0 +1 @@
+https://blog.reactjsfoundations.com/wp-json/wp/v2/posts/50

reactjsfoundations.com/src/WpBlog.js

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import { useState } from 'react';
 import * as styles from './WpBlog.module.css';
+import { useParams } from 'react-router-dom';
 
 const queryClient = new QueryClient();
 
@@ -19,13 +20,19 @@ export default function WpBlog(props) {
 function ReactBlog(props) {
   const [totalPages, setTotalPages] = useState(0);
   const [page, setPage] = useState(1);
+  let { id } = useParams();
 
+  let url;
+
+  if (id) {
+    url = `https://blog.reactjsfoundations.com/wp-json/wp/v2/posts/${id}/?per_page=${props.posts}&page=${page}`;
+  } else {
+    url = `https://blog.reactjsfoundations.com/wp-json/wp/v2/posts?per_page=${props.posts}&page=${page}`;
+  }
   const { isLoading, error, data } = useQuery(
     ['posts', page],
     () => {
-      return fetch(
-        `https://blog.reactjsfoundations.com/wp-json/wp/v2/posts?per_page=${props.posts}&page=${page}`
-      ).then((res) => {
+      return fetch(url).then((res) => {
         setTotalPages(parseInt(res.headers.get('x-wp-totalpages')));
         return res.json();
       });
@@ -66,6 +73,8 @@ function ReactBlog(props) {
             className={styles.post__content}
             dangerouslySetInnerHTML={{ __html: post.content.rendered }}
           />
+
+          <hr />
         </div>
       ))}
     </div>

reactjsfoundations.com/src/WpBlogSP.js

@@ -0,0 +1,37 @@
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
+import { useState, useEffect } from 'react';
+import * as styles from './WpBlog.module.css';
+import { useParams } from 'react-router-dom';
+
+export default function ReactBlog(props) {
+  let { id } = useParams();
+  const [post, setPost] = useState();
+  useEffect(() => {
+    if (id) {
+      const getPost = async () => {
+        const response = await fetch(
+          `https://blog.reactjsfoundations.com/wp-json/wp/v2/posts/${id}/`
+        );
+        const data = await response.json();
+        console.log(data);
+        setPost(data);
+      };
+      getPost();
+    }
+  }, [id]);
+
+  if (post) {
+    return (
+      <div className={styles.blog__posts}>
+        <h1 className={styles.blog__title}>{post.title.rendered}</h1>
+        <div key={post.id}>
+          <section
+            className={styles.post__content}
+            dangerouslySetInnerHTML={{ __html: post.content.rendered }}
+          />
+        </div>
+      </div>
+    );
+  }
+  return 'Loading...';
+}

reactjsfoundations.com/src/WpBlogWidget.js

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import { useState } from 'react';
 import * as styles from './WpBlog.module.css';
+import { Link } from 'react-router-dom';
 
 const queryClient = new QueryClient();
 
@@ -56,16 +57,21 @@ function ReactBlog(props) {
       {data.map((post) => (
         <div key={post.id}>
           <h2>
-            <section
-              className={styles.post__title}
-              dangerouslySetInnerHTML={{ __html: post.title.rendered }}
-            />
+            <Link to={`/blog/${post.id}`}>
+              <section
+                className={styles.post__title}
+                dangerouslySetInnerHTML={{ __html: post.title.rendered }}
+              />
+            </Link>
           </h2>
 
           <section
             className={styles.post__content}
-            dangerouslySetInnerHTML={{ __html: post.content.rendered }}
+            dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
           />
+          <p>
+            <Link to={`/blog/${post.id}`}>Read More &gt;</Link>
+          </p>
         </div>
       ))}
     </div>

reactjsfoundations.com/src/routes.js

@@ -8,6 +8,7 @@ import ErrorBoundary from './chapter13/ErrorBoundary';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { github } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import WpBlog from './WpBlog';
+import WpBlogSP from './WpBlogSP';
 const Introduction = lazy(() => import('./Introduction'));
 const WhereToBuy = lazy(() => import('./WhereToBuy'));
 const About = lazy(() => import('./About'));
@@ -34,9 +35,12 @@ export const routes = (
     <Route path="/intro" component={Introduction} />
     <Route path="/WhereToBuy" component={WhereToBuy} />
     <Route path="/AboutChrisMinnick" component={About} />
-    <Route path="/blog">
+    <Route exact path="/blog/">
       <WpBlog posts={10} title="ReactJS Foundations Blog and Errata" />
     </Route>
+    <Route exact path="/blog/:id">
+      <WpBlogSP title="ReactJS Foundations Blog and Errata" />
+    </Route>
     <Route path="/listing102">
       <Helmet>
         <title>