From 51a38677f2b5b5c2fc36214c3c1302def97d08de Mon Sep 17 00:00:00 2001 From: Imane Date: Wed, 10 Jun 2020 19:52:16 +0200 Subject: [PATCH 1/4] refacto(UnivList) : remplace MobileStepper by Pagination component Relates to #191 --- frontend/src/components/search/UnivList.jsx | 60 ++++++++------------- 1 file changed, 22 insertions(+), 38 deletions(-) diff --git a/frontend/src/components/search/UnivList.jsx b/frontend/src/components/search/UnivList.jsx index c200c675..2c3e040b 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 { 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 (
- {getIndexesOnPage(activeStep).map((univIdx) => ( + {getIndexesOnPage(page - 1).map((univIdx) => ( ))} - - = maxSteps - 1} - > - Suivant - - - } - backButton={ - - } - /> +
+ +
); } -- GitLab From 94c89fbe02038f1c27bf21d79305b344d71b2ada Mon Sep 17 00:00:00 2001 From: Imane Date: Wed, 10 Jun 2020 20:00:02 +0200 Subject: [PATCH 2/4] refacto(PaginatedData) : remplace MobileStepper by Pagination component for PreviousExchangesTab Relates to #191 --- .../src/components/common/PaginatedData.jsx | 50 ++++++------------- 1 file changed, 15 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/common/PaginatedData.jsx b/frontend/src/components/common/PaginatedData.jsx index 4fa55270..da5de4f8 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,8 @@ const useStyles = makeStyles((theme) => ({ margin: "0 auto", }, stepperContainer: { - width: "100%", + margin: "0 auto", + width: "max-content", }, progress: { [theme.breakpoints.up("sm")]: { @@ -38,9 +36,7 @@ function PaginatedData(props) { EmptyMessageComponent, } = props; const { - page: activeStep, - last, - first, + page, pages_count: nbOfPages, content, number_elements: totalElements, @@ -50,39 +46,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={ - - } +
); -- GitLab From 7ca26ed0eec676630b7472558babb944e8ad5515 Mon Sep 17 00:00:00 2001 From: Imane Date: Thu, 11 Jun 2020 17:34:07 +0200 Subject: [PATCH 3/4] refacto(History) : remplace MobileStepper by Pagination, fix errors detected by lint_frontend Closes #191 --- .../src/components/common/PaginatedData.jsx | 1 + frontend/src/components/edition/History.jsx | 61 +++++++------------ frontend/src/components/search/UnivList.jsx | 11 ++-- 3 files changed, 31 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/common/PaginatedData.jsx b/frontend/src/components/common/PaginatedData.jsx index da5de4f8..1f67d3c6 100644 --- a/frontend/src/components/common/PaginatedData.jsx +++ b/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: { diff --git a/frontend/src/components/edition/History.jsx b/frontend/src/components/edition/History.jsx index 164e0394..7228929e 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 2c3e040b..da2a8afe 100644 --- a/frontend/src/components/search/UnivList.jsx +++ b/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 ); -- GitLab From 47bc796d6506ae6cc8915677be63f71ee3ee7958 Mon Sep 17 00:00:00 2001 From: Imane Date: Fri, 12 Jun 2020 18:57:07 +0200 Subject: [PATCH 4/4] docs(Changelog) : update changelog to add frontend changes relates to #191 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d669483..affba455 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 -- GitLab