feat: display all posts on home page

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,
     {