better display of team candidates

src/components/TeamAssignment/TeamAssignment.tsx

@@ -3,18 +3,17 @@ 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"
 import TeamsWithCandidates from "./TeamsWithCandidates"
+import withUserRole from "../../utils/withUserRole"
+import ROLES from "../../utils/roles.constants"
 
 const TeamAssignment: FC = (): JSX.Element => (
     <>
-        <ContentTitle title="Choix par équipes" />
+        <ContentTitle title="Gestion des équipes" />
         <TeamsWithCandidates />
-        <ContentTitle title="Choix des bénévoles" />
-        <VolunteersWithTeamWishes />
     </>
 )
 
-export default memo(withUserConnected(TeamAssignment))
+export default withUserRole(ROLES.ASSIGNER, memo(withUserConnected(TeamAssignment)))
 
 export const fetchFor = [fetchTeamListIfNeed, fetchVolunteerListIfNeed]

src/components/TeamAssignment/TeamWithCandidates.tsx

@@ -28,7 +28,13 @@ const selectTeamsWithVolunteersCandidates = createSelector(
             return {
                 id,
                 name,
-                volunteers: volunteersSelection,
+                volunteersWithoutTeam: volunteersSelection.filter((volunteer) => !volunteer.team),
+                volunteersWithCurrentTeam: volunteersSelection.filter(
+                    (volunteer) => volunteer.team === id
+                ),
+                volunteersWithOtherTeam: volunteersSelection.filter(
+                    (volunteer) => volunteer.team && volunteer.team !== id
+                ),
             }
         })
 )
@@ -49,57 +55,93 @@ const DaysDisplay: FC<PropsDaysDisplay> = ({ dayWishes }): JSX.Element => (
     </span>
 )
 
-type Props = {
+type TeamWithCandidatesVolunteerProps = {
+    volunteer: any
     teamId: number
 }
 
-const TeamWithCandidates: FC<Props> = ({ teamId }): JSX.Element | null => {
-    const teams = useSelector(selectTeamsWithVolunteersCandidates)
-    const currentTeam = teams.find((t) => t.id === teamId)
+const TeamWithCandidatesVolunteer: FC<TeamWithCandidatesVolunteerProps> = ({
+    teamId,
+    volunteer,
+}): JSX.Element => {
+    const { id, lastname, firstname, teamWishes, dayWishes, team } = volunteer
     const [, saveTeam] = useTeamAssign()
 
     const onTeamSelected = useCallback(
-        (volunteer, selectedTeamId) => {
-            saveTeam(volunteer, selectedTeamId)
+        (selectedVolunteer, selectedTeamId) => {
+            saveTeam(selectedVolunteer, selectedTeamId)
         },
         [saveTeam]
     )
 
+    return (
+        <li key={id}>
+            <span className={styles.volunteerName}>
+                {firstname} {lastname} (<DaysDisplay dayWishes={dayWishes} />)
+            </span>
+            {teamWishes.map((teamWish: any) => {
+                const active = teamWish.id === team
+                const current = teamWish.id === teamId
+                return (
+                    <button
+                        key={teamWish.id}
+                        type="button"
+                        onClick={() => onTeamSelected({ id, team }, teamWish.id)}
+                        className={classnames(
+                            styles.teamWishButton,
+                            current && styles.teamCurrent,
+                            active && styles.teamActive
+                        )}
+                    >
+                        {teamWish.name}
+                    </button>
+                )
+            })}
+        </li>
+    )
+}
+
+type TeamWithCandidatesProps = {
+    teamId: number
+}
+
+const TeamWithCandidates: FC<TeamWithCandidatesProps> = ({ teamId }): JSX.Element => {
+    const teams = useSelector(selectTeamsWithVolunteersCandidates)
+    const currentTeam = teams.find((t) => t.id === teamId)
+
     if (!currentTeam) return <div />
 
     return (
         <div>
             <div className={styles.teamHeaderName}>Equipe {currentTeam.name}</div>
             <TeamMembers teamId={teamId} />
-            <div>Bénévoles intéressés ({currentTeam.volunteers.length}) :</div>
+            <div>Bénévoles intéressés :</div>
             <ul>
-                {currentTeam.volunteers.map(
-                    ({ id, lastname, firstname, teamWishes, dayWishes, team }) => (
-                        <li key={id}>
-                            <span className={styles.volunteerName}>
-                                {firstname} {lastname} (<DaysDisplay dayWishes={dayWishes} />)
-                            </span>
-                            {teamWishes.map((teamWish) => {
-                                const active = teamWish.id === team
-                                const current = teamWish.id === teamId
-                                return (
-                                    <button
-                                        key={teamWish.id}
-                                        type="button"
-                                        onClick={() => onTeamSelected({ id, team }, teamWish.id)}
-                                        className={classnames(
-                                            styles.teamWishButton,
-                                            current && styles.teamCurrent,
-                                            active && styles.teamActive
-                                        )}
-                                    >
-                                        {teamWish.name}
-                                    </button>
-                                )
-                            })}
-                        </li>
-                    )
-                )}
+                {currentTeam.volunteersWithoutTeam.map((volunteer) => (
+                    <TeamWithCandidatesVolunteer
+                        key={volunteer.id}
+                        teamId={teamId}
+                        volunteer={volunteer}
+                    />
+                ))}
+            </ul>
+            <ul>
+                {currentTeam.volunteersWithCurrentTeam.map((volunteer) => (
+                    <TeamWithCandidatesVolunteer
+                        key={volunteer.id}
+                        teamId={teamId}
+                        volunteer={volunteer}
+                    />
+                ))}
+            </ul>
+            <ul>
+                {currentTeam.volunteersWithOtherTeam.map((volunteer) => (
+                    <TeamWithCandidatesVolunteer
+                        key={volunteer.id}
+                        teamId={teamId}
+                        volunteer={volunteer}
+                    />
+                ))}
             </ul>
         </div>
     )

src/components/TeamAssignment/TeamsWithCandidates.tsx

@@ -3,8 +3,6 @@ import { useSelector } from "react-redux"
 import { selectTeamList } from "../../store/teamList"
 import TeamWithCandidates from "./TeamWithCandidates"
 import styles from "./styles.module.scss"
-import withUserRole from "../../utils/withUserRole"
-import ROLES from "../../utils/roles.constants"
 
 const TeamsWithCandidates: FC = (): JSX.Element => {
     const teams = useSelector(selectTeamList)
@@ -27,4 +25,4 @@ const TeamsWithCandidates: FC = (): JSX.Element => {
     )
 }
 
-export default withUserRole(ROLES.ASSIGNER, memo(TeamsWithCandidates))
+export default memo(TeamsWithCandidates)

src/components/TeamAssignment/VolunteersWithTeamWishes.tsx

@@ -4,6 +4,7 @@ import { createSelector } from "@reduxjs/toolkit"
 import { selectVolunteerListAlphaSorted } from "../../store/volunteerList"
 import { selectTeamList } from "../../store/teamList"
 import styles from "./styles.module.scss"
+import ContentTitle from "../ui/Content/ContentTitle"
 
 const selectVolunteersWithTeamWishes = createSelector(
     selectVolunteerListAlphaSorted,
@@ -23,24 +24,52 @@ const selectVolunteersWithTeamWishes = createSelector(
             }))
 )
 
+const selectVolunteersWithTeam = createSelector(selectVolunteersWithTeamWishes, (volunteers) =>
+    volunteers.filter((volunteer) => volunteer.teamObject)
+)
+
+const selectVolunteersWithoutTeam = createSelector(selectVolunteersWithTeamWishes, (volunteers) =>
+    volunteers.filter((volunteer) => !volunteer.teamObject)
+)
+
 const VolunteersWithTeamWishes: FC = (): JSX.Element => {
-    const volunteers = useSelector(selectVolunteersWithTeamWishes)
+    const volunteersWithTeam = useSelector(selectVolunteersWithTeam)
+    const volunteersWithoutTeam = useSelector(selectVolunteersWithoutTeam)
 
     return (
-        <div>
-            <div>Bénévoles ayant choisi des équipes ({volunteers.length}) :</div>
-            <ul>
-                {volunteers.map(({ id, lastname, firstname, teamWishes, teamObject }) => (
-                    <li key={id}>
-                        <span className={styles.volunteerName}>
-                            {firstname} {lastname}{" "}
-                        </span>
-                        <span className={styles.teamActive}>{teamObject?.name} </span>
-                        <span>{teamWishes.join(", ")}</span>
-                    </li>
-                ))}
-            </ul>
-        </div>
+        <>
+            <ContentTitle title="Choix des bénévoles" />
+            <div>
+                <div>Bénévoles en attente d'équipe ({volunteersWithoutTeam.length}) :</div>
+                <ul>
+                    {volunteersWithoutTeam.map(
+                        ({ id, lastname, firstname, teamWishes, teamObject }) => (
+                            <li key={id}>
+                                <span className={styles.volunteerName}>
+                                    {firstname} {lastname}{" "}
+                                </span>
+                                <span className={styles.teamActive}>{teamObject?.name} </span>
+                                <span>{teamWishes.join(", ")}</span>
+                            </li>
+                        )
+                    )}
+                </ul>
+                <div>Bénévoles dans une équipe ({volunteersWithTeam.length}) :</div>
+                <ul>
+                    {volunteersWithTeam.map(
+                        ({ id, lastname, firstname, teamWishes, teamObject }) => (
+                            <li key={id}>
+                                <span className={styles.volunteerName}>
+                                    {firstname} {lastname}{" "}
+                                </span>
+                                <span className={styles.teamActive}>{teamObject?.name} </span>
+                                <span>{teamWishes.join(", ")}</span>
+                            </li>
+                        )
+                    )}
+                </ul>
+            </div>
+        </>
     )
 }