クエリパラメータ連携をON/OFF可能なページネーション機能【Next.js】

'use client';
import { Post } from '@/static/postType';
import PostCard from './PostCard';
import { useSearchParams, useRouter, usePathname } from 'next/navigation';
import React, { useEffect, useState } from 'react';

const MorePageSign = () => <div className='pointer-events-none block size-4 rounded-full bg-blue-200'></div>;

const PagingButton = ({ icon, title, func }: { icon: string; title?: string; func: () => void }) => (
  <button
    title={title}
    className='group flex size-12 flex-col items-center justify-center rounded-full border border-blue-500 transition-colors hover:bg-blue-500'
    onClick={func}
  >
    <span className={`${icon} size-8 bg-blue-500 transition-colors group-hover:bg-slate-50`} />
  </button>
);

export default function PostPaging({
  posts,
  useIndex,
  useRouting,
  postsPerPage = 10,
  linkingWidth = 2,
}: {
  posts: Post[];
  useIndex?: boolean;
  useRouting?: boolean;
  postsPerPage?: number;
  linkingWidth?: number;
}) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const p = useRouting ? searchParams.get('p') : null;

  const [page, setPage] = useState<number>(useRouting ? (p ? Number(p) : 1) : 1);

  const startIndex = postsPerPage * (page - 1);
  const maxPage = Math.ceil(posts.length / postsPerPage);

  const linkingStartPage = Math.max(page - linkingWidth, 1);
  const linkingEndPage = Math.min(page + linkingWidth, maxPage);
  const linkingPages: number[] = [];
  for (let i = linkingStartPage; i <= linkingEndPage; i++) {
    linkingPages.push(i);
  }

  useEffect(() => {
    if (page <= 0 || page > maxPage) {
      if (useRouting) router.push(pathname);
      setPage(1);
    }
  }, [maxPage, page, router, pathname, useRouting]);

  const displayingPosts = posts.slice(startIndex, startIndex + postsPerPage);

  return (
    <div>
      <div className='flex flex-col gap-y-3'>
        {displayingPosts.map((post, i) => (
          <React.Fragment key={i}>
            {useIndex ? (
              <div className='flex items-stretch gap-1'>
                <div className='hidden w-10 shrink-0 select-none items-center justify-center overflow-hidden break-all rounded-sm bg-gray-100 px-0.5 text-center text-lg font-bold text-gray-700 dark:bg-slate-700 dark:text-slate-400 lg:flex'>
                  {startIndex + i + 1}
                </div>
                <div className='flex flex-grow'>
                  <PostCard post={post} />
                </div>
              </div>
            ) : (
              <PostCard post={post} />
            )}
          </React.Fragment>
        ))}
      </div>
      <div
        className={`${maxPage === 1 ? 'pointer-events-none opacity-50' : ''} mt-3 flex items-center justify-center gap-2`}
      >
        <PagingButton
          title='前のページ'
          icon='i-tabler-arrow-badge-left-filled'
          func={() => {
            const nextPage = page - 1 <= 0 ? maxPage : page - 1;
            if (useRouting) router.push(`${pathname}?p=${nextPage}`);
            setPage(nextPage);
          }}
        />
        <div className='flex gap-1'>
          {linkingStartPage !== 1 ? <MorePageSign /> : <></>}
          {linkingPages.map((item, i) => (
            <button
              key={i}
              title={`${item}ページ目へ`}
              className={`block size-4 rounded-full border border-blue-500 ${page === item ? 'pointer-events-none bg-blue-500' : 'bg-transparent'} transition-colors hover:bg-blue-500`}
              onClick={() => {
                const nextPage = item;
                if (useRouting) router.push(`${pathname}?p=${nextPage}`);
                setPage(nextPage);
              }}
            ></button>
          ))}
          {linkingEndPage !== maxPage ? <MorePageSign /> : <></>}
        </div>
        <PagingButton
          title='次のページ'
          icon='i-tabler-arrow-badge-right-filled'
          func={() => {
            const nextPage = page + 1 > maxPage ? 1 : page + 1;
            if (useRouting) router.push(`${pathname}?p=${nextPage}`);
            setPage(nextPage);
          }}
        />
      </div>
      <div className='mt-2 select-none text-center text-gray-700'>
        {page}ページ目 <span className='text-sm'>(最大&nbsp;{maxPage}ページ)</span>
      </div>
    </div>
  );
}

const linkingStartPage = Math.max(page - linkingWidth, 1);
const linkingEndPage = Math.min(page + linkingWidth, maxPage);
const linkingPages: number[] = [];
for (let i = linkingStartPage; i <= linkingEndPage; i++) {
  linkingPages.push(i);
}