add side effect to setYoung

app/package.json

@@ -18,8 +18,8 @@
     "clean": "rm -fr node_modules .turbo build .swc"
   },
   "devDependencies": {
-    "@types/react-redux-toastr": "^7.0.0",
     "@swc/plugin-styled-components": "1.5.111",
+    "@types/react-redux-toastr": "^7.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -72,6 +72,7 @@
     "react-tooltip": "^4.5.1",
     "reactstrap": "8.10.1",
     "redux": "4.2.1",
+    "redux-thunk": "^2.4.0",
     "regenerator-runtime": "0.13.9",
     "remark-gfm": "^4.0.0",
     "slugify": "^1.6.5",

app/src/Espace.jsx

@@ -1,6 +1,6 @@
 import React, { lazy, Suspense, useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { getCohort } from "./utils/cohorts";
+import useAuth from "./services/useAuth";
+import useCohort from "./services/useCohort";
 import API from "./services/api";
 import { ENABLE_PM, FEATURES_NAME, YOUNG_STATUS, isFeatureEnabled, permissionPhase2, shouldReAcceptRI } from "./utils";
 import { Redirect, Switch } from "react-router-dom";
@@ -34,8 +34,8 @@ const Espace = () => {
   const [isModalCGUOpen, setIsModalCGUOpen] = useState(false);
   const [isModalRIOpen, setIsModalRIOpen] = useState(false);
 
-  const young = useSelector((state) => state.Auth.young);
-  const cohort = getCohort(young.cohort);
+  const { young } = useAuth();
+  const { cohort } = useCohort();
 
   const handleModalCGUConfirm = async () => {
     setIsModalCGUOpen(false);
@@ -69,7 +69,7 @@ const Espace = () => {
 
   if (young.status === YOUNG_STATUS.NOT_ELIGIBLE && location.pathname !== "/noneligible") return <Redirect to="/noneligible" />;
 
-  if (shouldForceRedirectToEmailValidation(young)) {
+  if (shouldForceRedirectToEmailValidation(young, cohort)) {
     return <Redirect to="/preinscription/email-validation" />;
   }
 

app/src/app.jsx

@@ -26,6 +26,7 @@ import useAuth from "./services/useAuth";
 
 import PageLoader from "./components/PageLoader";
 import FallbackComponent from "./components/FallBackComponent";
+import store from "./redux/store";
 
 const AccountAlreadyExists = lazy(() => import("./scenes/account/AccountAlreadyExists"));
 const AllEngagements = lazy(() => import("./scenes/all-engagements/index"));
@@ -65,7 +66,8 @@ function App() {
 
       await login(user);
 
-      if (shouldForceRedirectToEmailValidation(user)) {
+      const { cohort } = store.getState().Cohort;
+      if (shouldForceRedirectToEmailValidation(user, cohort)) {
         history.push("/preinscription/email-validation");
       }
     } catch (e) {

app/src/index.jsx

@@ -16,10 +16,10 @@ window.addEventListener("vite:preloadError", (event) => {
 });
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <App />
-      <ReduxToastr timeOut={5000} transitionIn="fadeIn" transitionOut="fadeOut" />
-    </Provider>
-  </React.StrictMode>,
+  // <React.StrictMode>
+  <Provider store={store}>
+    <App />
+    <ReduxToastr timeOut={5000} transitionIn="fadeIn" transitionOut="fadeOut" />
+  </Provider>,
+  // </React.StrictMode>,
 );

app/src/redux/auth/actions.ts

@@ -1,12 +1,29 @@
+import { fetchCohort } from "@/utils/cohorts";
 import * as Sentry from "@sentry/react";
+import { Dispatch } from "redux";
 import { YoungType } from "snu-lib";
+import { setCohort } from "../cohort/actions";
 
 export const authActions = {
   SETYOUNG: "SETYOUNG",
 };
 
 export function setYoung(young?: YoungType) {
-  if (young) Sentry.setUser({ id: young._id, email: young.email, username: `${young.firstName} ${young.lastName}` });
-  else Sentry.setUser(null);
-  return { type: authActions.SETYOUNG, young };
+  return async (dispatch: Dispatch, getState: () => any) => {
+    const oldCohortId = getState().Auth.young?.cohortId;
+
+    dispatch({ type: authActions.SETYOUNG, young });
+
+    // Side effects
+    if (young) Sentry.setUser({ id: young._id, email: young.email, username: `${young.firstName} ${young.lastName}` });
+    else Sentry.setUser(null);
+
+    const newCohortId = young?.cohortId;
+    if (newCohortId && oldCohortId !== newCohortId) {
+      const cohort = await fetchCohort(newCohortId);
+      if (!cohort) return;
+      console.log(`Updating stored cohort. New cohort name: ${cohort.name}`);
+      dispatch(setCohort(cohort));
+    }
+  };
 }

app/src/redux/store.ts

@@ -1,7 +1,9 @@
-import { createStore, combineReducers } from "redux";
+import { createStore, combineReducers, applyMiddleware, compose } from "redux";
 import reducers from "./reducers";
 import * as Sentry from "@sentry/react";
+import thunk from "redux-thunk";
 
 const sentryReduxEnhancer = Sentry.createReduxEnhancer();
+const enhancer = compose(applyMiddleware(thunk), sentryReduxEnhancer);
 
-export default createStore(combineReducers({ ...reducers }), sentryReduxEnhancer);
+export default createStore(combineReducers({ ...reducers }), enhancer);

app/src/scenes/changeSejour/scenes/ChangeSejourMenu.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import useAuth from "@/services/useAuth";
+import useCohort from "@/services/useCohort";
 import { HiArrowRight } from "react-icons/hi";
 import { CohortGroupType, CohortType, getCohortPeriod, getCohortYear } from "snu-lib";
 import plausibleEvent from "@/services/plausible";
@@ -14,7 +14,6 @@ import { capitalizeFirstLetter } from "@/scenes/inscription2023/steps/stepConfir
 import usePermissions from "@/hooks/usePermissions";
 import { useLocation } from "react-router-dom";
 import ErrorNotice from "@/components/ui/alerts/ErrorNotice";
-import useCohort from "@/services/useCohort";
 
 export default function ChangeSejour() {
   const groups = useCohortGroups();

app/src/scenes/home/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import useDocumentTitle from "../../hooks/useDocumentTitle";
 import { YOUNG_STATUS, hasAccessToReinscription, hasCompletedPhase1, isDoingPhase1 } from "../../utils";
-import { getCohort } from "../../utils/cohorts";
+import useCohort from "@/services/useCohort";
 import InscriptionClosedCLE from "./InscriptionClosedCLE";
 import HomePhase2 from "./HomePhase2";
 import Phase1NotDone from "./Phase1NotDone";
@@ -22,7 +22,7 @@ import useReinscription from "../changeSejour/lib/useReinscription";
 export default function Home() {
   useDocumentTitle("Accueil");
   const { young, isCLE } = useAuth();
-  const cohort = getCohort(young.cohort);
+  const { cohort } = useCohort();
 
   const { data: isReinscriptionOpen, isLoading: isReinscriptionOpenLoading } = useReinscription();
 
@@ -33,14 +33,14 @@ export default function Home() {
   if (young.status === YOUNG_STATUS.REFUSED) return <RefusedV2 />;
 
   // Phase 3
-  if ([YOUNG_STATUS_PHASE3.WAITING_VALIDATION, YOUNG_STATUS_PHASE3.VALIDATED].includes(young.statusPhase3)) {
+  if ([YOUNG_STATUS_PHASE3.WAITING_VALIDATION, YOUNG_STATUS_PHASE3.VALIDATED].includes(young.statusPhase3 as any)) {
     return <Default />;
   }
 
   // Je peux accéder à la Homepage de la Phase 2 si j'ai validé ma phase 1 et que ma cohorte me permet encore de faire la phase 2 :
   const hasMission = young.phase2ApplicationStatus.some((status) => ["VALIDATED", "IN_PROGRESS"].includes(status));
-  const hasEquivalence = [EQUIVALENCE_STATUS.WAITING_CORRECTION, EQUIVALENCE_STATUS.WAITING_VERIFICATION].includes(young.status_equivalence);
-  const hasWithdrawn = [YOUNG_STATUS.WITHDRAWN, YOUNG_STATUS.ABANDONED].includes(young.status);
+  const hasEquivalence = [EQUIVALENCE_STATUS.WAITING_CORRECTION, EQUIVALENCE_STATUS.WAITING_VERIFICATION].includes(young.status_equivalence as any);
+  const hasWithdrawn = [YOUNG_STATUS.WITHDRAWN, YOUNG_STATUS.ABANDONED].includes(young.status as any);
 
   if (hasCompletedPhase1(young)) {
     // les volontaires des première cohortes n'ont plus le droit de faire la phase 2 SAUF si ils l'ont commencé
@@ -65,7 +65,7 @@ export default function Home() {
 
   // Ma phase 1 est en cours, soit en cours d'inscription, soit en plein parcours
   const isCohortInstructionOpen = new Date() < new Date(cohort.instructionEndDate);
-  if (isCLE && [YOUNG_STATUS.WAITING_VALIDATION, YOUNG_STATUS.WAITING_CORRECTION].includes(young.status) && !isCohortInstructionOpen) {
+  if (isCLE && [YOUNG_STATUS.WAITING_VALIDATION, YOUNG_STATUS.WAITING_CORRECTION].includes(young.status as any) && !isCohortInstructionOpen) {
     return <InscriptionClosedCLE />;
   }
 

app/src/scenes/inscription2023/InscriptionClosed.jsx

@@ -1,13 +1,14 @@
 import DSFRContainer from "@/components/dsfr/layout/DSFRContainer";
 import DSFRLayout from "@/components/dsfr/layout/DSFRLayout";
-import { getCohort } from "@/utils/cohorts";
+import useCohort from "@/services/useCohort";
 import { SignupButtons } from "@snu/ds/dsfr";
 import React from "react";
 import { useHistory } from "react-router-dom";
-import { getCohortPeriod, YOUNG_STATUS } from "snu-lib";
+import { YOUNG_STATUS } from "snu-lib";
 
 export default function InscriptionClosed({ young, isCLE }) {
   const history = useHistory();
+  const { cohortDateString } = useCohort();
   const statusWording = (young, isCLE) => {
     if (isCLE) {
       if ([YOUNG_STATUS.REINSCRIPTION, YOUNG_STATUS.IN_PROGRESS].includes(young.status)) {
@@ -29,7 +30,7 @@ export default function InscriptionClosed({ young, isCLE }) {
     <DSFRLayout title={statusTitle(isCLE)}>
       <DSFRContainer title={statusWording(young, isCLE)}>
         {!isCLE ? (
-          <p>Les inscriptions pour le séjour {getCohortPeriod(getCohort(young?.cohort))} sont clôturées. Vous ne pourrez donc pas participer au séjour.</p>
+          <p>Les inscriptions pour le séjour {cohortDateString} sont clôturées. Vous ne pourrez donc pas participer au séjour.</p>
         ) : (
           <p>Les inscriptions dans le cadre des classes engagées ont été clôturées.</p>
         )}

app/src/scenes/inscription2023/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useSelector } from "react-redux";
 import { Redirect, useParams } from "react-router-dom";
 import { SentryRoute } from "../../sentry";
 
@@ -20,7 +19,7 @@ import { YOUNG_STATUS, inscriptionCreationOpenForYoungs } from "snu-lib";
 import FutureCohort from "./FutureCohort";
 import InscriptionClosed from "./InscriptionClosed";
 import { knowledgebaseURL } from "../../config";
-import { getCohort } from "@/utils/cohorts";
+import useCohort from "@/services/useCohort";
 import useAuth from "@/services/useAuth";
 import Help from "./components/Help";
 import Stepper from "@/components/dsfr/ui/Stepper";
@@ -103,9 +102,8 @@ const StepCorrection = () => {
 };
 
 export default function Index() {
-  const young = useSelector((state) => state.Auth.young);
-  const { isCLE } = useAuth();
-  const cohort = getCohort(young.cohort);
+  const { young, isCLE } = useAuth();
+  const { cohort } = useCohort();
 
   if (!young) return <Redirect to="/preinscription" />;
   if ([YOUNG_STATUS.IN_PROGRESS, YOUNG_STATUS.REINSCRIPTION].includes(young.status) && young.cohort === "à venir") {

app/src/scenes/inscription2023/steps/stepConfirm.jsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useHistory, Link } from "react-router-dom";
-import { translate, getCohortPeriod, concatPhoneNumberWithZone } from "snu-lib";
-import { getCohort } from "@/utils/cohorts";
+import { translate, concatPhoneNumberWithZone } from "snu-lib";
+import useAuth from "@/services/useAuth";
+import useCohort from "@/services/useCohort";
 import EditPen from "../../../assets/icons/EditPen";
 import ModalSejour from "../components/ModalSejour";
 import { setYoung } from "../../../redux/auth/actions";
@@ -14,7 +15,8 @@ import DSFRContainer from "@/components/dsfr/layout/DSFRContainer";
 import { SignupButtons } from "@snu/ds/dsfr";
 
 export default function StepConfirm() {
-  const young = useSelector((state) => state.Auth.young);
+  const { young } = useAuth();
+  const { cohortDateString } = useCohort();
   const [modal, setModal] = React.useState({ isOpen: false });
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState({});
@@ -71,7 +73,7 @@ export default function StepConfirm() {
             <div className="flex items-center justify-between">
               <div className="flex flex-col gap-1">
                 <h1 className="mt-2 text-lg font-bold text-[#161616]">Séjour de cohésion :</h1>
-                <div className="text-lg font-normal text-[#161616]">{capitalizeFirstLetter(getCohortPeriod(getCohort(young?.cohort)))}</div>
+                <div className="text-lg font-normal text-[#161616]">{capitalizeFirstLetter(cohortDateString)}</div>
               </div>
               <button
                 onClick={() => {

app/src/scenes/inscription2023/steps/stepConsentements.jsx

@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
 import { useHistory } from "react-router-dom";
 import useAuth from "@/services/useAuth";
 import { getCohortPeriod, getCohortYear } from "snu-lib";
-import { getCohort } from "@/utils/cohorts";
+import useCohort from "@/services/useCohort";
 import Error from "../../../components/error";
 import { knowledgebaseURL } from "../../../config";
 import { setYoung } from "../../../redux/auth/actions";
@@ -18,6 +18,7 @@ import Loader from "@/components/Loader";
 
 export default function StepConsentements() {
   const { young, isCLE } = useAuth();
+  const { cohort } = useCohort();
   const history = useHistory();
   const [disabled, setDisabled] = React.useState(true);
   const [loading, setLoading] = React.useState(false);
@@ -61,13 +62,15 @@ export default function StepConsentements() {
 
   if (isLoading) return <Loader />;
 
-  const cohortYear = isCLE ? classe?.schoolYear : getCohortYear(getCohort(young.cohort));
+  const cohortYear = isCLE ? classe?.schoolYear : getCohortYear(cohort);
 
   return (
     <>
       <DSFRContainer
         title="Apporter mon consentement"
-        supportLink={`${knowledgebaseURL}${isCLE ? "/base-de-connaissance/cle-je-minscris-et-donne-mon-consentement" : "/base-de-connaissance/je-minscris-et-donne-mon-consentement"}`}
+        supportLink={`${knowledgebaseURL}${
+          isCLE ? "/base-de-connaissance/cle-je-minscris-et-donne-mon-consentement" : "/base-de-connaissance/je-minscris-et-donne-mon-consentement"
+        }`}
         supportEvent="Phase0/aide inscription - consentement">
         {error?.text && <Error {...error} onClose={() => setError({})} />}
         <div className="mt-4 flex flex-col gap-4 pb-2">
@@ -101,7 +104,7 @@ export default function StepConsentements() {
                       <>M&apos;inscris au séjour de cohésion </>
                     ) : (
                       <>
-                        M&apos;inscris au séjour de cohésion <strong>{getCohortPeriod(getCohort(young.cohort))}</strong> sous réserve de places disponibles{" "}
+                        M&apos;inscris au séjour de cohésion <strong>{getCohortPeriod(young.cohort)}</strong> sous réserve de places disponibles{" "}
                       </>
                     )}
                     et m&apos;engage à en respecter le{" "}

app/src/scenes/phase1/scenes/affected/components/Problem.jsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { getCohortPeriod } from "snu-lib";
 import { RiErrorWarningLine } from "react-icons/ri";
-import { getCohort } from "@/utils/cohorts";
+import useCohort from "@/services/useCohort";
 
-export default function Problem({ cohort }) {
+export default function Problem() {
+  const { cohortDateString } = useCohort();
   return (
     <div className="my-12 mx-10 w-full">
       <div className="relative my-0 mb-4 max-w-[80rem] justify-between overflow-hidden rounded-xl bg-gray-50 px-4 py-8 shadow md:mx-auto md:bg-white md:!px-8 lg:!px-16">
@@ -14,12 +14,12 @@ export default function Problem({ cohort }) {
                 <h1 className="text-5xl">Mon séjour de cohésion</h1>
                 <div className="flex flex-row items-center">
                   <h1 className="text-5xl">
-                    <strong>{getCohortPeriod(getCohort(cohort))}</strong>
+                    <strong>{cohortDateString}</strong>
                   </h1>
                 </div>
               </div>
               <div className="mb-4 flex flex-col md:hidden">
-                <h1 className="text-sm text-gray-600 ">Séjour {getCohortPeriod(getCohort(cohort))}</h1>
+                <h1 className="text-sm text-gray-600 ">Séjour {cohortDateString}</h1>
               </div>
             </article>
           </section>

app/src/scenes/phase1/scenes/affected/components/modals/PDRModal.jsx

@@ -3,18 +3,19 @@ import Modal from "@/components/ui/modals/Modal";
 import { setYoung } from "@/redux/auth/actions";
 import { capture } from "@/sentry";
 import API from "@/services/api";
-import { getCohort } from "@/utils/cohorts";
+import useAuth from "@/services/useAuth";
+import useCohort from "@/services/useCohort";
 import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { toastr } from "react-redux-toastr";
 import MeetingPointChooser from "../MeetingPointChooser";
 import MeetingPointGoAlone from "../MeetingPointGoAlone";
 import { getDepartureDate, getReturnDate } from "snu-lib";
 import MeetingPointConfirmationModal from "../MeetingPointConfirmationModal";
 
-export default function PDRModal({ open, setOpen, meetingPoints, center, session, pdrChoiceExpired }) {
-  const young = useSelector((state) => state.Auth.young);
-  const cohort = getCohort(young.cohort);
+export default function PDRModal({ open, setOpen, meetingPoints, center, session }) {
+  const { young } = useAuth();
+  const { cohort, pdrChoiceExpired } = useCohort();
   const dispatch = useDispatch();
   const [modalMeetingPoint, setModalMeetingPoint] = useState({ isOpen: false, meetingPoint: null });
   const [loading, setLoading] = useState(false);