Requesting to review my code `pagination bug` to Dev friend.

page.tsx

import { DocList } from "@/@application";
import { getDocuments } from "@/app/actions";
import { IdeasContainer } from "@/app/containers";
import { AppLoadmore } from "@/components";
import { env } from "@/config";
import { Container } from "@mantine/core";
import { Query } from "appwrite";

interface Props {
  searchParams: {
    t?: string;
    tag?: string;
    q?: string; // search query
    p?: number; // numbers to skip. useful for pagination
  };
}

type key = "digital-products" | "ai-saas";
const defaultKey = "digital-products";

export default async function AppSaaSIdeas({
  searchParams: { t, q, tag, p },
}: Props) {
  const tabs = {
    "digital-products": {
      collectionId: env.awColDigProdSaas,
      t: "digital-products",
      q: [
        ...(q ? [Query.contains("title", [q])] : ([] as string[])),
        Query.limit(16),
        ...(p ? [Query.offset(p * 16)] : ([Query.offset(0)] as string[])),
      ],
    },
    "ai-saas": {
      collectionId: env.awColAiSaas,
      t: "ai-saas",
      q: [
        ...(q ? [Query.contains("title", [q])] : ([] as string[])),
        ...(tag ? [Query.equal("tag", [tag])] : ([] as string[])),
        Query.limit(16),
        ...(p ? [Query.offset(p * 16)] : ([Query.offset(0)] as string[])),
      ] as string[],
    },
  };

  let data: DocList = { documents: [], total: 0 };

  const tab = tabs[(t as key) || defaultKey];
  console.log({ q: tab.q });
  data = await getDocuments(tab.collectionId, tab.q);

  // console.log({ data });

  return (
    <Container size="xl" pt={80}>
      <IdeasContainer data={data} q={q} tag={tag} />
      <AppLoadmore />
    </Container>
  );
}

pagination-bug-xerwtw.tsx

"use client";

import { Button, Group } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";

const AppLoadmore = () => {
  const [skip, setSkip] = useState(1);
  const { replace } = useRouter();

  function onLoadMore() {
    setSkip((skip) => skip + 1);

    const params = new URLSearchParams();
    // remove prev skip
    params.delete("p");

    // add new skip
    params.append("p", skip.toString());
    replace(`?${params.toString()}`);
  }

  function onReset() {
    setSkip(1);

    const params = new URLSearchParams();
    params.append("p", skip.toString());
    replace(`?${params.toString()}`);

    params.delete("p");
    replace(`?${params.toString()}`);
  }

  function onPrevious() {
    setSkip((skip) => skip - 1);

    const params = new URLSearchParams();

    // remove prev skip
    params.delete("p");

    // add new skip
    params.append("p", skip.toString());
    replace(`?${params.toString()}`);
  }

  return (
    <Group mt={80} justify="center">
      <Button onClick={onPrevious} disabled={skip === 1}>
        Previous
      </Button>

      {JSON.stringify(skip)}
      <Button variant="outline" onClick={onReset}>
        Reset
      </Button>

      <Button onClick={onLoadMore}>Next</Button>
    </Group>
  );
};

export default AppLoadmore;