display volunteer team wishes

src/components/TeamAssignment/TeamAssignment.tsx

@@ -2,13 +2,16 @@ import { FC, memo } from "react"
 import ContentTitle from "../ui/Content/ContentTitle"
 import withUserConnected from "../../utils/withUserConnected"
 import { fetchTeamListIfNeed } from "../../store/teamList"
+import { fetchVolunteerListIfNeed } from "../../store/volunteerList"
+import VolunteersWithTeamWishes from "./VolunteersWithTeamWishes"
 
 const TeamAssignment: FC = (): JSX.Element => (
     <>
         <ContentTitle title="Affectation aux équipes" />
+        <VolunteersWithTeamWishes />
     </>
 )
 
 export default memo(withUserConnected(TeamAssignment))
 
-export const fetchFor = [fetchTeamListIfNeed]
+export const fetchFor = [fetchTeamListIfNeed, fetchVolunteerListIfNeed]

src/components/TeamAssignment/VolunteersWithTeamWishes.tsx

@@ -0,0 +1,42 @@
+import { FC, memo } from "react"
+import { useSelector } from "react-redux"
+import { createSelector } from "@reduxjs/toolkit"
+import { selectVolunteerList } from "../../store/volunteerList"
+import { selectTeamList } from "../../store/teamList"
+
+const selectVolunteersWithTeamWishes = createSelector(
+    selectVolunteerList,
+    selectTeamList,
+    (volunteers, teams) =>
+        volunteers
+            .filter((volunteer) => volunteer.teamWishes.length > 0)
+            .map((volunteer) => ({
+                ...volunteer,
+                teamWishes: volunteer.teamWishes.map((wishId) => {
+                    const matchingTeam = teams.find((team: any) => wishId === team?.id)
+                    return matchingTeam?.name
+                }),
+            }))
+)
+
+const VolunteersWithTeamWishes: FC = (): JSX.Element => {
+    const volunteers = useSelector(selectVolunteersWithTeamWishes)
+
+    return (
+        <div>
+            <div>Bénévoles ayant choisi des équipes ({volunteers.length}) :</div>
+            <ul>
+                {volunteers.map(({ id, lastname, firstname, teamWishes }) => (
+                    <li key={id}>
+                        <b>
+                            {firstname} {lastname}
+                        </b>{" "}
+                        : {teamWishes.join(", ")}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export default memo(VolunteersWithTeamWishes)

src/server/index.ts

@@ -29,6 +29,7 @@ import {
     volunteerParticipationDetailsSet,
     volunteerTeamWishesSet,
     volunteerDayWishesSet,
+    volunteerListGet,
 } from "./gsheets/volunteers"
 import { wishListGet, wishAdd } from "./gsheets/wishes"
 import config from "../config"
@@ -86,6 +87,7 @@ app.post("/PreVolunteerAdd", preVolunteerAdd)
 app.get("/PreVolunteerCountGet", preVolunteerCountGet)
 app.post("/VolunteerLogin", volunteerLogin)
 app.post("/VolunteerForgot", volunteerForgot)
+app.get("/VolunteerListGet", volunteerListGet)
 
 // Secured APIs
 app.get("/AnnouncementListGet", secure as RequestHandler, announcementListGet)

src/store/volunteerList.ts

@@ -1,8 +1,8 @@
-import { PayloadAction, createSlice, createEntityAdapter } from "@reduxjs/toolkit"
+import { PayloadAction, createSlice, createEntityAdapter, createSelector } from "@reduxjs/toolkit"
 
 import { StateRequest, toastError, elementListFetch } from "./utils"
 import { Volunteer } from "../services/volunteers"
-import { AppThunk, AppState } from "."
+import { AppThunk, AppState, EntitiesRequest } from "."
 import { volunteerListGet } from "../services/volunteersAccessors"
 
 const volunteerAdapter = createEntityAdapter<Volunteer>()
@@ -47,3 +47,14 @@ export const fetchVolunteerListIfNeed = (): AppThunk => (dispatch, getState) =>
 
     return null
 }
+
+export const selectVolunteerListState = (state: AppState): EntitiesRequest<Volunteer> =>
+    state.volunteerList
+
+export const selectVolunteerList = createSelector(
+    selectVolunteerListState,
+    ({ ids, entities, readyStatus }) => {
+        if (readyStatus !== "success") return []
+        return ids.map((id) => entities[id]) as Volunteer[]
+    }
+)