Commit 51a38677 authored by Imane Misrar's avatar Imane Misrar
Browse files

refacto(UnivList) : remplace MobileStepper by Pagination component

Relates to #191
parent 5d1e1a8b
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 { 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";
import Pagination from "@material-ui/lab/Pagination";
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,11 +36,11 @@ 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;
......@@ -62,11 +62,15 @@ function UnivList({ universitiesToList, itemsPerPage }) {
return <></>;
}
const handleChange = (event, value) => {
setPage(value);
};
return (
<div className={classes.root}>
<List component="nav">
<Divider />
{getIndexesOnPage(activeStep).map((univIdx) => (
{getIndexesOnPage(page - 1).map((univIdx) => (
<CustomNavLink
to={APP_ROUTES.forUniversity(universitiesToList[univIdx].id)}
key={univIdx}
......@@ -77,36 +81,16 @@ function UnivList({ universitiesToList, itemsPerPage }) {
</CustomNavLink>
))}
</List>
<MobileStepper
steps={maxSteps}
position="static"
variant="progress"
activeStep={activeStep}
className={classes.mobileStepper}
nextButton={
<Button
color="secondary"
size="small"
onClick={goNext}
disabled={activeStep >= maxSteps - 1}
>
Suivant
<KeyboardArrowRight />
</Button>
}
backButton={
<Button
color="secondary"
size="small"
onClick={goBack}
disabled={activeStep === 0}
>
<KeyboardArrowLeft />
Précédent
</Button>
}
/>
<div className={classes.center}>
<Pagination
count={maxSteps}
page={page}
onChange={handleChange}
showFirstButton
showLastButton
color="secondary"
/>
</div>
</div>
);
}
......
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