display more Stories component in post detail

vercel · Aug 24, 2020 · 8192139 · 8192139
1 parent 7c4e06b
commit 8192139
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/examples/cms-kontent/lib/api.js b/examples/cms-kontent/lib/api.js
@@ -43,6 +43,22 @@ export async function getAllPostSlugs() {
   return postsResponse.items.map((post) => post.slug.value)
 }
 
+export async function getMorePostsForSlug(slug, preview) {
+  return client
+    .items()
+    .queryConfig({
+      usePreviewMode: !!preview,
+    })
+    .type('post')
+    .orderByDescending('elements.date')
+    .withParameter('elements.slug[neq]', slug)
+    .limitParameter(2)
+    .toPromise()
+    .then((res) => {
+      return res.items.map((post) => parsePost(post))
+    })
+}
+
 export async function getPostBySlug(slug, preview) {
   const post = await client
     .items()
@@ -58,14 +74,13 @@ export async function getPostBySlug(slug, preview) {
 }
 
 export async function getAllPosts(preview) {
-  const postsResponse = await client
+  return await client
     .items()
     .queryConfig({
       usePreviewMode: !!preview,
     })
     .type('post')
     .orderByDescending('elements.date')
     .toPromise()
-
-  return postsResponse.items.map((post) => parsePost(post))
+    .then((postsResponse) => postsResponse.items.map((post) => parsePost(post)))
 }
diff --git a/examples/cms-kontent/pages/posts/[slug].js b/examples/cms-kontent/pages/posts/[slug].js
@@ -2,15 +2,21 @@ import { useRouter } from 'next/router'
 import ErrorPage from 'next/error'
 import Container from '../../components/container'
 import PostBody from '../../components/post-body'
+import MoreStories from '../../components/more-stories'
 import Header from '../../components/header'
 import PostHeader from '../../components/post-header'
+import SectionSeparator from '../../components/section-separator'
 import Layout from '../../components/layout'
-import { getPostBySlug, getAllPostSlugs } from '../../lib/api'
+import {
+  getAllPostSlugs,
+  getPostBySlug,
+  getMorePostsForSlug,
+} from '../../lib/api'
 import PostTitle from '../../components/post-title'
 import Head from 'next/head'
 import { CMS_NAME } from '../../lib/constants'
 
-export default function Post({ post, morePosts, preview }) {
+export default function Post({ post, morePosts = [], preview }) {
   const router = useRouter()
   if (!router.isFallback && !post?.slug) {
     return <ErrorPage statusCode={404} />
@@ -38,6 +44,8 @@ export default function Post({ post, morePosts, preview }) {
               />
               <PostBody content={post.content} />
             </article>
+            <SectionSeparator />
+            {morePosts.length > 0 && <MoreStories posts={morePosts} />}
           </>
         )}
       </Container>
@@ -46,14 +54,16 @@ export default function Post({ post, morePosts, preview }) {
 }
 
 export async function getStaticProps({ params, preview = null }) {
-  const post = await getPostBySlug(params.slug, preview)
-
-  return {
+  return await Promise.all([
+    getPostBySlug(params.slug, preview),
+    getMorePostsForSlug(params.slug, preview),
+  ]).then((values) => ({
     props: {
-      post,
+      post: values[0],
+      morePosts: values[1],
       preview,
     },
-  }
+  }))
 }
 
 export async function getStaticPaths() {