feat: display all posts on home page

convex/posts.ts

@@ -160,3 +160,46 @@ export const getUserPostCount = query({
     return posts.length;
   },
 });
+
+export const getAllPostsWithUser = query({
+  args: { paginationOpts: paginationOptsValidator },
+  handler: async (ctx, args) => {
+    const posts = await ctx.db
+      .query('posts')
+      .filter(q => 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/page.tsx

@@ -1,3 +1,12 @@
+import AllPosts from '@/components/AllPosts';
+
 export default function Home() {
-  return <main className='flex-1'></main>;
+  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'>Home</h1>
+        <AllPosts />
+      </div>
+    </main>
+  );
 }

src/components/AllPosts.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { usePaginatedQuery } from 'convex/react';
+import { api } from '../../convex/_generated/api';
+import Loader from './Loader';
+import Post from './Post';
+
+export default function AllPosts() {
+  const PAGE_SIZE = 10;
+  const pager = usePaginatedQuery(
+    api.posts.getAllPostsWithUser,
+    {},
+    { initialNumItems: PAGE_SIZE }
+  );
+
+  function handleLoadMoreClick() {
+    pager.loadMore(PAGE_SIZE);
+  }
+
+  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

@@ -3,6 +3,7 @@
 import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import { AiFillHome } from 'react-icons/ai';
 import { BiLogIn, BiPlus } from 'react-icons/bi';
 import { BsPersonPlusFill } from 'react-icons/bs';
 import { ImProfile } from 'react-icons/im';
@@ -64,6 +65,19 @@ export default function Navbar() {
                 />
               </div>
             </li>
+            <li>
+              <div className='flex items-center gap-2'>
+                <div className='p-1 md:hidden'>
+                  <AiFillHome className='w-6 h-6' />
+                </div>
+                <Link
+                  onClick={() => setNavOpen(false)}
+                  href='/'
+                >
+                  Home
+                </Link>
+              </div>
+            </li>
             <li>
               <div className='flex items-center gap-2'>
                 <div className='p-1 md:hidden'>

src/components/UserButton.tsx

@@ -1,8 +1,9 @@
 'use client';
 import { useMountedEffect } from '@/hooks';
 import { UserButton as ClerkUserButton } from '@clerk/nextjs';
+import { ReactNode } from 'react';
 
-export default function UserButton() {
+export default function UserButton({ children }: { children?: ReactNode }) {
   const { mounted } = useMountedEffect();
 
   if (mounted === false) {

src/components/UserPosts.tsx

@@ -8,7 +8,7 @@ import Loader from './Loader';
 import Post from './Post';
 
 export default function UserPosts({ user }: { user: UserDto }) {
-  const PAGE_SIZE = 1;
+  const PAGE_SIZE = 10;
   const pager = usePaginatedQuery(
     api.posts.getUsersPostById,
     {