diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d66948336cd802885e9942317b72fb392a32169..affba45590254c16835ed983f4b72c44c9208b43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
###### _TBD_
- [chore] front: updated wording and information regarding previous exchanges and offers
+- [refacto] front: use Material-ui pagination component
## v2.7.0
diff --git a/frontend/src/components/common/PaginatedData.jsx b/frontend/src/components/common/PaginatedData.jsx
index 4fa5527097d02a117954fbba4a8483111094c8cb..1f67d3c6ee1a2697064c7a1709d01bfb929d8650 100644
--- a/frontend/src/components/common/PaginatedData.jsx
+++ b/frontend/src/components/common/PaginatedData.jsx
@@ -1,9 +1,6 @@
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
-import MobileStepper from "@material-ui/core/MobileStepper";
-import Button from "@material-ui/core/Button";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+import Pagination from "@material-ui/lab/Pagination";
import PropTypes from "prop-types";
const useStyles = makeStyles((theme) => ({
@@ -12,7 +9,9 @@ const useStyles = makeStyles((theme) => ({
margin: "0 auto",
},
stepperContainer: {
- width: "100%",
+ margin: "0 auto",
+ marginBottom: theme.spacing(1),
+ width: "max-content",
},
progress: {
[theme.breakpoints.up("sm")]: {
@@ -38,9 +37,7 @@ function PaginatedData(props) {
EmptyMessageComponent,
} = props;
const {
- page: activeStep,
- last,
- first,
+ page,
pages_count: nbOfPages,
content,
number_elements: totalElements,
@@ -50,39 +47,23 @@ function PaginatedData(props) {
return EmptyMessageComponent;
}
+ const handleChange = (event, value) => {
+ goToPage(value);
+ };
+
function renderStepper() {
if (nbOfPages === 1) {
return <>>;
}
return (
-
goToPage(activeStep - 1)}
- disabled={first}
- >
-
- Précédent
-
- }
- nextButton={
-
- }
+
);
diff --git a/frontend/src/components/edition/History.jsx b/frontend/src/components/edition/History.jsx
index 164e0394b62740bf0e4f06c6f9f12285fb4787db..7228929ed255722f529368a1ece97ea4c299c84f 100644
--- a/frontend/src/components/edition/History.jsx
+++ b/frontend/src/components/edition/History.jsx
@@ -3,16 +3,12 @@ import React, { useEffect } from "react";
import PropTypes from "prop-types";
import compose from "recompose/compose";
import Button from "@material-ui/core/Button";
-
-import MobileStepper from "@material-ui/core/MobileStepper";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+import Pagination from "@material-ui/lab/Pagination";
import { makeStyles } from "@material-ui/styles";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import RequestParams from "../../utils/api/RequestParams";
import FullScreenDialogService from "../../services/FullScreenDialogService";
-import useStepper from "../../hooks/useStepper";
import FullScreenDialogFrame from "../common/FullScreenDialogFrame";
import dateTimeStrToStr from "../../utils/dateTimeStrToStr";
import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper";
@@ -26,6 +22,10 @@ const useStyles = makeStyles((theme) => ({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
+ center: {
+ margin: "0 auto",
+ width: "max-content",
+ },
}));
function VersionInfo({ rawModelData, versionNumber, editFromVersion }) {
@@ -71,21 +71,23 @@ function History({
editFromVersion,
rawModelDataEx,
}) {
+ const classes = useStyles();
const resetVersions = useApiInvalidateAll("versions");
useEffect(() => {
return () => resetVersions(); // only on unmount
}, []);
- const [currentVersion, goNextVersion, goPreviousVersion] = useStepper(
- versions.length - 1
- );
-
const maxSteps = versions.length;
+ const [currentVersion, setCurrentVersion] = React.useState(maxSteps);
+
+ const handleChange = (event, value) => {
+ setCurrentVersion(value);
+ };
const newRawModelData = {
...rawModelDataEx,
- ...versions[currentVersion].data,
+ ...versions[currentVersion - 1].data,
};
return (
@@ -94,38 +96,21 @@ function History({
title="Parcours de l'historique"
>
<>
- = maxSteps - 1}
- >
- Version suivante
-
-
- }
- backButton={
-
- }
- />
+
diff --git a/frontend/src/components/search/UnivList.jsx b/frontend/src/components/search/UnivList.jsx
index c200c6759a87e6a017c3e33e5267a91f319d056f..da2a8afe758cd5717aaea649ec1440760ea3d517 100644
--- a/frontend/src/components/search/UnivList.jsx
+++ b/frontend/src/components/search/UnivList.jsx
@@ -1,18 +1,14 @@
import React, { useCallback, useEffect } from "react";
import PropTypes from "prop-types";
-import MobileStepper from "@material-ui/core/MobileStepper";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
-import Button from "@material-ui/core/Button";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+import Pagination from "@material-ui/lab/Pagination";
import { makeStyles } from "@material-ui/styles";
import range from "../../utils/range";
import APP_ROUTES from "../../config/appRoutes";
import CustomNavLink from "../common/CustomNavLink";
-import useStepper from "../../hooks/useStepper";
const useStyles = makeStyles((theme) => ({
root: {
@@ -29,6 +25,10 @@ const useStyles = makeStyles((theme) => ({
marginBottom: 20,
backgroundColor: theme.palette.background.default,
},
+ center: {
+ margin: "0 auto",
+ width: "max-content",
+ },
}));
/**
@@ -36,20 +36,23 @@ const useStyles = makeStyles((theme) => ({
*/
function UnivList({ universitiesToList, itemsPerPage }) {
const classes = useStyles();
- const [activeStep, goNext, goBack, goTo] = useStepper(0);
+ const [page, setPage] = React.useState(1);
useEffect(() => {
// If the list is not the same, then make sure to "reset" and move to the first page
- goTo(0);
+ setPage(1);
}, [universitiesToList]);
const numberOfItems = universitiesToList.length;
const maxSteps = Math.ceil(numberOfItems / itemsPerPage);
const getIndexesOnPage = useCallback(
- (page) => {
- const firstIdxOnPage = page * itemsPerPage;
- const lastIdxOnPage = Math.min((page + 1) * itemsPerPage, numberOfItems);
+ (currentPage) => {
+ const firstIdxOnPage = currentPage * itemsPerPage;
+ const lastIdxOnPage = Math.min(
+ (currentPage + 1) * itemsPerPage,
+ numberOfItems
+ );
return range(lastIdxOnPage - firstIdxOnPage).map(
(el) => el + firstIdxOnPage
);
@@ -62,11 +65,15 @@ function UnivList({ universitiesToList, itemsPerPage }) {
return <>>;
}
+ const handleChange = (event, value) => {
+ setPage(value);
+ };
+
return (
- {getIndexesOnPage(activeStep).map((univIdx) => (
+ {getIndexesOnPage(page - 1).map((univIdx) => (
))}
-
-
= maxSteps - 1}
- >
- Suivant
-
-
- }
- backButton={
-
- }
- />
+
);
}