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

Closes #191

frontend/src/components/common/PaginatedData.jsx

@@ -10,6 +10,7 @@ const useStyles = makeStyles((theme) => ({
   },
   stepperContainer: {
     margin: "0 auto",
+    marginBottom: theme.spacing(1),
     width: "max-content",
   },
   progress: {

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"
     >
       <>
-        <MobileStepper
-          steps={versions.length}
-          position="static"
-          activeStep={currentVersion}
-          nextButton={
-            <Button
-              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 className={classes.center}>
+          <Pagination
+            count={maxSteps}
+            page={currentVersion}
+            onChange={handleChange}
+            showFirstButton
+            showLastButton
+            color="secondary"
+          />
+        </div>
         <br />
         <Divider />
         <VersionInfo
           rawModelData={newRawModelData}
-          versionNumber={currentVersion}
+          versionNumber={currentVersion - 1}
           editFromVersion={editFromVersion}
         />
         <br />

frontend/src/components/search/UnivList.jsx

@@ -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
       );