How to implement pagination properly

[ahmadxgani]

I have concerns about implementing the pagination feature, I'm worried if I implement it in the wrong way.

and my concern became real when I encountered problems when switching indexes. here's my code

Pagination.tsx

import { useState } from "react";
import { Box, LoadingOverlay, Pagination } from "@mantine/core";
import { IPaginatedResponse } from "@interface/api/pagination.type";
import useAPI from "@hooks/utils/useAPI";

export default function CustomPagination<T extends IPaginatedResponse>({ url, children }: { url: string; children(props: T): React.ReactElement }) {
  const [activePage, setPage] = useState(0);
  const { data, isLoading } = useAPI<T>(url, false, true, activePage + 1);

  console.log((data as T[])[activePage]);

  if (isLoading || !data || !(data as T[])[activePage])
    return (
      <Box h="45rem" pos="relative">
        <LoadingOverlay visible={true} overlayBlur={2} />
      </Box>
    );

  return (
    <>
      {children((data as T[])[activePage])}
      <Pagination total={(data as T[])[activePage].pagination.last_page} radius="sm" size="xs" withEdges onChange={(n) => setPage(n - 1)} value={activePage + 1} />
    </>
  );
}

useAPI.tsx

import { fetcher } from "@constant";
import useSWR, { SWRConfiguration } from "swr";
import useSWRInfinite from "swr/infinite";

const getKey = (pageIndex: number, url: string, token: string, auth: boolean, index?: number) => {
  return [`${url}?page=${index ? index : pageIndex + 1}`, token, auth];
};

export default function useAPI<T>(endpoint: string, authenticate = false, pagination = false, i?: number, opts?: SWRConfiguration) {
  const { token } = useAuth();
  let props;
  if (pagination) {
    props = useSWRInfinite<T>((index) => getKey(index, endpoint, token, authenticate, i), fetcher);
  } else {
    props = useSWR<T>([endpoint, token, authenticate], fetcher, opts);
  }
  return props;
}

constant.ts

import { Fetcher } from "swr";

export const fetcher: Fetcher<any, [string, string, boolean]> = (args) => {
  if ((args[2] && args[1]) || !args[2]) return fetch(args[0], { headers: { Authorization: `Bearer ${args[1]}` } }).then((res) => res.json());
};

pagination.type.ts

import { IBannerResponse } from "./banner.type";
import { IProductResponse } from "./product.type";

export type IPaginatedResponse = IProductResponse | IBannerResponse;

export interface IPagination {
  total: number;
  per_page: number;
  current_page: number;
  last_page: number;
  from: number;
  to: number;
}

in the Pagination.tsx, the children receive the result of fetched data, but the problem is, i have no idea how to revalidate/refetch in order to update the pagination array

i try to add the conditional statement that show loading bar if the data isn't already, but that cause my component to always render that loading bar since the (data as T[])[activePage] is undefined

any advice and feedback would be greatly appreciated.

[ahmadxgani]

sorry I was not able to reproduce the code 🙏