2022-06-11 23:39:03 +02:00
|
|
|
import { useRouter } from "next/router";
|
2022-05-18 10:15:54 +02:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
import styles from "../../styles/exos/Paginaton.module.scss";
|
|
|
|
import { parseClassName } from "../../utils/utils.js";
|
|
|
|
|
2022-06-11 23:39:03 +02:00
|
|
|
export function Pagination({ setPage, page, pages }) {
|
2022-05-18 10:15:54 +02:00
|
|
|
var pages = new Array(pages - 1).fill(0).reduce(
|
|
|
|
(p, n, i) => {
|
|
|
|
return [...p, i + 2];
|
|
|
|
},
|
|
|
|
[1]
|
2022-06-11 23:39:03 +02:00
|
|
|
);
|
|
|
|
const router = useRouter();
|
2022-05-18 10:15:54 +02:00
|
|
|
return (
|
|
|
|
<div className={styles.pagination}>
|
2022-06-11 23:39:03 +02:00
|
|
|
{page != 1 && (
|
2022-05-18 10:15:54 +02:00
|
|
|
<p
|
|
|
|
onClick={() => {
|
|
|
|
setPage(page - 1);
|
2022-06-11 23:39:03 +02:00
|
|
|
var exo = router.query.exo || [];
|
|
|
|
router.push(
|
|
|
|
{
|
|
|
|
pathname:
|
|
|
|
"/exercices/" + exo.join("/"),
|
|
|
|
query: { page: page - 1 },
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
{ shallow: true }
|
|
|
|
);
|
2022-05-18 10:15:54 +02:00
|
|
|
}}
|
|
|
|
className={styles["pagination-page"]}
|
|
|
|
>
|
|
|
|
«
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{pages.length <= 9 &&
|
|
|
|
pages.map((p, i) => {
|
|
|
|
return (
|
|
|
|
<p
|
|
|
|
key={i}
|
|
|
|
onClick={() => {
|
2022-06-11 23:39:03 +02:00
|
|
|
setPage && setPage(p);
|
|
|
|
var exo = router.query.exo || [];
|
|
|
|
router.push(
|
|
|
|
{
|
|
|
|
pathname:
|
|
|
|
"/exercices/" + exo.join("/"),
|
|
|
|
query: { page: p },
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
{ shallow: true }
|
|
|
|
);
|
2022-05-18 10:15:54 +02:00
|
|
|
}}
|
|
|
|
className={parseClassName([
|
|
|
|
styles["pagination-page"],
|
2022-06-11 23:39:03 +02:00
|
|
|
page == p ? styles["pagination-page-active"] : undefined,
|
|
|
|
])}
|
2022-05-18 10:15:54 +02:00
|
|
|
>
|
|
|
|
{p}
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
{pages.length > 9 && (
|
|
|
|
<>
|
|
|
|
{page >= 6 && (
|
|
|
|
<>
|
|
|
|
<p
|
|
|
|
onClick={() => {
|
2022-06-11 23:39:03 +02:00
|
|
|
setPage(pages[0]);
|
|
|
|
var exo = router.query.exo || [];
|
|
|
|
router.push(
|
|
|
|
{
|
|
|
|
pathname:
|
|
|
|
"/exercices/" + exo.join("/"),
|
|
|
|
query: { page: pages[0] },
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
{ shallow: true }
|
|
|
|
);
|
2022-05-18 10:15:54 +02:00
|
|
|
}}
|
|
|
|
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) => {
|
2022-06-24 17:27:17 +02:00
|
|
|
|
2022-05-18 10:15:54 +02:00
|
|
|
return (
|
|
|
|
<p
|
|
|
|
onClick={() => {
|
2022-06-11 23:39:03 +02:00
|
|
|
setPage(p);
|
|
|
|
var exo = router.query.exo || [];
|
|
|
|
router.push(
|
|
|
|
{
|
|
|
|
pathname:
|
|
|
|
"/exercices/" + exo.join("/"),
|
|
|
|
query: { page: p },
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
{ shallow: true }
|
|
|
|
);
|
2022-05-18 10:15:54 +02:00
|
|
|
}}
|
|
|
|
className={parseClassName([
|
|
|
|
styles["pagination-page"],
|
2022-06-11 23:39:03 +02:00
|
|
|
page == p ? styles["pagination-page-active"] : undefined,
|
2022-05-18 10:15:54 +02:00
|
|
|
])}
|
|
|
|
>
|
|
|
|
{p}
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
{page + 1 <= pages.length - 4 && (
|
|
|
|
<>
|
|
|
|
<p>...</p>
|
|
|
|
<p
|
|
|
|
className={parseClassName([
|
|
|
|
styles["pagination-page"],
|
2022-06-11 23:39:03 +02:00
|
|
|
page == pages[pages.length - 1] - 1
|
2022-05-18 10:15:54 +02:00
|
|
|
? styles["pagination-page-active"]
|
2022-06-11 23:39:03 +02:00
|
|
|
: undefined,
|
|
|
|
])}
|
2022-05-18 10:15:54 +02:00
|
|
|
onClick={() => {
|
2022-06-11 23:39:03 +02:00
|
|
|
setPage(pages[pages.length - 1]);
|
|
|
|
var exo = router.query.exo || [];
|
|
|
|
router.push(
|
|
|
|
{
|
|
|
|
pathname:
|
|
|
|
"/exercices/" + router.query.exo &&
|
|
|
|
router.query.exo.join("/"),
|
|
|
|
query: { page: pages[pages.length - 1] },
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
{ shallow: true }
|
|
|
|
);
|
2022-05-18 10:15:54 +02:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{pages[pages.length - 1]}
|
|
|
|
</p>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
2022-06-11 23:39:03 +02:00
|
|
|
{page != pages.length && (
|
2022-05-18 10:15:54 +02:00
|
|
|
<p
|
|
|
|
onClick={() => {
|
|
|
|
setPage(page + 1);
|
2022-06-11 23:39:03 +02:00
|
|
|
var exo = router.query.exo || [];
|
|
|
|
console.log("PATHNAME", "/exercices/" + exo.join("/"));
|
|
|
|
router.push(
|
|
|
|
{
|
|
|
|
pathname: "/exercices/" + exo.join("/"),
|
|
|
|
query: { page: parseInt(page) + 1 },
|
|
|
|
},
|
|
|
|
undefined,
|
|
|
|
{ shallow: true }
|
|
|
|
);
|
2022-05-18 10:15:54 +02:00
|
|
|
}}
|
|
|
|
className={styles["pagination-page"]}
|
|
|
|
>
|
|
|
|
»
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|