mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2026-02-06 18:56:48 +00:00
fix: batch room meeting status queries via prop-drilling
Alternative to the batcher approach (#848): parent fetches all room meeting statuses in a single bulk POST and passes data down as props. No extra dependency (@yornaath/batshit), no implicit batching magic. Backend: POST /v1/rooms/meetings/bulk-status + bulk DB methods. Frontend: useRoomsBulkMeetingStatus hook in RoomList, MeetingStatus receives data as props instead of calling per-room hooks. CI: fix pnpm 8→10 auto-detect, add concurrency group. Tests: Jest+jsdom+testing-library for bulk hook.
This commit is contained in:
@@ -1,5 +1,10 @@
|
||||
import { useMemo } from "react";
|
||||
import { Box, Heading, Text, VStack } from "@chakra-ui/react";
|
||||
import type { components } from "../../../reflector-api";
|
||||
import {
|
||||
useRoomsBulkMeetingStatus,
|
||||
BulkMeetingStatusMap,
|
||||
} from "../../../lib/apiHooks";
|
||||
|
||||
type Room = components["schemas"]["Room"];
|
||||
import { RoomTable } from "./RoomTable";
|
||||
@@ -31,6 +36,10 @@ export function RoomList({
|
||||
pt,
|
||||
loading,
|
||||
}: RoomListProps) {
|
||||
const roomNames = useMemo(() => rooms.map((r) => r.name), [rooms]);
|
||||
const bulkStatusQuery = useRoomsBulkMeetingStatus(roomNames);
|
||||
const meetingStatusMap: BulkMeetingStatusMap = bulkStatusQuery.data ?? {};
|
||||
|
||||
return (
|
||||
<VStack alignItems="start" gap={4} mb={mb} pt={pt}>
|
||||
<Heading size="md">{title}</Heading>
|
||||
@@ -43,6 +52,8 @@ export function RoomList({
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
loading={loading}
|
||||
meetingStatusMap={meetingStatusMap}
|
||||
meetingStatusLoading={bulkStatusQuery.isLoading}
|
||||
/>
|
||||
<RoomCards
|
||||
rooms={rooms}
|
||||
|
||||
@@ -14,11 +14,7 @@ import {
|
||||
import { LuLink, LuRefreshCw } from "react-icons/lu";
|
||||
import { FaCalendarAlt } from "react-icons/fa";
|
||||
import type { components } from "../../../reflector-api";
|
||||
import {
|
||||
useRoomActiveMeetings,
|
||||
useRoomUpcomingMeetings,
|
||||
useRoomIcsSync,
|
||||
} from "../../../lib/apiHooks";
|
||||
import { useRoomIcsSync, BulkMeetingStatusMap } from "../../../lib/apiHooks";
|
||||
|
||||
type Room = components["schemas"]["Room"];
|
||||
type Meeting = components["schemas"]["Meeting"];
|
||||
@@ -62,6 +58,8 @@ interface RoomTableProps {
|
||||
onEdit: (roomId: string, roomData: any) => void;
|
||||
onDelete: (roomId: string) => void;
|
||||
loading?: boolean;
|
||||
meetingStatusMap: BulkMeetingStatusMap;
|
||||
meetingStatusLoading: boolean;
|
||||
}
|
||||
|
||||
const getRoomModeDisplay = (mode: string): string => {
|
||||
@@ -104,14 +102,16 @@ const getZulipDisplay = (
|
||||
return "Enabled";
|
||||
};
|
||||
|
||||
function MeetingStatus({ roomName }: { roomName: string }) {
|
||||
const activeMeetingsQuery = useRoomActiveMeetings(roomName);
|
||||
const upcomingMeetingsQuery = useRoomUpcomingMeetings(roomName);
|
||||
|
||||
const activeMeetings = activeMeetingsQuery.data || [];
|
||||
const upcomingMeetings = upcomingMeetingsQuery.data || [];
|
||||
|
||||
if (activeMeetingsQuery.isLoading || upcomingMeetingsQuery.isLoading) {
|
||||
function MeetingStatus({
|
||||
activeMeetings,
|
||||
upcomingMeetings,
|
||||
isLoading,
|
||||
}: {
|
||||
activeMeetings: Meeting[];
|
||||
upcomingMeetings: CalendarEventResponse[];
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
if (isLoading) {
|
||||
return <Spinner size="sm" />;
|
||||
}
|
||||
|
||||
@@ -176,6 +176,8 @@ export function RoomTable({
|
||||
onEdit,
|
||||
onDelete,
|
||||
loading,
|
||||
meetingStatusMap,
|
||||
meetingStatusLoading,
|
||||
}: RoomTableProps) {
|
||||
const [syncingRooms, setSyncingRooms] = useState<Set<NonEmptyString>>(
|
||||
new Set(),
|
||||
@@ -252,7 +254,15 @@ export function RoomTable({
|
||||
<Link href={`/${room.name}`}>{room.name}</Link>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<MeetingStatus roomName={room.name} />
|
||||
<MeetingStatus
|
||||
activeMeetings={
|
||||
meetingStatusMap[room.name]?.active_meetings ?? []
|
||||
}
|
||||
upcomingMeetings={
|
||||
meetingStatusMap[room.name]?.upcoming_events ?? []
|
||||
}
|
||||
isLoading={meetingStatusLoading}
|
||||
/>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{getZulipDisplay(
|
||||
|
||||
Reference in New Issue
Block a user