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

Closes #176

frontend/src/components/university/tabs/PreviousExchangesTab.jsx

 /* 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}
     />
   );
 };