refactor: fetch previous post slug only

Author: BuiltByWalsh

app/posts/[slug]/actions.test.ts

@@ -1,6 +1,6 @@
 import * as postsActions from '../actions'
 
-import { fetchPostBySlug, fetchPreviousPost } from './actions'
+import { fetchPostBySlug, fetchPreviousPostSlug } from './actions'
 
 import * as mdx from '@/lib/mdx'
 import type { Post } from '@/lib/types'
@@ -57,7 +57,7 @@ describe('/posts/[slug]/actions', () => {
     })
   })
 
-  describe('fetchPreviousPost', () => {
+  describe('fetchPreviousPostBySlug', () => {
     const mockPosts: Post[] = [
       { slug: 'slug-1', ...getMockFrontmatter(), source: getMockSource() },
       { slug: 'slug-2', ...getMockFrontmatter(), source: getMockSource() },
@@ -66,15 +66,14 @@ describe('/posts/[slug]/actions', () => {
     it('returns the next index of results returned from fetchPublishedPosts()', async () => {
       vi.mocked(postsActions.fetchPublishedPosts).mockResolvedValue(mockPosts)
 
-      const actual = await fetchPreviousPost('slug-1')
-      expect(actual).toBeTruthy()
-      expect(actual?.slug).toEqual('slug-2')
+      const actual = await fetchPreviousPostSlug('slug-1')
+      expect(actual).toEqual('slug-2')
     })
 
     it('returns undefined when the bottom of the list is reached', async () => {
       vi.mocked(postsActions.fetchPublishedPosts).mockResolvedValue(mockPosts)
 
-      const actual = await fetchPreviousPost('slug-2')
+      const actual = await fetchPreviousPostSlug('slug-2')
       expect(actual).toBeUndefined()
     })
   })

app/posts/[slug]/actions.ts

@@ -23,11 +23,13 @@ export async function fetchPostBySlug(slug: string): Promise<Post> {
   }
 }
 
-export async function fetchPreviousPost(slug: string): Promise<Post | undefined> {
+export async function fetchPreviousPostSlug(slug: string): Promise<string | undefined> {
   const publishedPosts = await fetchPublishedPosts()
   const postIndex = publishedPosts.findIndex((post) => post.slug === slug)
 
   if (postIndex === publishedPosts.length - 1) return undefined
 
-  return publishedPosts[postIndex + 1]
+  const previousPost = publishedPosts.at(postIndex + 1)
+
+  return previousPost && previousPost.slug
 }

app/posts/[slug]/page.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 
 import { fetchPublishedPosts } from '../actions'
 
-import { fetchPostBySlug, fetchPreviousPost } from './actions'
+import { fetchPostBySlug, fetchPreviousPostSlug } from './actions'
 import MDXContent from './mdx-content'
 import TimeInformation from './time-information'
 
@@ -49,8 +49,7 @@ export const generateMetadata = async ({ params }: { params: Promise<{ slug: str
 
 export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
-  const post = await fetchPostBySlug(slug)
-  const previousPost = await fetchPreviousPost(slug)
+  const [post, previousPostSlug] = await Promise.all([fetchPostBySlug(slug), fetchPreviousPostSlug(slug)])
 
   return (
     <div className="mx-0 my-10 flex flex-col items-center md:mx-20">
@@ -74,9 +73,9 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
           <ChevronLeft width={16} height={16} />
           &nbsp;All posts
         </Link>
-        {!!previousPost && (
+        {previousPostSlug && (
           <Link
-            href={`/posts/${previousPost.slug}`}
+            href={`/posts/${previousPostSlug}`}
             className={cn(buttonVariants({ variant: 'outline' }), 'w-2/5 md:w-1/2')}
           >
             <ChevronRight width={16} height={16} />