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)