55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { UserDto } from '@/app/types';
|
|
import { usePaginatedQuery } from 'convex/react';
|
|
import { api } from '../../convex/_generated/api';
|
|
import Post from './Post';
|
|
import SpinningLoader from './SpinningLoader';
|
|
|
|
export default function UserPosts({ user }: { user: UserDto }) {
|
|
const PAGE_SIZE = 1;
|
|
const pager = usePaginatedQuery(
|
|
api.posts.getUsersPostById,
|
|
{
|
|
userId: user._id,
|
|
},
|
|
{ initialNumItems: PAGE_SIZE }
|
|
);
|
|
|
|
const postsWithUser = pager.results.map(post => ({ ...post, user }));
|
|
|
|
return (
|
|
<div className='flex flex-col items-center w-full h-full'>
|
|
{postsWithUser.map(post => (
|
|
<Post
|
|
key={post._id}
|
|
post={post}
|
|
/>
|
|
))}
|
|
{pager.isLoading ? (
|
|
<div className='flex items-center gap-2 p-5'>
|
|
<SpinningLoader className='animate-spin w-5 h-5' />
|
|
Loading...
|
|
</div>
|
|
) : pager.status === 'CanLoadMore' ? (
|
|
<div className='flex items-center p-5'>
|
|
<button
|
|
className='bg-primary-accent px-3 py-1 rounded-full'
|
|
onClick={() => pager.loadMore(PAGE_SIZE)}
|
|
disabled={pager.status !== 'CanLoadMore'}
|
|
>
|
|
{pager.isLoading ? (
|
|
<>
|
|
<SpinningLoader className='animate-spin w-5 h-5' />
|
|
Loading...
|
|
</>
|
|
) : (
|
|
'Load More'
|
|
)}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|