display assigned team in volunteers team wishes list

src/components/TeamAssignment/VolunteersWithTeamWishes.tsx

@@ -3,6 +3,7 @@ import { useSelector } from "react-redux"
 import { createSelector } from "@reduxjs/toolkit"
 import { selectVolunteerListAlphaSorted } from "../../store/volunteerList"
 import { selectTeamList } from "../../store/teamList"
+import styles from "./styles.module.scss"
 
 const selectVolunteersWithTeamWishes = createSelector(
     selectVolunteerListAlphaSorted,
@@ -12,10 +13,13 @@ const selectVolunteersWithTeamWishes = createSelector(
             .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
-                }),
+                teamWishes: volunteer.teamWishes
+                    .filter((wishId) => wishId !== volunteer.team)
+                    .map((wishId) => {
+                        const matchingTeam = teams.find((team: any) => wishId === team?.id)
+                        return matchingTeam?.name
+                    }),
+                teamObject: teams.find((team: any) => volunteer.team === team?.id),
             }))
 )
 
@@ -26,12 +30,13 @@ const VolunteersWithTeamWishes: FC = (): JSX.Element => {
         <div>
             <div>Bénévoles ayant choisi des équipes ({volunteers.length}) :</div>
             <ul>
-                {volunteers.map(({ id, lastname, firstname, teamWishes }) => (
+                {volunteers.map(({ id, lastname, firstname, teamWishes, teamObject }) => (
                     <li key={id}>
-                        <b>
-                            {firstname} {lastname}
-                        </b>{" "}
-                        : {teamWishes.join(", ")}
+                        <span className={styles.volunteerName}>
+                            {firstname} {lastname}{" "}
+                        </span>
+                        <span className={styles.teamActive}>{teamObject?.name} </span>
+                        <span>{teamWishes.join(", ")}</span>
                     </li>
                 ))}
             </ul>

src/components/TeamAssignment/styles.module.scss

@@ -27,6 +27,10 @@
     font-weight: bold;
 }
 
+.teamActive {
+    color: $color-orange;
+}
+
 .teamWishButton {
     margin: 0 2px;
     padding: 2px;