mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-21 12:49:06 +00:00
feat: remove wait page and simplify Join button with 5-minute disable logic
- Remove entire wait page directory and associated files - Update handleJoinUpcoming to create unscheduled meeting directly - Simplify Join button to single state: - Always shows "Join" text - Blue when meeting can be joined (ongoing or within 5 minutes) - Gray/disabled when more than 5 minutes away - Remove confusing "Join Now", "Join Early" text variations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -86,9 +86,9 @@ export default function MeetingSelection({
|
||||
}
|
||||
};
|
||||
|
||||
const handleJoinUpcoming = (event: CalendarEventResponse) => {
|
||||
// Navigate to waiting page with event info
|
||||
router.push(`/${roomName}/wait/${event.id}`);
|
||||
const handleJoinUpcoming = async (event: CalendarEventResponse) => {
|
||||
// Create an unscheduled meeting for this calendar event
|
||||
onCreateUnscheduled();
|
||||
};
|
||||
|
||||
const handleEndMeeting = async (meetingId: string) => {
|
||||
@@ -270,6 +270,10 @@ export default function MeetingSelection({
|
||||
const startTime = new Date(event.start_time);
|
||||
const endTime = new Date(event.end_time);
|
||||
const isOngoing = startTime <= now && now <= endTime;
|
||||
const minutesUntilStart = Math.floor(
|
||||
(startTime.getTime() - now.getTime()) / (1000 * 60),
|
||||
);
|
||||
const canJoinEarly = minutesUntilStart <= 5; // Allow joining 5 minutes before
|
||||
|
||||
return (
|
||||
<Box
|
||||
@@ -339,11 +343,12 @@ export default function MeetingSelection({
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme={isOngoing ? "blue" : "orange"}
|
||||
colorScheme={isOngoing || canJoinEarly ? "blue" : "gray"}
|
||||
size="md"
|
||||
onClick={() => handleJoinUpcoming(event)}
|
||||
isDisabled={!isOngoing && !canJoinEarly}
|
||||
>
|
||||
{isOngoing ? "Join Now" : "Join Early"}
|
||||
Join
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
@@ -1,190 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Spinner,
|
||||
Text,
|
||||
VStack,
|
||||
Button,
|
||||
HStack,
|
||||
Badge,
|
||||
} from "@chakra-ui/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRoomGetByName } from "../../../lib/apiHooks";
|
||||
import MinimalHeader from "../../../components/MinimalHeader";
|
||||
|
||||
interface WaitPageClientProps {
|
||||
params: {
|
||||
roomName: string;
|
||||
eventId: string;
|
||||
};
|
||||
}
|
||||
|
||||
const formatDateTime = (date: string | Date) => {
|
||||
const d = new Date(date);
|
||||
return d.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const formatCountdown = (startTime: string | Date) => {
|
||||
const now = new Date();
|
||||
const start = new Date(startTime);
|
||||
const diff = start.getTime() - now.getTime();
|
||||
|
||||
if (diff <= 0) return "Meeting should start now";
|
||||
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) return `Starts in ${days}d ${hours % 24}h ${minutes % 60}m`;
|
||||
if (hours > 0) return `Starts in ${hours}h ${minutes % 60}m`;
|
||||
return `Starts in ${minutes} minutes`;
|
||||
};
|
||||
|
||||
export default function WaitPageClient({ params }: WaitPageClientProps) {
|
||||
const { roomName, eventId } = params;
|
||||
const router = useRouter();
|
||||
|
||||
const [countdown, setCountdown] = useState<string>("");
|
||||
|
||||
// Fetch room data
|
||||
const roomQuery = useRoomGetByName(roomName);
|
||||
const room = roomQuery.data;
|
||||
|
||||
// Mock event data - in a real implementation, you'd fetch the actual event
|
||||
const mockEvent = {
|
||||
id: eventId,
|
||||
title: "Upcoming Meeting",
|
||||
start_time: new Date(Date.now() + 15 * 60 * 1000), // 15 minutes from now
|
||||
end_time: new Date(Date.now() + 75 * 60 * 1000), // 1 hour 15 minutes from now
|
||||
description: "Meeting will start soon",
|
||||
};
|
||||
|
||||
// Update countdown every second
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCountdown(formatCountdown(mockEvent.start_time));
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [mockEvent.start_time]);
|
||||
|
||||
// Redirect to selection if room not found
|
||||
useEffect(() => {
|
||||
if (roomQuery.isError) {
|
||||
router.push(`/${roomName}`);
|
||||
}
|
||||
}, [roomQuery.isError, router, roomName]);
|
||||
|
||||
const handleJoinEarly = () => {
|
||||
// In a real implementation, this would create a meeting and join
|
||||
alert("Join early functionality not yet implemented");
|
||||
};
|
||||
|
||||
const handleBackToSelection = () => {
|
||||
router.push(`/${roomName}`);
|
||||
};
|
||||
|
||||
if (roomQuery.isLoading) {
|
||||
return (
|
||||
<Box display="flex" flexDirection="column" minH="100vh">
|
||||
<MinimalHeader
|
||||
roomName={roomName}
|
||||
displayName={room?.display_name || room?.name}
|
||||
showLeaveButton={false}
|
||||
/>
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
flex="1"
|
||||
p={4}
|
||||
>
|
||||
<VStack gap={4}>
|
||||
<Spinner color="blue.500" size="xl" />
|
||||
<Text fontSize="lg">Loading...</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box display="flex" flexDirection="column" minH="100vh">
|
||||
<MinimalHeader
|
||||
roomName={roomName}
|
||||
displayName={room?.display_name || room?.name}
|
||||
/>
|
||||
|
||||
<Box flex="1" p={4}>
|
||||
<VStack gap={6} align="stretch" maxW="container.md" mx="auto" pt={8}>
|
||||
<Box textAlign="center">
|
||||
<Text fontSize="3xl" fontWeight="bold" mb={2}>
|
||||
{mockEvent.title}
|
||||
</Text>
|
||||
<Badge colorScheme="orange" fontSize="lg" px={4} py={2}>
|
||||
{countdown}
|
||||
</Badge>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
bg="white"
|
||||
borderRadius="md"
|
||||
p={8}
|
||||
textAlign="center"
|
||||
boxShadow="sm"
|
||||
>
|
||||
<VStack gap={6}>
|
||||
<VStack gap={2}>
|
||||
<Text fontSize="lg" fontWeight="semibold">
|
||||
Meeting Details
|
||||
</Text>
|
||||
<Text color="gray.600">
|
||||
{formatDateTime(mockEvent.start_time)} -{" "}
|
||||
{formatDateTime(mockEvent.end_time)}
|
||||
</Text>
|
||||
{mockEvent.description && (
|
||||
<Text fontSize="sm" color="gray.500">
|
||||
{mockEvent.description}
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
<Box h="1px" bg="gray.200" w="100%" />
|
||||
|
||||
<VStack gap={4}>
|
||||
<Text fontSize="md" color="gray.600">
|
||||
The meeting hasn't started yet. You can wait here or come back
|
||||
later.
|
||||
</Text>
|
||||
|
||||
<HStack gap={4}>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={handleJoinEarly}
|
||||
size="lg"
|
||||
>
|
||||
Join Early
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBackToSelection}
|
||||
size="lg"
|
||||
>
|
||||
Back to Meetings
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import {
|
||||
Box,
|
||||
Spinner,
|
||||
Text,
|
||||
VStack,
|
||||
Button,
|
||||
HStack,
|
||||
Badge,
|
||||
} from "@chakra-ui/react";
|
||||
import MinimalHeader from "../../../components/MinimalHeader";
|
||||
import { Metadata } from "next";
|
||||
import WaitPageClient from "./WaitPageClient";
|
||||
|
||||
interface WaitPageProps {
|
||||
params: {
|
||||
roomName: string;
|
||||
eventId: string;
|
||||
};
|
||||
}
|
||||
|
||||
// Generate dynamic metadata for the waiting page
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: WaitPageProps): Promise<Metadata> {
|
||||
const { roomName } = params;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_REFLECTOR_API_URL}/v1/rooms/name/${roomName}`,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const room = await response.json();
|
||||
const displayName = room.display_name || room.name;
|
||||
return {
|
||||
title: `Waiting for Meeting - ${displayName}'s Room`,
|
||||
description: `Waiting for upcoming meeting in ${displayName}'s room on Reflector.`,
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch room for metadata:", error);
|
||||
}
|
||||
|
||||
return {
|
||||
title: `Waiting for Meeting - ${roomName}'s Room`,
|
||||
description: `Waiting for upcoming meeting in ${roomName}'s room on Reflector.`,
|
||||
};
|
||||
}
|
||||
|
||||
export default function WaitPage({ params }: WaitPageProps) {
|
||||
return <WaitPageClient params={params} />;
|
||||
}
|
||||
Reference in New Issue
Block a user