Generateurv2/frontend/components/exos/Pagination.jsx

import React, { useState } from "react";
import { useEffect } from "react";
import styles from "../../styles/exos/Paginaton.module.scss";
import { parseClassName } from "../../utils/utils.js";

export function Pagination({ pages, setPage, page }) {
  var pages = new Array(pages - 1).fill(0).reduce(
    (p, n, i) => {
      return [...p, i + 2];
    },
    [1]
  )
  return (
    <div className={styles.pagination}>
      {page != 0 && (
        <p
          
          onClick={() => {
            setPage(page - 1);
          }}
          className={styles["pagination-page"]}
        >
          «
        </p>
      )}

      {pages.length <= 9 &&
        pages.map((p, i) => {
          return (
            <p
              key={i}
              onClick={() => {
                setPage && setPage(p - 1);
              }}
              className={parseClassName([
                styles["pagination-page"],
                (page == p - 1 ? styles["pagination-page-active"] : undefined)])
              }
            >
              {p}
            </p>
          );
        })}
      {pages.length > 9 && (
        <>
          {page >= 6 && (
            <>
              <p
                onClick={() => {
                  setPage(pages[0] - 1);
                }}
                className={styles["pagination-page"]}
              >
                {pages[0]}
              </p>
              <p>...</p>
            </>
          )}
          {pages
            .slice(
              page < 6 ? 0 : page - 2,
              page < 4
                ? 5
                : page + 1 > pages.length - 4
                ? pages.length
                : page + 3
            )
            .map((p) => {
              console.log("new pagin", p);
              return (
                <p
                  onClick={() => {
                    setPage(p - 1);
                  }}
                  className={parseClassName([
                    styles["pagination-page"],
                    page == p - 1
                      ? styles["pagination-page-active"]
                      : undefined,
                  ])}
                >
                  {p}
                </p>
              );
            })}
          {page + 1 <= pages.length - 4 && (
            <>
              <p>...</p>
              <p
                className={parseClassName([
                  styles["pagination-page"],
                  (page == pages[pages.length - 1] - 1
                    ? styles["pagination-page-active"]
                    : undefined)])
                }
                onClick={() => {
                  setPage(pages[pages.length - 1] - 1);
                }}
              >
                {pages[pages.length - 1]}
              </p>
            </>
          )}
        </>
      )}
      {page != pages.length - 1 && (
        <p
          onClick={() => {
            setPage(page + 1);
          }}
          className={styles["pagination-page"]}
        >
          »
        </p>
      )}
    </div>
  );
}