can view volunteers team wishes by team

src/components/TeamAssignment/TeamAssignment.tsx

@@ -4,10 +4,13 @@ import withUserConnected from "../../utils/withUserConnected"
 import { fetchTeamListIfNeed } from "../../store/teamList"
 import { fetchVolunteerListIfNeed } from "../../store/volunteerList"
 import VolunteersWithTeamWishes from "./VolunteersWithTeamWishes"
+import TeamsWithCandidates from "./TeamsWithCandidates"
 
 const TeamAssignment: FC = (): JSX.Element => (
     <>
-        <ContentTitle title="Affectation aux équipes" />
+        <ContentTitle title="Choix par équipes" />
+        <TeamsWithCandidates />
+        <ContentTitle title="Choix des bénévoles" />
         <VolunteersWithTeamWishes />
     </>
 )

src/components/TeamAssignment/TeamWithCandidates.tsx

@@ -0,0 +1,57 @@
+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 selectTeamsWithVolunteersCandidates = createSelector(
+    selectVolunteerList,
+    selectTeamList,
+    (volunteers, teams) =>
+        teams.map(({ id, name }: any) => {
+            const volunteersSelection = volunteers
+                .filter((volunteer) => volunteer.teamWishes.includes(id))
+                .map((volunteer) => ({
+                    ...volunteer,
+                    teamWishes: volunteer.teamWishes.map((wishId) => {
+                        const matchingTeam = teams.find((team: any) => wishId === team?.id)
+                        return matchingTeam?.name
+                    }),
+                }))
+            return {
+                id,
+                name,
+                volunteers: volunteersSelection,
+            }
+        })
+)
+
+type Props = {
+    teamId: number
+}
+
+const TeamWithCandidates: FC<Props> = ({ teamId }): JSX.Element | null => {
+    const teams = useSelector(selectTeamsWithVolunteersCandidates)
+    const team = teams.find((t) => t.id === teamId)
+    if (!team) return null
+
+    return (
+        <div>
+            <div>
+                Equipe {team.name} ({team.volunteers.length}) :
+            </div>
+            <ul>
+                {team.volunteers.map(({ id, lastname, firstname, teamWishes }) => (
+                    <li key={id}>
+                        <b>
+                            {firstname} {lastname}
+                        </b>{" "}
+                        : {teamWishes.join(", ")}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export default memo(TeamWithCandidates)

src/components/TeamAssignment/TeamsWithCandidates.tsx

@@ -0,0 +1,28 @@
+import { FC, memo, useState } from "react"
+import { useSelector } from "react-redux"
+import { selectTeamList } from "../../store/teamList"
+import TeamWithCandidates from "./TeamWithCandidates"
+import styles from "./styles.module.scss"
+
+const TeamsWithCandidates: FC = (): JSX.Element => {
+    const teams = useSelector(selectTeamList)
+    const [currentTeam, setCurrentTeam] = useState<number>(0)
+
+    return (
+        <div>
+            <div>Cliquez sur l'équipe à gérer :</div>
+            <ul className={styles.teamList}>
+                {teams.map((team: any) => (
+                    <li key={team.id} className={styles.teamListItem}>
+                        <button type="button" onClick={() => setCurrentTeam(team.id)}>
+                            {team.name}
+                        </button>
+                    </li>
+                ))}
+            </ul>
+            {!!currentTeam && <TeamWithCandidates teamId={currentTeam} />}
+        </div>
+    )
+}
+
+export default memo(TeamsWithCandidates)

src/components/TeamAssignment/styles.module.scss

@@ -5,3 +5,19 @@
     padding-bottom: 10px;
     font-weight: bold;
 }
+
+.teamList {
+    margin: 0 0 20px;
+    padding: 0;
+}
+
+.teamListItem {
+    display: inline-block;
+    margin: 2px;
+    text-align: center;
+    background-color: #ccc;
+
+    button {
+        padding: 4px 10px;
+    }
+}