Commit 7ca26ed0 authored by Imane Misrar's avatar Imane Misrar
Browse files

refacto(History) : remplace MobileStepper by Pagination, fix errors detected by lint_frontend

Closes #191
parent 94c89fbe
......@@ -10,6 +10,7 @@ const useStyles = makeStyles((theme) => ({
},
stepperContainer: {
margin: "0 auto",
marginBottom: theme.spacing(1),
width: "max-content",
},
progress: {
......
......@@ -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"
>
<>
<MobileStepper
steps={versions.length}
position="static"
activeStep={currentVersion}
nextButton={
<Button
<div className={classes.center}>
<Pagination
count={maxSteps}
page={currentVersion}
onChange={handleChange}
showFirstButton
showLastButton
color="secondary"
size="small"
onClick={goNextVersion}
disabled={currentVersion >= maxSteps - 1}
>
Version suivante
<KeyboardArrowRight />
</Button>
}
backButton={
<Button
color="secondary"
size="small"
onClick={goPreviousVersion}
disabled={currentVersion === 0}
>
<KeyboardArrowLeft />
Version précédente
</Button>
}
/>
</div>
<br />
<Divider />
<VersionInfo
rawModelData={newRawModelData}
versionNumber={currentVersion}
versionNumber={currentVersion - 1}
editFromVersion={editFromVersion}
/>
<br />
......
......@@ -4,11 +4,11 @@ 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 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 Pagination from "@material-ui/lab/Pagination";
const useStyles = makeStyles((theme) => ({
root: {
......@@ -47,9 +47,12 @@ function UnivList({ universitiesToList, itemsPerPage }) {
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
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment