fix: add column to posts table that is a string of content to use search index on

convex/posts.ts

@@ -28,8 +28,10 @@ export const createOrUpdatePost = mutation({
       return 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER';
     }
 
+    const contentText = args.content.join('\n');
+
     if (args.id) {
-      await ctx.db.patch(args.id, { content: args.content });
+      await ctx.db.patch(args.id, { content: args.content, contentText });
       return;
     }
 
@@ -37,6 +39,7 @@ export const createOrUpdatePost = mutation({
       userId: user._id,
       content: args.content,
       parentPostId: args.parentPostId,
+      contentText,
     });
   },
 });
@@ -44,12 +47,16 @@ export const createOrUpdatePost = mutation({
 export const getUsersPostById = query({
   args: { userId: v.id('users'), paginationOpts: paginationOptsValidator },
   handler: async (ctx, args) => {
-    return await ctx.db
+    const posts = await ctx.db
       .query('posts')
       .withIndex('by_user_id', q => q.eq('userId', args.userId))
       .filter(q => q.eq(q.field('parentPostId'), undefined))
       .order('desc')
       .paginate(args.paginationOpts);
+
+    const postDtos = posts.page.map(createPostDto);
+
+    return { ...posts, page: postDtos };
   },
 });
 
@@ -81,7 +88,7 @@ export const getPostById = query({
     }
 
     return {
-      ...post,
+      ...createPostDto(post),
       user: createUserDto(user),
     };
   },
@@ -100,6 +107,7 @@ export const getRepliesByParentId = query({
       ctx,
       posts: replies.page,
     });
+
     return { ...replies, page: repliesWithUserData };
   },
 });
@@ -191,8 +199,9 @@ export const getPostsBySearchTerm = query({
     const posts = await ctx.db
       .query('posts')
       .withSearchIndex('search_by_content', q =>
-        q.search('content', args.term).eq('parentPostId', undefined)
+        q.search('contentText', args.term)
       )
+      .filter(q => q.eq(q.field('parentPostId'), undefined))
       .paginate(args.paginationOpts);
 
     const postsWithUser = await getPostsWithUsers({ ctx, posts: posts.page });
@@ -210,19 +219,25 @@ async function getPostsWithUsers({
 }) {
   return await Promise.all(
     posts.map(async post => {
+      const postDto = createPostDto(post);
       const user = await ctx.db.get(post.userId);
 
       if (user === null) {
         return {
-          ...post,
+          ...postDto,
           user: createUserDto(user),
         };
       }
 
       return {
-        ...post,
+        ...postDto,
         user: createUserDto(user),
       };
     })
   );
 }
+
+function createPostDto(post: Doc<'posts'>) {
+  const { contentText, ...postDto } = post;
+  return postDto;
+}

convex/schema.ts

@@ -44,11 +44,12 @@ export default defineSchema(
       parentPostId: v.optional(v.id('posts')),
       userId: v.id('users'),
       content: v.array(v.string()),
+      contentText: v.string(),
     })
       .index('by_user_id', ['userId'])
       .index('by_parent_id', ['parentPostId'])
       .searchIndex('search_by_content', {
-        searchField: 'content',
+        searchField: 'contentText',
         filterFields: ['parentPostId'],
       }),
     likes: defineTable({

src/app/search/[term]/page.tsx

@@ -1,12 +0,0 @@
-import SearchResults from '@/components/SearchResults';
-
-export default function SearchPage({ params }: { params: { term: string } }) {
-  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'>Here&apos;s what we found</h1>
-        <SearchResults term={params.term} />
-      </div>
-    </main>
-  );
-}

src/app/search/page.tsx

@@ -0,0 +1,26 @@
+import SearchResults from '@/components/SearchResults';
+
+export default function SearchPage({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  let term = searchParams.term;
+
+  if (term === undefined) {
+    term = '';
+  }
+
+  if (Array.isArray(term)) {
+    term = term.length > 0 ? term[0] : '';
+  }
+
+  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'>Here&apos;s what we found</h1>
+        <SearchResults term={term} />
+      </div>
+    </main>
+  );
+}

src/app/types/index.ts

@@ -8,4 +8,6 @@ export type UserDto = {
   clerkUserId: string;
 };
 
-export type PostWithUserDto = Doc<'posts'> & { user: UserDto };
+export type PostWithUserDto = Omit<Doc<'posts'>, 'contentText'> & {
+  user: UserDto;
+};

src/components/Navbar.tsx

@@ -63,7 +63,7 @@ export default function Navbar() {
               <form
                 onSubmit={e => {
                   e.preventDefault();
-                  router.push(`/search/${term}`);
+                  router.push(`/search?term=${term}`);
                 }}
                 className='flex w-full relative'
               >