feat: display posts of those a user follows on following page

.vscode/settings.json

@@ -3,6 +3,7 @@
   "cSpell.words": [
     "codemirror",
     "conve",
+    "doesn",
     "Keymap",
     "lezer",
     "nextjs",

convex/posts.ts

@@ -1,4 +1,4 @@
-import { paginationOptsValidator } from 'convex/server';
+import { PaginationResult, paginationOptsValidator } from 'convex/server';
 import { v } from 'convex/values';
 import { PostWithUserDto } from '../src/app/types';
 import { Id } from './_generated/dataModel';
@@ -203,3 +203,72 @@ export const getAllPostsWithUser = query({
     return { ...posts, page: postsWithUser };
   },
 });
+
+export const getAllPostsForFollowings = query({
+  args: { paginationOpts: paginationOptsValidator },
+  handler: async (ctx, args): Promise<PaginationResult<PostWithUserDto>> => {
+    const currentUser = await ctx.auth.getUserIdentity();
+
+    if (currentUser === null) {
+      return { isDone: true, continueCursor: '', page: [] };
+    }
+
+    const user = await userQuery(ctx, currentUser.subject);
+
+    if (user === null) {
+      return { isDone: true, continueCursor: '', page: [] };
+    }
+
+    const followings = await ctx.db
+      .query('follows')
+      .withIndex('by_follower', q => q.eq('follower', user._id))
+      .collect();
+
+    const posts = await ctx.db
+      .query('posts')
+      .filter(q =>
+        q.and(
+          q.or(
+            ...followings.map(following =>
+              q.eq(q.field('userId'), following.following)
+            )
+          ),
+          q.eq(q.field('parentPostId'), undefined)
+        )
+      )
+      .order('desc')
+      .paginate(args.paginationOpts);
+
+    const postsWithUser = await Promise.all(
+      posts.page.map(async post => {
+        const user = await ctx.db.get(post.userId);
+
+        if (user === null) {
+          return {
+            ...post,
+            user: {
+              _id: '' as Id<'users'>,
+              _creationTime: 0,
+              clerkUsername: null,
+              clerkImageUrl: '',
+              clerkUserId: '',
+            },
+          };
+        }
+
+        return {
+          ...post,
+          user: {
+            _id: user._id,
+            _creationTime: user._creationTime,
+            clerkUsername: user.clerkUser.username,
+            clerkImageUrl: user.clerkUser.image_url,
+            clerkUserId: user.clerkUser.id,
+          },
+        };
+      })
+    );
+
+    return { ...posts, page: postsWithUser };
+  },
+});

src/app/following/page.tsx

@@ -0,0 +1,12 @@
+import FollowingPosts from '@/components/FollowingPosts';
+
+export default function FollowingPage() {
+  return (
+    <main className='flex flex-col items-center flex-1'>
+      <div className='flex flex-col w-full max-w-4xl gap-4'>
+        <h1 className='text-4xl font-bold'>Following</h1>
+        <FollowingPosts />
+      </div>
+    </main>
+  );
+}

src/components/AllPosts.tsx

@@ -17,6 +17,16 @@ export default function AllPosts() {
     pager.loadMore(PAGE_SIZE);
   }
 
+  if (pager.isLoading === false && pager.results.length == 0) {
+    return (
+      <div className='flex flex-col justify-center items-center gap-2'>
+        <h2 className='text-2xl'>
+          Hmmm it doesn&apos;t look like anyone has posted.
+        </h2>
+      </div>
+    );
+  }
+
   return (
     <div className='flex flex-col items-center w-full'>
       <div className='flex flex-col items-center w-full'>

src/components/FollowingPosts.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { usePaginatedQuery } from 'convex/react';
+import Link from 'next/link';
+import { api } from '../../convex/_generated/api';
+import Loader from './Loader';
+import Post from './Post';
+
+export default function FollowingPosts() {
+  const PAGE_SIZE = 10;
+  const pager = usePaginatedQuery(
+    api.posts.getAllPostsForFollowings,
+    {},
+    { initialNumItems: PAGE_SIZE }
+  );
+
+  function handleLoadMoreClick() {
+    pager.loadMore(PAGE_SIZE);
+  }
+
+  if (pager.isLoading === false && pager.results.length == 0) {
+    return (
+      <div className='flex flex-col justify-center items-center gap-2'>
+        <h2 className='text-2xl'>
+          Hmmm it doesn&apos;t look like you follow anyone or anyone who has
+          made a post yet.
+        </h2>
+        <Link
+          href='/'
+          className='max-w-max py-1 px-3 text-white bg-primary-accent rounded-md'
+        >
+          Find someone to follow
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-col items-center w-full'>
+      <div className='flex flex-col items-center w-full'>
+        {pager.results.map(post => (
+          <div
+            key={post._id}
+            className='w-full border border-t-0 border-gray-600 first:border-t last:rounded-b-md p-1 last:mb-4'
+          >
+            <Post post={post} />
+          </div>
+        ))}
+      </div>
+      <Loader
+        isLoading={pager.isLoading}
+        status={pager.status}
+        loadButtonClickHandler={handleLoadMoreClick}
+      />
+    </div>
+  );
+}

src/components/Navbar.tsx

@@ -85,7 +85,7 @@ export default function Navbar() {
                 </div>
                 <Link
                   onClick={() => setNavOpen(false)}
-                  href='#'
+                  href='/following'
                 >
                   Following
                 </Link>