From 12ab2220a625fba6693aa23684fd2dc4e4fd79f4 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Mon, 18 Apr 2022 14:08:16 +0200
Subject: [PATCH] display day unavailability in team members in grey

---
 src/components/TeamMembers/TeamMembers.tsx    | 42 ++++++++++++-------
 src/components/TeamMembers/styles.module.scss |  4 ++
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/components/TeamMembers/TeamMembers.tsx b/src/components/TeamMembers/TeamMembers.tsx
index a822c15..40afeca 100644
--- a/src/components/TeamMembers/TeamMembers.tsx
+++ b/src/components/TeamMembers/TeamMembers.tsx
@@ -35,6 +35,31 @@ const VolunteerEmail: FC<VolunteerEmailProps> = withUserRole("référent", ({ em
     <div className={styles.volunteerEmail}>{email}</div>
 ))
 
+type DaysAvailabilityProps = {
+    volunteer: Volunteer
+}
+
+const DaysAvailability: FC<DaysAvailabilityProps> = ({ volunteer }): JSX.Element => {
+    if (volunteer.dayWishes.length === 0) {
+        return (
+            <>
+                <div className={classnames(styles.day, styles.unknown)}>S</div>
+                <div className={classnames(styles.day, styles.unknown)}>D</div>
+            </>
+        )
+    }
+    return (
+        <>
+            <div className={classnames(styles.day, hasDay("S")(volunteer) && styles.available)}>
+                S
+            </div>
+            <div className={classnames(styles.day, hasDay("D")(volunteer) && styles.available)}>
+                D
+            </div>
+        </>
+    )
+}
+
 type Props = {
     teamId: number
 }
@@ -58,22 +83,7 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
                     <div className={styles.volunteerName}>
                         {volunteer.firstname} {volunteer.lastname}
                     </div>
-                    <div
-                        className={classnames(
-                            styles.day,
-                            hasDay("S")(volunteer) && styles.available
-                        )}
-                    >
-                        S
-                    </div>
-                    <div
-                        className={classnames(
-                            styles.day,
-                            hasDay("D")(volunteer) && styles.available
-                        )}
-                    >
-                        D
-                    </div>
+                    <DaysAvailability volunteer={volunteer} />
                     <VolunteerEmail email={volunteer.email} />
                 </li>
             ))}
diff --git a/src/components/TeamMembers/styles.module.scss b/src/components/TeamMembers/styles.module.scss
index e853149..edc7070 100755
--- a/src/components/TeamMembers/styles.module.scss
+++ b/src/components/TeamMembers/styles.module.scss
@@ -45,6 +45,10 @@ $height: 24px;
     background-color: $color-red;
     color: transparent;
 
+    &.unknown {
+        background-color: $color-grey-medium;
+    }
+
     &.available {
         background-color: $color-green;
     }