display team on volunteer board

src/components/TeamMembers/TeamMembers.tsx

@@ -7,6 +7,7 @@ import { selectTeamList } from "../../store/teamList"
 import styles from "./styles.module.scss"
 import { Volunteer } from "../../services/volunteers"
 import { Team } from "../../services/teams"
+import withUserRole from "../../utils/withUserRole"
 
 interface ExtendedVolunteer extends Volunteer {
     teamObject: Team | undefined
@@ -26,6 +27,14 @@ const selectVolunteersWithTeam = createSelector(
 
 const hasDay = (day: string) => (volunteer: Volunteer) => volunteer.dayWishes.includes(day)
 
+type VolunteerEmailProps = {
+    email: string
+}
+
+const VolunteerEmail: FC<VolunteerEmailProps> = withUserRole("référent", ({ email }) => (
+    <div className={styles.volunteerEmail}>{email}</div>
+))
+
 type Props = {
     teamId: number
 }
@@ -65,7 +74,7 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
                     >
                         D
                     </div>
-                    <div className={styles.volunteerEmail}>{volunteer.email}</div>
+                    <VolunteerEmail email={volunteer.email} />
                 </li>
             ))}
         </ul>

src/components/VolunteerBoard/Board.tsx

@@ -10,6 +10,7 @@ import ContentTitle from "../ui/Content/ContentTitle"
 import { fetchFor as fetchForDayWishesForm } from "./DayWishesForm/DayWishesForm"
 import { fetchFor as fetchForParticipationDetailsForm } from "./ParticipationDetailsForm/ParticipationDetailsForm"
 import { fetchFor as fetchForTeamWishesForm } from "./TeamWishesForm/TeamWishesForm"
+import VolunteerTeam from "./VolunteerTeam/VolunteerTeam"
 
 const Board: FC = (): JSX.Element => (
     <>
@@ -20,6 +21,7 @@ const Board: FC = (): JSX.Element => (
         <ParticipationDetailsFormModal />
         <TeamWishes />
         <TeamWishesFormModal />
+        <VolunteerTeam />
     </>
 )
 

src/components/VolunteerBoard/VolunteerTeam/VolunteerTeam.tsx

@@ -0,0 +1,38 @@
+import { FC, useEffect, useMemo } from "react"
+import { useSelector } from "react-redux"
+import TeamMembers from "../../TeamMembers/TeamMembers"
+import useAction from "../../../utils/useAction"
+import styles from "./styles.module.scss"
+import { selectUserId } from "../../../store/auth"
+import { fetchVolunteerListIfNeed, selectVolunteerList } from "../../../store/volunteerList"
+
+const useUserTeam = () => {
+    const userId = useSelector(selectUserId)
+    const fetch = useAction(fetchVolunteerListIfNeed)
+    const volunteers = useSelector(selectVolunteerList)
+
+    useEffect(() => {
+        if (userId) fetch()
+    }, [userId, fetch])
+
+    const user = useMemo(
+        () => volunteers.find((volunteer) => volunteer.id === userId),
+        [volunteers, userId]
+    )
+
+    return user?.team
+}
+
+const VolunteerTeam: FC = (): JSX.Element => {
+    const team = useUserTeam()
+    if (!team) return <div />
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.title}>Mon équipe</div>
+            <TeamMembers teamId={team} />
+        </div>
+    )
+}
+
+export default VolunteerTeam

src/components/VolunteerBoard/VolunteerTeam/styles.module.scss

@@ -0,0 +1,11 @@
+@import "../../../theme/variables";
+@import "../../../theme/mixins";
+
+.root {
+    @include inner-content-wrapper();
+}
+
+.title {
+    padding-bottom: 10px;
+    font-weight: bold;
+}

src/store/auth.ts

@@ -45,6 +45,8 @@ export const routerSelector = createSelector(selectRouter, (authData) => authDat
 
 export const selectUserRoles = createSelector(selectAuthData, (authData) => authData.roles)
 
+export const selectUserId = createSelector(selectAuthData, (authData) => authData.id)
+
 export const isUserConnected = createSelector(selectUserJwtToken, (token) => !!token)
 
 export default auth.reducer