From dd73fa21b85f1f0a8659586a2b468d3863ed4b4e Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Mon, 18 Apr 2022 01:31:08 +0200
Subject: [PATCH] display team on volunteer board

---
 src/components/TeamMembers/TeamMembers.tsx    | 11 +++++-
 src/components/VolunteerBoard/Board.tsx       |  2 +
 .../VolunteerTeam/VolunteerTeam.tsx           | 38 +++++++++++++++++++
 .../VolunteerTeam/styles.module.scss          | 11 ++++++
 src/store/auth.ts                             |  2 +
 5 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/components/VolunteerBoard/VolunteerTeam/VolunteerTeam.tsx
 create mode 100755 src/components/VolunteerBoard/VolunteerTeam/styles.module.scss

diff --git a/src/components/TeamMembers/TeamMembers.tsx b/src/components/TeamMembers/TeamMembers.tsx
index 8e08770..13b9123 100644
--- a/src/components/TeamMembers/TeamMembers.tsx
+++ b/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>
diff --git a/src/components/VolunteerBoard/Board.tsx b/src/components/VolunteerBoard/Board.tsx
index 7199a82..6803e62 100644
--- a/src/components/VolunteerBoard/Board.tsx
+++ b/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 />
     </>
 )
 
diff --git a/src/components/VolunteerBoard/VolunteerTeam/VolunteerTeam.tsx b/src/components/VolunteerBoard/VolunteerTeam/VolunteerTeam.tsx
new file mode 100644
index 0000000..3b07efe
--- /dev/null
+++ b/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
diff --git a/src/components/VolunteerBoard/VolunteerTeam/styles.module.scss b/src/components/VolunteerBoard/VolunteerTeam/styles.module.scss
new file mode 100755
index 0000000..f22ad0e
--- /dev/null
+++ b/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;
+}
diff --git a/src/store/auth.ts b/src/store/auth.ts
index d7dc99a..2220b33 100644
--- a/src/store/auth.ts
+++ b/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