From ae2383ac8753d6d77cb5b7db8b023e849f0a17f2 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Mon, 18 Apr 2022 14:24:00 +0200
Subject: [PATCH] display assigned team in volunteers team wishes list

---
 .../VolunteersWithTeamWishes.tsx              | 23 +++++++++++--------
 .../TeamAssignment/styles.module.scss         |  4 ++++
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx b/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx
index 37b2f23..3c201a5 100644
--- a/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx
+++ b/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>
diff --git a/src/components/TeamAssignment/styles.module.scss b/src/components/TeamAssignment/styles.module.scss
index 0aa3805..b81b826 100755
--- a/src/components/TeamAssignment/styles.module.scss
+++ b/src/components/TeamAssignment/styles.module.scss
@@ -27,6 +27,10 @@
     font-weight: bold;
 }
 
+.teamActive {
+    color: $color-orange;
+}
+
 .teamWishButton {
     margin: 0 2px;
     padding: 2px;