filters work

src/features/generateur/generateur.slice.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 import { FILTRES_PLANIFICATION } from '../../pages/GenerateurHoraire/generateurHoraire.constants';
-import { filterGroupes, filterPlanification } from '../../pages/GenerateurHoraire/generateurHoraire.filters';
 import { COMBINAISONS_SORTS } from '../../pages/GenerateurHoraire/generateurHoraire.sorting';
 import { GENERATEUR_LIST_VIEW } from './generateur.constants';
 import { reduceCombinaisonsInfoToGroupesOnly } from '../../utils/Groupes.utils';
@@ -19,25 +18,13 @@ const initialState = {
     planification: FILTRES_PLANIFICATION,
     groupes: [],
   },
-  combinaisons: undefined,
   rawCombinaisons: undefined,
   combinaisonsInfo: undefined,
 };
 
 const GENERATEUR_SLICE = 'generateur';
 
-const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
-
-const pipeAndFilterCombinaisons = (state) => {
-  state.combinaisons = state.rawCombinaisons
-    ? pipe(
-      COMBINAISONS_SORTS[state.sorting],
-      filterPlanification(state.filters.planification),
-      filterGroupes(state.filters.groupes),
-    )(state.rawCombinaisons) : state.rawCombinaisons;
-};
-
-const getCombinaisonsInfo = (combinaisons) => {
+export const getCombinaisonsInfo = (combinaisons) => {
   const combinaisonsInfo = combinaisons?.reduce((prev, comb) => {
     comb?.groupes?.forEach((groupe) => {
       const sigle = groupe?.cours?.sigle;
@@ -91,20 +78,21 @@ const generateurSlice = createSlice({
     },
     setSorting: (state, action) => {
       state.sorting = action.payload;
-      pipeAndFilterCombinaisons(state);
     },
     setCoursObligatoires: (state, action) => {
       state.coursObligatoires = action.payload;
     },
     setFilters: (state, action) => {
       state.filters = action.payload;
-      pipeAndFilterCombinaisons(state);
     },
-    setCombinaisons: (state, action) => {
+    setRawCombinaisons: (state, action) => {
       state.rawCombinaisons = action.payload;
       state.combinaisonsInfo = getCombinaisonsInfo(action.payload);
       state.filters.groupes = reduceCombinaisonsInfoToGroupesOnly(state.combinaisonsInfo);
-      pipeAndFilterCombinaisons(state);
+    },
+    updateCombinaisonsInfo: (state, action) => {
+      state.combinaisonsInfo = getCombinaisonsInfo(action.payload);
+      state.filters.groupes = reduceCombinaisonsInfoToGroupesOnly(state.combinaisonsInfo);
     },
   },
 });
@@ -120,8 +108,9 @@ export const {
   setNombreCours,
   setSorting,
   setCoursObligatoires,
-  setCombinaisons,
   setFilters,
+  setRawCombinaisons,
+  updateCombinaisonsInfo,
 } = generateurSlice.actions;
 
 export const selectProgramme = (state) => state.generateur.programme;
@@ -144,8 +133,6 @@ export const selectFilterPlanification = (state) => state.generateur.filters.pla
 
 export const selectFilterGroupes = (state) => state.generateur.filters.groupes;
 
-export const selectCombinaisons = (state) => state.generateur.combinaisons;
-
 export const selectRawCombinaisons = (state) => state.generateur.rawCombinaisons;
 
 export const selectCombinaisonsInfo = (state) => state.generateur.combinaisonsInfo;

src/hooks/useFilteredCombinaisons.js

@@ -0,0 +1,37 @@
+import { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { filterGroupes, filterPlanification } from '../pages/GenerateurHoraire/generateurHoraire.filters';
+import { COMBINAISONS_SORTS } from '../pages/GenerateurHoraire/generateurHoraire.sorting';
+import {
+  selectRawCombinaisons, updateCombinaisonsInfo,
+} from '../features/generateur/generateur.slice';
+
+const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
+const pipeAndFilterCombinaisons = (combinaisons, sorting, filters) => (combinaisons
+  ? pipe(
+    COMBINAISONS_SORTS[sorting],
+    filterPlanification(filters.planification),
+    filterGroupes(filters.groupes),
+  )(combinaisons) : combinaisons);
+
+const useFilteredCombinaisons = (combinaisons) => {
+  const rawCombinaisons = useSelector(selectRawCombinaisons);
+  const combinaisonsToFilter = combinaisons || rawCombinaisons;
+  const filters = useSelector((state) => state.generateur.filters);
+  const sorting = useSelector((state) => state.generateur.sorting);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (rawCombinaisons) {
+      dispatch(updateCombinaisonsInfo(rawCombinaisons));
+    }
+  }, [rawCombinaisons]);
+
+  const filteredCombinaisons = useMemo(
+    () => pipeAndFilterCombinaisons(combinaisonsToFilter, sorting, filters),
+    [combinaisonsToFilter, filters, sorting],
+  );
+  return filteredCombinaisons;
+};
+
+export default useFilteredCombinaisons;

src/pages/Favoris/Favoris.jsx

@@ -13,6 +13,7 @@ import useFirebaseUserDocument from '../../hooks/useFirebaseUserDocument';
 import { getSessionTranslation, sortSession as sortSessions } from '../../utils/Sessions.utils';
 import { useLazyGetCombinaisonsFromIdQuery } from '../../features/generateur/generateur.api';
 import AucunFavorisDisponible from './AucunFavorisDisponible/AucunFavorisDisponible';
+import useFilteredCombinaisons from '../../hooks/useFilteredCombinaisons';
 
 function Favoris() {
   const { t } = useTranslation('common');
@@ -35,6 +36,8 @@ function Favoris() {
 
   const [trigger, query] = useLazyGetCombinaisonsFromIdQuery();
 
+  const filteredCombinaisons = useFilteredCombinaisons(query?.data);
+
   useEffect(() => {
     if (session) {
       trigger(userData?.favorites[session]);
@@ -49,7 +52,7 @@ function Favoris() {
 
       {(loading || query?.isFetching) ? (
         <Backdrop
-          open={loading}
+          open={loading || query?.isFetching}
           sx={{ zIndex: 3000 }}
         >
           <CircularProgress color="inherit" />
@@ -78,7 +81,7 @@ function Favoris() {
               </Select>
             </FormControl>
           </div>
-          {!query?.isFetching ? <Combinaisons combinaisons={query?.data} />
+          {filteredCombinaisons ? <Combinaisons combinaisons={filteredCombinaisons} />
             : <AucunFavorisDisponible />}
         </>
       )

src/pages/GenerateurHoraire/GenerateurHoraire.jsx

@@ -6,20 +6,19 @@ import {
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import Combinaisons from './Combinaisons/Combinaisons';
 import GenerateurHoraireWrapper from './GenerateurHoraire.styles';
 import GenerateurHoraireProvider from './GenerateurHoraireContexts/GenerateurHoraireProvider';
 import GenerationModifiers from './GenerationModifiers/GenerationModifiers';
 import SelectionCours from './SelectionCours/SelectionCours';
 import SelectionSessionProgramme from './SelectionSessionProgramme/SelectionSessionProgramme';
-import { selectCombinaisons } from '../../features/generateur/generateur.slice';
+import useFilteredCombinaisons from '../../hooks/useFilteredCombinaisons';
 
 function GenerateurHoraire() {
   const { t } = useTranslation('common');
 
   const [expanded, setExpanded] = useState(true);
-  const combinaisons = useSelector(selectCombinaisons);
+  const combinaisons = useFilteredCombinaisons();
   const theme = useTheme();
   const isLargeViewport = useMediaQuery(theme.breakpoints.up('lg'));
 

src/pages/GenerateurHoraire/SelectionCours/SelectionCours.jsx

@@ -23,10 +23,10 @@ import {
   selectProgramme,
   selectSelectedCours,
   selectSession,
-  setCombinaisons,
   setConges,
   setCoursObligatoires,
   setNombreCours,
+  setRawCombinaisons,
   setSelectedCours,
 } from '../../../features/generateur/generateur.slice';
 import { areArraysSame } from '../../../utils/Array.utils';
@@ -92,7 +92,7 @@ function SelectionCours() {
 
   useEffect(() => {
     if (getCombinaisonQuery?.data) {
-      dispatch(setCombinaisons(getCombinaisonQuery?.data));
+      dispatch(setRawCombinaisons(getCombinaisonQuery?.data));
     }
   }, [getCombinaisonQuery?.data]);
 

src/pages/GenerateurHoraire/SelectionCours/toasts/GenerationInformationToasts.jsx

@@ -3,15 +3,16 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
 import useUpdatableToast, { TOAST_ERROR } from '../../../../components/Toasts/useUpdatableToast';
-import { selectCombinaisons, selectNombreCours, selectRawCombinaisons } from '../../../../features/generateur/generateur.slice';
+import { selectNombreCours, selectRawCombinaisons } from '../../../../features/generateur/generateur.slice';
 import useGenerateurHoraire from '../../GenerateurHoraireContexts/hooks/useGenerateurHoraire';
+import useFilteredCombinaisons from '../../../../hooks/useFilteredCombinaisons';
 
 const AUCUN_HORAIRE_TOAST_ID = 'AUCUN_HORAIRE_TOAST_ID';
 
 function GenerationInformationToasts({ readyToGenerate }) {
   const { t } = useTranslation('common');
   const { nombreCours, cours } = useGenerateurHoraire();
-  const combinaisons = useSelector(selectCombinaisons);
+  const combinaisons = useFilteredCombinaisons();
   const rawCombinaisons = useSelector(selectRawCombinaisons);
   const currentNombreCours = useSelector(selectNombreCours);