💄 Improve handling of hidden participants

This commit is contained in:
Luke Vella 2024-05-16 17:41:09 +08:00
parent dcb7157b86
commit a9c4f7e52d
2 changed files with 11 additions and 4 deletions

View file

@ -29,7 +29,10 @@ import { useVotingForm } from "@/components/poll/voting-form";
import { usePermissions } from "@/contexts/permissions"; import { usePermissions } from "@/contexts/permissions";
import { usePoll } from "@/contexts/poll"; import { usePoll } from "@/contexts/poll";
import { useVisibleParticipants } from "../participants-provider"; import {
useParticipants,
useVisibleParticipants,
} from "../participants-provider";
import ParticipantRow from "./desktop-poll/participant-row"; import ParticipantRow from "./desktop-poll/participant-row";
import ParticipantRowForm from "./desktop-poll/participant-row-form"; import ParticipantRowForm from "./desktop-poll/participant-row-form";
import PollHeader from "./desktop-poll/poll-header"; import PollHeader from "./desktop-poll/poll-header";
@ -99,6 +102,7 @@ const DesktopPoll: React.FunctionComponent = () => {
const votingForm = useVotingForm(); const votingForm = useVotingForm();
const mode = votingForm.watch("mode"); const mode = votingForm.watch("mode");
const { participants } = useParticipants();
const visibleParticipants = useVisibleParticipants(); const visibleParticipants = useVisibleParticipants();
const scrollRef = React.useRef<HTMLDivElement>(null); const scrollRef = React.useRef<HTMLDivElement>(null);
@ -228,7 +232,7 @@ const DesktopPoll: React.FunctionComponent = () => {
<CardTitle> <CardTitle>
<Trans i18nKey="participants" /> <Trans i18nKey="participants" />
</CardTitle> </CardTitle>
<Badge>{visibleParticipants.length}</Badge> <Badge>{participants.length}</Badge>
{canAddNewParticipant && mode !== "new" ? ( {canAddNewParticipant && mode !== "new" ? (
<Button <Button
className="ml-2" className="ml-2"
@ -251,7 +255,7 @@ const DesktopPoll: React.FunctionComponent = () => {
<TimesShownIn /> <TimesShownIn />
</CardHeader> </CardHeader>
) : null} ) : null}
{visibleParticipants.length > 0 || mode !== "view" ? ( {participants.length > 0 || mode !== "view" ? (
<div className="relative flex min-h-0 flex-col"> <div className="relative flex min-h-0 flex-col">
<div <div
aria-hidden="true" aria-hidden="true"

View file

@ -6,6 +6,7 @@ import { DateIconInner } from "@/components/date-icon";
import { ParticipantAvatarBar } from "@/components/participant-avatar-bar"; import { ParticipantAvatarBar } from "@/components/participant-avatar-bar";
import { useParticipants } from "@/components/participants-provider"; import { useParticipants } from "@/components/participants-provider";
import { Trans } from "@/components/trans"; import { Trans } from "@/components/trans";
import { IfParticipantsVisible } from "@/components/visibility";
import { usePoll } from "@/contexts/poll"; import { usePoll } from "@/contexts/poll";
import { useDayjs } from "@/utils/dayjs"; import { useDayjs } from "@/utils/dayjs";
@ -71,7 +72,9 @@ export function ScheduledEvent() {
</div> </div>
</div> </div>
<div> <div>
<Attendees /> <IfParticipantsVisible>
<Attendees />
</IfParticipantsVisible>
</div> </div>
</div> </div>
</CardContent> </CardContent>