From a9c4f7e52d3a1ed01c2bf526da4d4014419e07ba Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Thu, 16 May 2024 17:41:09 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Improve=20handling=20of=20hidden?=
 =?UTF-8?q?=20participants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/poll/desktop-poll.tsx | 10 +++++++---
 apps/web/src/components/scheduled-event.tsx   |  5 ++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/poll/desktop-poll.tsx b/apps/web/src/components/poll/desktop-poll.tsx
index 411f94d92..b36e17994 100644
--- a/apps/web/src/components/poll/desktop-poll.tsx
+++ b/apps/web/src/components/poll/desktop-poll.tsx
@@ -29,7 +29,10 @@ import { useVotingForm } from "@/components/poll/voting-form";
 import { usePermissions } from "@/contexts/permissions";
 import { usePoll } from "@/contexts/poll";
 
-import { useVisibleParticipants } from "../participants-provider";
+import {
+  useParticipants,
+  useVisibleParticipants,
+} from "../participants-provider";
 import ParticipantRow from "./desktop-poll/participant-row";
 import ParticipantRowForm from "./desktop-poll/participant-row-form";
 import PollHeader from "./desktop-poll/poll-header";
@@ -99,6 +102,7 @@ const DesktopPoll: React.FunctionComponent = () => {
   const votingForm = useVotingForm();
   const mode = votingForm.watch("mode");
 
+  const { participants } = useParticipants();
   const visibleParticipants = useVisibleParticipants();
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
@@ -228,7 +232,7 @@ const DesktopPoll: React.FunctionComponent = () => {
                 <CardTitle>
                   <Trans i18nKey="participants" />
                 </CardTitle>
-                <Badge>{visibleParticipants.length}</Badge>
+                <Badge>{participants.length}</Badge>
                 {canAddNewParticipant && mode !== "new" ? (
                   <Button
                     className="ml-2"
@@ -251,7 +255,7 @@ const DesktopPoll: React.FunctionComponent = () => {
                 <TimesShownIn />
               </CardHeader>
             ) : null}
-            {visibleParticipants.length > 0 || mode !== "view" ? (
+            {participants.length > 0 || mode !== "view" ? (
               <div className="relative flex min-h-0 flex-col">
                 <div
                   aria-hidden="true"
diff --git a/apps/web/src/components/scheduled-event.tsx b/apps/web/src/components/scheduled-event.tsx
index 39aae68da..1ef8d7e3b 100644
--- a/apps/web/src/components/scheduled-event.tsx
+++ b/apps/web/src/components/scheduled-event.tsx
@@ -6,6 +6,7 @@ import { DateIconInner } from "@/components/date-icon";
 import { ParticipantAvatarBar } from "@/components/participant-avatar-bar";
 import { useParticipants } from "@/components/participants-provider";
 import { Trans } from "@/components/trans";
+import { IfParticipantsVisible } from "@/components/visibility";
 import { usePoll } from "@/contexts/poll";
 import { useDayjs } from "@/utils/dayjs";
 
@@ -71,7 +72,9 @@ export function ScheduledEvent() {
             </div>
           </div>
           <div>
-            <Attendees />
+            <IfParticipantsVisible>
+              <Attendees />
+            </IfParticipantsVisible>
           </div>
         </div>
       </CardContent>