Add notification for TeamWishesForm

src/components/Notifications/index.tsx

@@ -7,6 +7,8 @@ import styles from "./styles.module.scss"
 import { selectUserJwtToken } from "../../store/auth"
 import { VolunteerNotifs } from "../../services/volunteers"
 import LogoutButton from "../LogoutButton/LogoutButton"
+import { TeamWishesForm } from ".."
+import { fetchFor as fetchForTeamWishesForm } from "../VolunteerBoard/TeamWishesForm/TeamWishesForm"
 
 interface Props {
     // eslint-disable-next-line react/require-default-props
@@ -142,6 +144,26 @@ const Notifications = ({ volunteerNotifs }: Props): JSX.Element | null => {
         )
     }
 
+    const onSubmit3 = useCallback((): void => {
+        dispatch(
+            fetchVolunteerNotifsSet(jwtToken, 0, {
+                hiddenNotifs: [...(volunteerNotifs?.hiddenNotifs || []), 3],
+            })
+        )
+    }, [dispatch, jwtToken, volunteerNotifs])
+
+    if (!_.includes(hidden, 3)) {
+        notifs.push(
+            <div key="1">
+                <div className={styles.notificationsPage}>
+                    <div className={styles.notificationsContent}>
+                        <TeamWishesForm afterSubmit={onSubmit3} />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
     /* DISCORD
     Discord nous donne à tous la parole via nos téléphone ou navigateurs, pour organiser le meilleur des festivals !
 Il permet de discuter sujet par sujet entre tous les bénévoles, entre les membres d'une même équipe, ou avec ton référent.
@@ -382,3 +404,6 @@ Tu n'y es absolument pas obligé(e) ! C'est juste plus pratique.
 }
 
 export default memo(Notifications)
+
+// Fetch server-side data here
+export const fetchFor = [...fetchForTeamWishesForm]

src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx

@@ -5,8 +5,9 @@ import set from "lodash/set"
 import classnames from "classnames"
 import styles from "./styles.module.scss"
 import { useUserTeamWishes } from "../teamWishes.utils"
-import { selectTeamList } from "../../../store/teamList"
+import { fetchTeamListIfNeed, selectTeamList } from "../../../store/teamList"
 import useSelection from "../useSelection"
+import { fetchVolunteerTeamWishesSetIfNeed } from "../../../store/volunteerTeamWishesSet"
 
 type Props = {
     afterSubmit?: () => void | undefined
@@ -39,13 +40,16 @@ const TeamWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
         const teamWishes = teams
             .map((team) => team && team.id)
             .filter((id) => id && isInSelection(id))
+        console.log("saveWishes")
         saveWishes({ teamWishes, teamWishesComment })
         if (afterSubmit) afterSubmit()
     }, [teams, isInSelection, saveWishes, afterSubmit])
 
     return (
         <div className={styles.root}>
-            <div className={styles.title}>Mes choix d&apos;équipes</div>
+            <div className={styles.title}>
+                Sélectionne la ou les équipes que tu aimerais rejoindre :
+            </div>
             <ul className={styles.teamList}>
                 {teams.map((team: any) => (
                     <li
@@ -92,3 +96,6 @@ TeamWishesForm.defaultProps = {
 }
 
 export default memo(TeamWishesForm)
+
+// Fetch server-side data here
+export const fetchFor = [fetchTeamListIfNeed, fetchVolunteerTeamWishesSetIfNeed]

src/components/index.ts

@@ -1,25 +1,31 @@
 import AnnouncementLink from "./AnnouncementLink"
-import LoginForm from "./LoginForm"
-import Notifications from "./Notifications"
-import VolunteerList from "./VolunteerList"
+import ErrorBoundary from "./ErrorBoundary"
 import JavGameList from "./JavGameList"
+import Loading from "./Loading"
+import LoginForm from "./LoginForm"
+import Notifications, { fetchFor as fetchForNotifications } from "./Notifications"
+import PreRegisterForm from "./PreRegisterForm"
+import TeamWishesForm, {
+    fetchFor as fetchForTeamWishesForm,
+} from "./VolunteerBoard/TeamWishesForm/TeamWishesForm"
+import VolunteerList from "./VolunteerList"
 import VolunteerInfo from "./VolunteerInfo"
 import VolunteerSet from "./VolunteerSet"
-import ErrorBoundary from "./ErrorBoundary"
-import Loading from "./Loading"
 import WishAdd from "./WishAdd"
-import PreRegisterForm from "./PreRegisterForm"
 
 export {
     AnnouncementLink,
+    ErrorBoundary,
+    JavGameList,
+    Loading,
     LoginForm,
     Notifications,
-    VolunteerList,
-    JavGameList,
-    VolunteerInfo,
-    VolunteerSet,
-    ErrorBoundary,
-    Loading,
-    WishAdd,
+    fetchForNotifications,
     PreRegisterForm,
+    TeamWishesForm,
+    fetchForTeamWishesForm,
+    VolunteerInfo,
+    VolunteerList,
+    VolunteerSet,
+    WishAdd,
 }

src/pages/Board/Board.tsx

@@ -8,8 +8,7 @@ import Page from "../../components/Page/Page"
 import Board from "../../components/VolunteerBoard/Board"
 import { fetchVolunteerDayWishesSetIfNeed } from "../../store/volunteerDayWishesSet"
 import { fetchVolunteerParticipationDetailsSetIfNeed } from "../../store/volunteerParticipationDetailsSet"
-import { fetchVolunteerTeamWishesSetIfNeed } from "../../store/volunteerTeamWishesSet"
-import { fetchTeamListIfNeed } from "../../store/teamList"
+import { fetchForTeamWishesForm } from "../../components"
 
 export type Props = RouteComponentProps
 
@@ -31,8 +30,7 @@ const BoardPage: FC<Props> = (): JSX.Element => {
 export const loadData = (): AppThunk[] => [
     fetchVolunteerDayWishesSetIfNeed(),
     fetchVolunteerParticipationDetailsSetIfNeed(),
-    fetchVolunteerTeamWishesSetIfNeed(),
-    fetchTeamListIfNeed(),
+    ...fetchForTeamWishesForm.map((f) => f()),
 ]
 
 export default memo(BoardPage)

src/pages/Home/Home.tsx

@@ -4,7 +4,7 @@ import { useSelector, shallowEqual } from "react-redux"
 import { Helmet } from "react-helmet"
 
 import { AppState, AppThunk } from "../../store"
-import { LoginForm, Notifications } from "../../components"
+import { LoginForm, Notifications, fetchForTeamWishesForm } from "../../components"
 import styles from "./styles.module.scss"
 import { fetchVolunteerNotifsSetIfNeed } from "../../store/volunteerNotifsSet"
 import { VolunteerNotifs } from "../../services/volunteers"
@@ -49,6 +49,9 @@ const HomePage: FC<Props> = (): JSX.Element => {
 }
 
 // Fetch server-side data here
-export const loadData = (): AppThunk[] => [fetchVolunteerNotifsSetIfNeed()]
+export const loadData = (): AppThunk[] => [
+    fetchVolunteerNotifsSetIfNeed(),
+    ...fetchForTeamWishesForm.map((f) => f()),
+]
 
 export default memo(HomePage)