Commit 5b718841 authored by Imane Misrar's avatar Imane Misrar
Browse files

fix(PreviousExchangesTab) : reset filters only when you click on the button

Closes #176
parent 054ef35c
/* eslint-disable no-shadow */
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useCallback } from "react";
import PropTypes from "prop-types";
import compose from "recompose/compose";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import uuid from "uuid/v4";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Button from "@material-ui/core/Button";
import Checkbox from "@material-ui/core/Checkbox";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import uuid from "uuid/v4";
import PreviousExchange from "../modules/previousExchangeFeedback/PreviousExchange";
import PaginatedData from "../../common/PaginatedData";
import RequestParams from "../../../utils/api/RequestParams";
......@@ -17,10 +20,6 @@ import withNetworkWrapper, {
NetWrapParam
} from "../../../hoc/withNetworkWrapper";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Grid from "@material-ui/core/Grid";
const undefinedVal = uuid();
const useStyles = makeStyles(theme => ({
......@@ -46,7 +45,9 @@ function PreviousExchangesTab({
goToPage,
univMajorMinors,
showUntouched,
setShowUntouched
setShowUntouched,
hasFilters,
resetFilters
}) {
const classes = useStyles();
......@@ -55,12 +56,6 @@ function PreviousExchangesTab({
if (displayMinorSelect)
minors = univMajorMinors.find(el => el.major === major).minors;
if (exchanges.number_elements === 0) {
setMajor(undefinedVal);
setMinor(undefinedVal);
setShowUntouched(true);
}
return (
<>
<form autoComplete="off" className={classes.root}>
......@@ -68,10 +63,7 @@ function PreviousExchangesTab({
<InputLabel htmlFor="major-select">Branche</InputLabel>
<Select
value={major}
onChange={e => {
setMajor(e.target.value);
goToPage(1);
}}
onChange={e => setMajor(e.target.value)}
inputProps={{
id: "major-select"
}}
......@@ -88,52 +80,53 @@ function PreviousExchangesTab({
</FormControl>
{displayMinorSelect && (
<>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="minor-filière">Filière</InputLabel>
<Select
className={classes.select}
value={minor}
onChange={e => {
setMinor(e.target.value);
goToPage(1);
}}
inputProps={{
id: "minor-filière"
}}
>
<MenuItem value={undefinedVal}>Pas de filtre</MenuItem>
{minors
.filter(el => el !== null)
.map(el => (
<MenuItem key={el} value={el}>
{el}
</MenuItem>
))}
</Select>
</FormControl>
</>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="minor-filière">Filière</InputLabel>
<Select
className={classes.select}
value={minor}
onChange={e => setMinor(e.target.value)}
inputProps={{
id: "minor-filière"
}}
>
<MenuItem value={undefinedVal}>Pas de filtre</MenuItem>
{minors
.filter(el => el !== null)
.map(el => (
<MenuItem key={el} value={el}>
{el}
</MenuItem>
))}
</Select>
</FormControl>
)}
<Typography component="div">
<Grid component="label" container alignItems="center" spacing={0}>
<Grid item>Départs avec retour&emsp;</Grid>
<Grid item>
<FormControlLabel
control={
<Switch
checked={showUntouched}
onChange={() => {
setShowUntouched(!showUntouched);
goToPage(1);
}}
color="primary"
/>
}
<FormControl className={classes.formControl}>
<FormControlLabel
control={
<Checkbox
checked={!showUntouched}
onChange={() => setShowUntouched(!showUntouched)}
/>
</Grid>
<Grid item>Tous les échanges</Grid>
</Grid>
</Typography>
}
label="Avec feedbacks uniquement"
labelPlacement="start"
/>
</FormControl>
{hasFilters && (
<FormControl className={classes.formControl}>
<Button
onClick={resetFilters}
variant="outlined"
color="action"
size="small"
>
Réinitialiser les filtres
</Button>
</FormControl>
)}
</form>
<PaginatedData
......@@ -147,7 +140,9 @@ function PreviousExchangesTab({
EmptyMessageComponent={
<Typography>
<em>
Aucun échange n'est à ce jour répertorié pour cette université.
{hasFilters
? "Aucun échange ne correspond au(x) filtre(s)."
: "Aucun échange n'est à ce jour répertorié pour cette université."}
</em>
</Typography>
}
......@@ -163,7 +158,11 @@ PreviousExchangesTab.propTypes = {
minor: PropTypes.string.isRequired,
goToPage: PropTypes.func.isRequired,
setMinor: PropTypes.func.isRequired,
setMajor: PropTypes.func.isRequired
setMajor: PropTypes.func.isRequired,
resetFilters: PropTypes.func.isRequired,
hasFilters: PropTypes.bool.isRequired,
showUntouched: PropTypes.bool.isRequired,
setShowUntouched: PropTypes.func.isRequired
};
const buildExchangesParams = (
......@@ -224,13 +223,26 @@ export default () => {
const [major, setMajor] = useState(undefinedVal);
const [minor, setMinor] = useState(undefinedVal);
const [showUntouched, setShowUntouched] = useState(false);
const [showUntouched, setShowUntouched] = useState(true);
const resetFilters = useCallback(() => {
setMajor(undefinedVal);
setMinor(undefinedVal);
setShowUntouched(true);
}, []);
// Reset minors on majors change
useEffect(() => {
setMinor(undefinedVal);
}, [major]);
useEffect(() => {
goToPage(1);
}, [major, minor, showUntouched]);
const hasFilters =
major !== undefinedVal || minor !== undefinedVal || showUntouched === false;
return (
<ConnectedComp
page={page}
......@@ -241,6 +253,8 @@ export default () => {
setMinor={setMinor}
showUntouched={showUntouched}
setShowUntouched={setShowUntouched}
resetFilters={resetFilters}
hasFilters={hasFilters}
/>
);
};
Supports Markdown
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