final-state

Author: mikehazell

src/api.js

@@ -11,6 +11,11 @@ export function getPostById({ id }) {
   return wrapPromise(get(url));
 }
 
+export function getCommentsByPostId({ id }) {
+  const url = new URL(`/api/comments/${id}`, urlBase);
+  return wrapPromise(get(url));
+}
+
 async function get(url) {
   const response = await fetch(url.toString(), {
     contentType: "application/json"

src/pages/Detail.js

@@ -1,20 +1,26 @@
-import React, { Suspense } from "react";
+import React, { Suspense, SuspenseList } from "react";
 import { Stack, Heading } from "@chakra-ui/core";
 
 import { PageWrapper } from "../components/PageWrapper";
 import { PostList, PostListPH } from "../components/PostList";
 import { PostDetail } from "../components/PostDetail";
+import { CommentsList, CommentsListPH } from "../components/CommentsList";
 
-export default function Detail({ post, relatedPosts }) {
+export default function Detail({ post, relatedPosts, comments }) {
   const postData = post.read();
 
   return (
     <PageWrapper>
       <Stack spacing={4}>
         <PostDetail post={postData} />
-        <Suspense fallback={<RelatedPostsPH />}>
-          <RelatedPosts posts={relatedPosts} />
-        </Suspense>
+        <SuspenseList revealOrder="forwards">
+          <Suspense fallback={<CommentsPH />}>
+            <Comments comments={comments} />
+          </Suspense>
+          <Suspense fallback={<RelatedPostsPH />}>
+            <RelatedPosts posts={relatedPosts} />
+          </Suspense>
+        </SuspenseList>
       </Stack>
     </PageWrapper>
   );
@@ -48,3 +54,33 @@ const RelatedPostsWrapper = ({ children, props }) => (
     {children}
   </Stack>
 );
+
+// Comments
+const Comments = ({ comments }) => {
+  const commentsData = comments.read();
+  return (
+    <CommentsWrapper>
+      <CommentsList comments={commentsData} />
+    </CommentsWrapper>
+  );
+};
+
+const CommentsPH = () => (
+  <CommentsWrapper>
+    <CommentsListPH placeholders={3} />
+  </CommentsWrapper>
+);
+
+const CommentsWrapper = ({ children, props }) => (
+  <Stack spacing={8} mb={8}>
+    <Heading
+      size="md"
+      pb={4}
+      borderBottomWidth="1px"
+      borderBottomColor="gray.200"
+    >
+      Comments
+    </Heading>
+    {children}
+  </Stack>
+);

src/router.js

@@ -1,5 +1,5 @@
 import { createRouter } from "./lib/createRouter";
-import { getPosts, getPostById } from "./api";
+import { getPosts, getPostById, getCommentsByPostId } from "./api";
 
 // Routes
 const routes = [
@@ -8,7 +8,8 @@ const routes = [
     loadCode: () => import("./pages/Detail"),
     loadData: ({ postId }) => ({
       post: getPostById({ id: postId }),
-      relatedPosts: getPosts({ limit: 3, relatedTo: postId })
+      relatedPosts: getPosts({ limit: 3, relatedTo: postId }),
+      comments: getCommentsByPostId({ id: postId })
     })
   },
   {