mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-22 21:29:05 +00:00
feat: reorganize room edit dialog and fix Force Sync button
- Move WebHook configuration from General to dedicated WebHook tab - Add WebHook tab after Share tab in room edit dialog - Fix Force Sync button not appearing by adding missing isEditing prop - Fix indentation issues in MeetingSelection component 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -9,16 +9,21 @@ import {
|
||||
Spinner,
|
||||
Badge,
|
||||
Icon,
|
||||
Flex,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import { FaUsers, FaClock, FaCalendarAlt, FaPlus } from "react-icons/fa";
|
||||
import { LuX } from "react-icons/lu";
|
||||
import type { components } from "../reflector-api";
|
||||
import {
|
||||
useRoomActiveMeetings,
|
||||
useRoomUpcomingMeetings,
|
||||
useRoomJoinMeeting,
|
||||
useMeetingDeactivate,
|
||||
useRoomGetByName,
|
||||
} from "../lib/apiHooks";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
type Meeting = components["schemas"]["Meeting"];
|
||||
type CalendarEventResponse = components["schemas"]["CalendarEventResponse"];
|
||||
@@ -26,6 +31,7 @@ type CalendarEventResponse = components["schemas"]["CalendarEventResponse"];
|
||||
interface MeetingSelectionProps {
|
||||
roomName: string;
|
||||
isOwner: boolean;
|
||||
isSharedRoom: boolean;
|
||||
onMeetingSelect: (meeting: Meeting) => void;
|
||||
onCreateUnscheduled: () => void;
|
||||
}
|
||||
@@ -59,21 +65,29 @@ const formatCountdown = (startTime: string | Date) => {
|
||||
export default function MeetingSelection({
|
||||
roomName,
|
||||
isOwner,
|
||||
isSharedRoom,
|
||||
onMeetingSelect,
|
||||
onCreateUnscheduled,
|
||||
}: MeetingSelectionProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// Use React Query hooks for data fetching
|
||||
const roomQuery = useRoomGetByName(roomName);
|
||||
const activeMeetingsQuery = useRoomActiveMeetings(roomName);
|
||||
const upcomingMeetingsQuery = useRoomUpcomingMeetings(roomName);
|
||||
const joinMeetingMutation = useRoomJoinMeeting();
|
||||
const deactivateMeetingMutation = useMeetingDeactivate();
|
||||
|
||||
const room = roomQuery.data;
|
||||
|
||||
const activeMeetings = activeMeetingsQuery.data || [];
|
||||
const upcomingEvents = upcomingMeetingsQuery.data || [];
|
||||
const loading =
|
||||
activeMeetingsQuery.isLoading || upcomingMeetingsQuery.isLoading;
|
||||
const error = activeMeetingsQuery.error || upcomingMeetingsQuery.error;
|
||||
roomQuery.isLoading ||
|
||||
activeMeetingsQuery.isLoading ||
|
||||
upcomingMeetingsQuery.isLoading;
|
||||
const error =
|
||||
roomQuery.error || activeMeetingsQuery.error || upcomingMeetingsQuery.error;
|
||||
|
||||
const handleJoinMeeting = async (meetingId: string) => {
|
||||
try {
|
||||
@@ -94,7 +108,21 @@ export default function MeetingSelection({
|
||||
|
||||
const handleJoinUpcoming = (event: CalendarEventResponse) => {
|
||||
// Navigate to waiting page with event info
|
||||
router.push(`/room/${roomName}/wait?eventId=${event.id}`);
|
||||
router.push(`/${roomName}/wait/${event.id}`);
|
||||
};
|
||||
|
||||
const handleEndMeeting = async (meetingId: string) => {
|
||||
try {
|
||||
await deactivateMeetingMutation.mutateAsync({
|
||||
params: {
|
||||
path: {
|
||||
meeting_id: meetingId,
|
||||
},
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to end meeting:", err);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
@@ -123,197 +151,241 @@ export default function MeetingSelection({
|
||||
);
|
||||
}
|
||||
|
||||
// Generate display name for room
|
||||
const displayName = room?.display_name || room?.name || roomName;
|
||||
const roomTitle =
|
||||
displayName.endsWith("'s") || displayName.endsWith("s")
|
||||
? `${displayName} Room`
|
||||
: `${displayName}'s Room`;
|
||||
|
||||
return (
|
||||
<VStack gap={6} align="stretch" p={6}>
|
||||
<Box>
|
||||
<Text fontSize="2xl" fontWeight="bold" mb={4}>
|
||||
Select a Meeting
|
||||
<Flex
|
||||
flexDir="column"
|
||||
w={{ base: "full", md: "container.xl" }}
|
||||
mx="auto"
|
||||
px={6}
|
||||
py={8}
|
||||
minH="100vh"
|
||||
>
|
||||
<Flex
|
||||
flexDir="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
mb={6}
|
||||
>
|
||||
<Text fontSize="lg" fontWeight="semibold">
|
||||
{displayName}'s room
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
{/* Active Meetings */}
|
||||
{activeMeetings.length > 0 && (
|
||||
<>
|
||||
<Text fontSize="lg" fontWeight="semibold" mb={3}>
|
||||
Active Meetings
|
||||
</Text>
|
||||
<VStack gap={3} mb={6}>
|
||||
{activeMeetings.map((meeting) => (
|
||||
<Box
|
||||
key={meeting.id}
|
||||
width="100%"
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
>
|
||||
<HStack justify="space-between" align="start">
|
||||
<VStack align="start" gap={2} flex={1}>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color="blue.500" />
|
||||
<Text fontWeight="semibold">
|
||||
{(meeting.calendar_metadata as any)?.title ||
|
||||
"Meeting"}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{isOwner &&
|
||||
(meeting.calendar_metadata as any)?.description && (
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
{(meeting.calendar_metadata as any).description}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<HStack gap={4} fontSize="sm" color="gray.500">
|
||||
<HStack>
|
||||
<Icon as={FaUsers} />
|
||||
<Text>{meeting.num_clients} participants</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaClock} />
|
||||
<Text>
|
||||
Started {formatDateTime(meeting.start_date)}
|
||||
</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{isOwner &&
|
||||
(meeting.calendar_metadata as any)?.attendees && (
|
||||
<HStack gap={2} flexWrap="wrap">
|
||||
{(meeting.calendar_metadata as any).attendees
|
||||
.slice(0, 3)
|
||||
.map((attendee: any, idx: number) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
colorScheme="green"
|
||||
fontSize="xs"
|
||||
>
|
||||
{attendee.name || attendee.email}
|
||||
</Badge>
|
||||
))}
|
||||
{(meeting.calendar_metadata as any).attendees
|
||||
.length > 3 && (
|
||||
<Badge colorScheme="gray" fontSize="xs">
|
||||
+
|
||||
{(meeting.calendar_metadata as any).attendees
|
||||
.length - 3}{" "}
|
||||
more
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
size="md"
|
||||
onClick={() => handleJoinMeeting(meeting.id)}
|
||||
>
|
||||
Join Now
|
||||
</Button>
|
||||
{/* Active Meetings */}
|
||||
{activeMeetings.length > 0 && (
|
||||
<VStack align="stretch" gap={4} mb={6}>
|
||||
<Text fontSize="md" fontWeight="semibold" color="gray.700">
|
||||
Active Meetings
|
||||
</Text>
|
||||
{activeMeetings.map((meeting) => (
|
||||
<Box
|
||||
key={meeting.id}
|
||||
width="100%"
|
||||
bg="white"
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
_hover={{ borderColor: "gray.300" }}
|
||||
>
|
||||
<HStack justify="space-between" align="start">
|
||||
<VStack align="start" gap={2} flex={1}>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color="blue.500" />
|
||||
<Text fontWeight="semibold">
|
||||
{(meeting.calendar_metadata as any)?.title || "Meeting"}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
))}
|
||||
</VStack>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Upcoming Meetings */}
|
||||
{upcomingEvents.length > 0 && (
|
||||
<>
|
||||
<Text fontSize="lg" fontWeight="semibold" mb={3}>
|
||||
Upcoming Meetings
|
||||
</Text>
|
||||
<VStack gap={3} mb={6}>
|
||||
{upcomingEvents.map((event) => (
|
||||
<Box
|
||||
key={event.id}
|
||||
width="100%"
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
bg="gray.50"
|
||||
>
|
||||
<HStack justify="space-between" align="start">
|
||||
<VStack align="start" gap={2} flex={1}>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color="orange.500" />
|
||||
<Text fontWeight="semibold">
|
||||
{event.title || "Scheduled Meeting"}
|
||||
</Text>
|
||||
<Badge colorScheme="orange" fontSize="xs">
|
||||
{formatCountdown(event.start_time)}
|
||||
{isOwner &&
|
||||
(meeting.calendar_metadata as any)?.description && (
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
{(meeting.calendar_metadata as any).description}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<HStack gap={4} fontSize="sm" color="gray.500">
|
||||
<HStack>
|
||||
<Icon as={FaUsers} />
|
||||
<Text>{meeting.num_clients} participants</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaClock} />
|
||||
<Text>Started {formatDateTime(meeting.start_date)}</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{isOwner && (meeting.calendar_metadata as any)?.attendees && (
|
||||
<HStack gap={2} flexWrap="wrap">
|
||||
{(meeting.calendar_metadata as any).attendees
|
||||
.slice(0, 3)
|
||||
.map((attendee: any, idx: number) => (
|
||||
<Badge key={idx} colorScheme="green" fontSize="xs">
|
||||
{attendee.name || attendee.email}
|
||||
</Badge>
|
||||
))}
|
||||
{(meeting.calendar_metadata as any).attendees.length >
|
||||
3 && (
|
||||
<Badge colorScheme="gray" fontSize="xs">
|
||||
+
|
||||
{(meeting.calendar_metadata as any).attendees.length -
|
||||
3}{" "}
|
||||
more
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
{isOwner && event.description && (
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
{event.description}
|
||||
</Text>
|
||||
)}
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
<HStack gap={4} fontSize="sm" color="gray.500">
|
||||
<Text>
|
||||
{formatDateTime(event.start_time)} -{" "}
|
||||
{formatDateTime(event.end_time)}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{isOwner && event.attendees && (
|
||||
<HStack gap={2} flexWrap="wrap">
|
||||
{event.attendees
|
||||
.slice(0, 3)
|
||||
.map((attendee: any, idx: number) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
colorScheme="purple"
|
||||
fontSize="xs"
|
||||
>
|
||||
{attendee.name || attendee.email}
|
||||
</Badge>
|
||||
))}
|
||||
{event.attendees.length > 3 && (
|
||||
<Badge colorScheme="gray" fontSize="xs">
|
||||
+{event.attendees.length - 3} more
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
<HStack gap={2}>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
size="md"
|
||||
onClick={() => handleJoinMeeting(meeting.id)}
|
||||
>
|
||||
Join Now
|
||||
</Button>
|
||||
{isOwner && (
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme="orange"
|
||||
colorScheme="red"
|
||||
size="md"
|
||||
onClick={() => handleJoinUpcoming(event)}
|
||||
onClick={() => handleEndMeeting(meeting.id)}
|
||||
isLoading={deactivateMeetingMutation.isPending}
|
||||
>
|
||||
Join Early
|
||||
<Icon as={LuX} />
|
||||
End Meeting
|
||||
</Button>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
))}
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{/* Upcoming Meetings */}
|
||||
{upcomingEvents.length > 0 && (
|
||||
<VStack align="stretch" gap={4} mb={6}>
|
||||
<Text fontSize="md" fontWeight="semibold" color="gray.700">
|
||||
Upcoming Meetings
|
||||
</Text>
|
||||
{upcomingEvents.map((event) => (
|
||||
<Box
|
||||
key={event.id}
|
||||
width="100%"
|
||||
bg="white"
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
_hover={{ borderColor: "gray.300" }}
|
||||
>
|
||||
<HStack justify="space-between" align="start">
|
||||
<VStack align="start" gap={2} flex={1}>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color="orange.500" />
|
||||
<Text fontWeight="semibold">
|
||||
{event.title || "Scheduled Meeting"}
|
||||
</Text>
|
||||
<Badge colorScheme="orange" fontSize="xs">
|
||||
{formatCountdown(event.start_time)}
|
||||
</Badge>
|
||||
</HStack>
|
||||
</Box>
|
||||
))}
|
||||
</VStack>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Box h="1px" bg="gray.200" my={6} />
|
||||
{isOwner && event.description && (
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
{event.description}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{/* Create Unscheduled Meeting */}
|
||||
<Box width="100%" bg="gray.100" borderRadius="md" p={4}>
|
||||
<HStack gap={4} fontSize="sm" color="gray.500">
|
||||
<Text>
|
||||
{formatDateTime(event.start_time)} -{" "}
|
||||
{formatDateTime(event.end_time)}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{isOwner && event.attendees && (
|
||||
<HStack gap={2} flexWrap="wrap">
|
||||
{event.attendees
|
||||
.slice(0, 3)
|
||||
.map((attendee: any, idx: number) => (
|
||||
<Badge key={idx} colorScheme="purple" fontSize="xs">
|
||||
{attendee.name || attendee.email}
|
||||
</Badge>
|
||||
))}
|
||||
{event.attendees.length > 3 && (
|
||||
<Badge colorScheme="gray" fontSize="xs">
|
||||
+{event.attendees.length - 3} more
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme="orange"
|
||||
size="md"
|
||||
onClick={() => handleJoinUpcoming(event)}
|
||||
>
|
||||
Join Early
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
))}
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{/* Create Unscheduled Meeting - Only for room owners or shared rooms */}
|
||||
{(isOwner || isSharedRoom) && (
|
||||
<Box width="100%" bg="gray.50" borderRadius="md" p={4} mt={6}>
|
||||
<HStack justify="space-between" align="center">
|
||||
<VStack align="start" gap={1}>
|
||||
<Text fontWeight="semibold">Start an Unscheduled Meeting</Text>
|
||||
<Text fontWeight="semibold">Start a Quick Meeting</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
Create a new meeting room that's not on the calendar
|
||||
Jump into a meeting room right away
|
||||
</Text>
|
||||
</VStack>
|
||||
<Button colorScheme="green" onClick={onCreateUnscheduled}>
|
||||
<FaPlus />
|
||||
Create Meeting
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Message for non-owners of private rooms */}
|
||||
{!isOwner && !isSharedRoom && (
|
||||
<Box
|
||||
width="100%"
|
||||
bg="gray.50"
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
borderRadius="md"
|
||||
p={4}
|
||||
mt={6}
|
||||
>
|
||||
<Text fontSize="sm" color="gray.600" textAlign="center">
|
||||
Only the room owner can create unscheduled meetings in this private
|
||||
room.
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Footer with back to reflector link */}
|
||||
<Box mt="auto" pt={8} borderTop="1px solid" borderColor="gray.100">
|
||||
<Text textAlign="center" fontSize="sm" color="gray.500">
|
||||
<Link href="/browse">← Back to Reflector</Link>
|
||||
</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user