Search input and pagination

[PiotrSierant]

Hi, I've implemented pagination and search functionality for posts by tags and inputted phrases. As usual, it works on localhost, but after deploying to Vercel, it doesn't work.

import { Pagination } from "@/components/Pagination";
import { SearchPosts } from "@/components/Search";
import { SearchTag } from "@/components/SearchTag";
import ListLayout from "@/layouts/BlogListPosts";
import { generateSearchJSON } from "@/lib/generateSearchJSON";
import { OstDocument } from "outstatic";
import { getDocuments, load } from 'outstatic/server';

export type ExtendedOstDocument = OstDocument & { tagi: { value: string, label: string }[] };

async function getData(search: string, offset: number, tag: string) {
  const db = await load();
  const limit = 1;
  // Build the query dynamically based on provided arguments
  const whereClause: any = {
    collection: 'posts',
    status: 'published'
  };

  if (search) {
    whereClause.$or = [
      { title: { $regex: new RegExp(search, 'i') } },        // Case-insensitive search in title
      { description: { $regex: new RegExp(search, 'i') } },  // Case-insensitive search in description
      { tagi: { $elemMatch: { label: { $regex: new RegExp(search, 'i') } } } } // Case-insensitive search in tags
    ];
  }

    // Combine search and tag conditions using $and
    if (search || tag) {
      whereClause.$and = [];
  
      if (search) {
        whereClause.$and.push({
          $or: [
            { title: { $regex: new RegExp(search, 'i') } },        // Case-insensitive search in title
            { description: { $regex: new RegExp(search, 'i') } },  // Case-insensitive search in description
            { tagi: { $elemMatch: { label: { $regex: new RegExp(search, 'i') } } } } // Case-insensitive search in tags
          ]
        });
      }
  
      if (tag) {
        whereClause.$and.push({
          tagi: { $elemMatch: { value: tag } } // Search by exact tag value
        });
      }
    }

  const allPosts = await db
    .find<ExtendedOstDocument>(whereClause, [
      'title',
      'publishedAt',
      'coverImage',
      'slug',
      'description',
    ])
    .sort({ publishedAt: -1 })
    .skip(offset)
    .limit(limit)
    .toArray();

  const postsLength = getDocuments('posts')
    .filter(post => post.status == 'published')
    .length;

  if (offset === null) {
    return { 
      allPosts: allPosts, 
      postsLength: postsLength, 
      newOffset: null, 
      prevOffset: null, 
      currentOffset: null, 
      limit: limit
    };
  }

  return {
    allPosts: allPosts,
    postsLength: postsLength,
    prevOffset: offset - limit <= 0 ? 0 : offset - limit,
    newOffset: offset + limit < postsLength ? offset + limit : null,
    currentOffset: offset,
    limit: limit
  };
}

async function getDataToSearch() {
  const db = await load();
  const AllPosts = await db
    .find<ExtendedOstDocument>({ collection: 'posts', status: 'published' }, [
      'title',
      'slug',
      'description',
      'tagi'
    ])
    .sort({ publishedAt: -1 })
    .toArray()

  const posts = AllPosts.map(post => ({
    ...post,
    tagi: post.tagi.map(tag => tag.label).join(", ")
  }))

  await generateSearchJSON(posts);
  return
}

async function getTags() {
    const posts = getDocuments('posts', ['tagi']);
    if (!posts || posts.length == 0 || posts === undefined) return undefined
    const tagCounts = {} as Record<string, { value: string, label: string, count: number }>;
    const tags = posts.map(post => post.tagi);
    if (tags.length > 0) {
      tags.forEach(tagsArray => {
        if (Array.isArray(tagsArray)) {
          tagsArray.forEach(tagObj => {
            const keyword = tagObj.value;
            if (tagCounts[keyword]) {
              tagCounts[keyword].count += 1;
            } else {
              tagCounts[keyword] = { value: tagObj.value, label: tagObj.label, count: 1 };
            }
          });
        }
      });
    }
    return Object.values(tagCounts);
}

export default async function BlogPage({ searchParams }: { searchParams: { q: string; offset: string; tag: string } }) {
  await getDataToSearch();
  const tags = await getTags() as { value: string, label: string, count: number }[];
  const tag = searchParams.tag ?? "";
  const search = searchParams.q ?? '';
  const offset = searchParams.offset != null ? (Number(searchParams.offset) < 0 ? 0 : searchParams.offset) : 0;

  
  const { allPosts, postsLength, limit, prevOffset, newOffset, currentOffset } = await getData(search, Number(offset), tag);

  return (
    <main className="w-full max-w-screen-2xl mx-auto basic-padding start-content-padding">
      <div className="space-y-2 pb-8 pt-6 md:space-y-5">
        <h1>
          <span className="underline underline-offset-3 decoration-8 decoration-primary-600">Blog</span> Zdrowy-Sukces
        </h1>
        <SearchPosts value={searchParams.q} />
        <SearchTag tags={tags} value={searchParams.tag} />
      </div>
      {!allPosts || allPosts.length == 0 && (
        <p className="text-center">Nie znaleziono pasujących artykułów.</p>
      )}
      <ListLayout
        posts={allPosts}
      />
      <Pagination
        offset={newOffset}
        prevOffset={prevOffset}
        postsLength={allPosts.length}
        currentOffset={currentOffset}
        limit={limit}
      />
    </main>
  );
}

Expected behavior is shown in the video below.

Nagrywanie.2024-07-11.192726.mp4

Is there anyone who can help me bring this to a fully functional, working version?

[avitorio]

Hey @PiotrSierant, I'm sorry to hear you're having trouble with this.

Your message prompted me to try to get a search function working on my website.
And it does: https://www.andrevitorio.com/posts

I'll update the advanced blog example when I have some time. The solution involves importing the metadata.json file directly into your search component. Which might get too large if you have tons of posts. But I think it should be ok for most cases.

If you are going to have thousands of posts, maybe Algolia or another search service might be a better option.