feat: begin building out search results component

2023-09-15 23:43:36 -05:00
parent 2162f87cfb
commit 18cb4fe0d9
7 changed files with 191 additions and 116 deletions
@@ -0,0 +1,89 @@
+'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>
+  );
+}