90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { UsePaginatedQueryReturnType, usePaginatedQuery } from 'convex/react';
|
||
|
|
import { FunctionReference } from 'convex/server';
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { api } from '../../convex/_generated/api';
|
||
|
|
import { Id } from '../../convex/_generated/dataModel';
|
||
|
|
import UserProfile from './UserProfile';
|
||
|
|
|
||
|
|
type UserSearchResultsPager = UsePaginatedQueryReturnType<
|
||
|
|
FunctionReference<
|
||
|
|
'query',
|
||
|
|
'public',
|
||
|
|
{
|
||
|
|
term: string;
|
||
|
|
paginationOpts: {
|
||
|
|
id?: number | undefined;
|
||
|
|
numItems: number;
|
||
|
|
cursor: string | null;
|
||
|
|
};
|
||
|
|
},
|
||
|
|
{
|
||
|
|
page: {
|
||
|
|
_id: Id<'users'>;
|
||
|
|
_creationTime: number;
|
||
|
|
clerkUsername: string | null;
|
||
|
|
clerkImageUrl: string;
|
||
|
|
clerkUserId: string;
|
||
|
|
}[];
|
||
|
|
isDone: boolean;
|
||
|
|
continueCursor: string;
|
||
|
|
}
|
||
|
|
>
|
||
|
|
>;
|
||
|
|
|
||
|
|
function UserSearchResults({ pager }: { pager: UserSearchResultsPager }) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
{pager.results.map(user => (
|
||
|
|
<div key={user._id}>
|
||
|
|
<UserProfile user={user} />
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SearchResults({ term }: { term: string }) {
|
||
|
|
const PAGE_SIZE = 10;
|
||
|
|
const [current, setCurrent] = useState<'posts' | 'users'>('posts');
|
||
|
|
|
||
|
|
const postsPager = usePaginatedQuery(
|
||
|
|
api.posts.getPostsBySearchTerm,
|
||
|
|
{ term },
|
||
|
|
{ initialNumItems: PAGE_SIZE }
|
||
|
|
);
|
||
|
|
const usersPager = usePaginatedQuery(
|
||
|
|
api.users.getUsersBySearchTerm,
|
||
|
|
{ term },
|
||
|
|
{ initialNumItems: PAGE_SIZE }
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className='flex gap-2 border-b border-gray-600'>
|
||
|
|
<button
|
||
|
|
onClick={() => setCurrent('posts')}
|
||
|
|
disabled={current === 'posts'}
|
||
|
|
type='button'
|
||
|
|
className='py-1 px-2 border-b-4 border-transparent disabled:border-primary-accent'
|
||
|
|
>
|
||
|
|
Posts
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setCurrent('users')}
|
||
|
|
disabled={current === 'users'}
|
||
|
|
type='button'
|
||
|
|
className='py-1 px-2 border-b-4 border-transparent disabled:border-primary-accent'
|
||
|
|
>
|
||
|
|
Users
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{current === 'posts' ? 'Posts' : <UserSearchResults pager={usersPager} />}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|