mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-21 12:49:06 +00:00
feat: update ics, first version working
This commit is contained in:
365
www/app/(app)/rooms/[roomName]/calendar/page.tsx
Normal file
365
www/app/(app)/rooms/[roomName]/calendar/page.tsx
Normal file
@@ -0,0 +1,365 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
Heading,
|
||||
Text,
|
||||
Card,
|
||||
HStack,
|
||||
Badge,
|
||||
Spinner,
|
||||
Flex,
|
||||
Link,
|
||||
Button,
|
||||
Alert,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Wrap,
|
||||
} from "@chakra-ui/react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { FaSync, FaClock, FaUsers, FaEnvelope } from "react-icons/fa";
|
||||
import { LuArrowLeft } from "react-icons/lu";
|
||||
import useApi from "../../../../lib/useApi";
|
||||
import { CalendarEventResponse } from "../../../../api";
|
||||
|
||||
export default function RoomCalendarPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const roomName = params.roomName as string;
|
||||
const api = useApi();
|
||||
|
||||
const [events, setEvents] = useState<CalendarEventResponse[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
|
||||
const fetchEvents = async () => {
|
||||
if (!api) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await api.v1RoomsListMeetings({ roomName });
|
||||
setEvents(response);
|
||||
} catch (err: any) {
|
||||
setError(err.body?.detail || "Failed to load calendar events");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSync = async () => {
|
||||
if (!api) return;
|
||||
|
||||
try {
|
||||
setSyncing(true);
|
||||
await api.v1RoomsSyncIcs({ roomName });
|
||||
await fetchEvents(); // Refresh events after sync
|
||||
} catch (err: any) {
|
||||
setError(err.body?.detail || "Failed to sync calendar");
|
||||
} finally {
|
||||
setSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchEvents();
|
||||
}, [api, roomName]);
|
||||
|
||||
const formatEventTime = (start: string, end: string) => {
|
||||
const startDate = new Date(start);
|
||||
const endDate = new Date(end);
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
};
|
||||
|
||||
const dateOptions: Intl.DateTimeFormatOptions = {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
};
|
||||
|
||||
const isSameDay = startDate.toDateString() === endDate.toDateString();
|
||||
|
||||
if (isSameDay) {
|
||||
return `${startDate.toLocaleDateString(undefined, dateOptions)} • ${startDate.toLocaleTimeString(undefined, options)} - ${endDate.toLocaleTimeString(undefined, options)}`;
|
||||
} else {
|
||||
return `${startDate.toLocaleDateString(undefined, dateOptions)} ${startDate.toLocaleTimeString(undefined, options)} - ${endDate.toLocaleDateString(undefined, dateOptions)} ${endDate.toLocaleTimeString(undefined, options)}`;
|
||||
}
|
||||
};
|
||||
|
||||
const isEventActive = (start: string, end: string) => {
|
||||
const now = new Date();
|
||||
const startDate = new Date(start);
|
||||
const endDate = new Date(end);
|
||||
return now >= startDate && now <= endDate;
|
||||
};
|
||||
|
||||
const isEventUpcoming = (start: string) => {
|
||||
const now = new Date();
|
||||
const startDate = new Date(start);
|
||||
const hourFromNow = new Date(now.getTime() + 60 * 60 * 1000);
|
||||
return startDate > now && startDate <= hourFromNow;
|
||||
};
|
||||
|
||||
const getAttendeeDisplay = (attendee: any) => {
|
||||
// Use name if available, otherwise use email
|
||||
const displayName = attendee.name || attendee.email || "Unknown";
|
||||
// Extract just the name part if it's in "Name <email>" format
|
||||
const cleanName = displayName.replace(/<.*>/, "").trim();
|
||||
return cleanName;
|
||||
};
|
||||
|
||||
const getAttendeeEmail = (attendee: any) => {
|
||||
return attendee.email || "";
|
||||
};
|
||||
|
||||
const renderAttendees = (attendees: any[]) => {
|
||||
if (!attendees || attendees.length === 0) return null;
|
||||
|
||||
return (
|
||||
<HStack fontSize="sm" color="gray.600" flexWrap="wrap">
|
||||
<FaUsers />
|
||||
<Text>Attendees:</Text>
|
||||
<Wrap spacing={2}>
|
||||
{attendees.map((attendee, index) => {
|
||||
const email = getAttendeeEmail(attendee);
|
||||
const display = getAttendeeDisplay(attendee);
|
||||
|
||||
if (email && email !== display) {
|
||||
return (
|
||||
<Tooltip
|
||||
key={index}
|
||||
content={
|
||||
<HStack>
|
||||
<FaEnvelope size="12" />
|
||||
<Text>{email}</Text>
|
||||
</HStack>
|
||||
}
|
||||
>
|
||||
<Badge variant="subtle" colorPalette="blue" cursor="help">
|
||||
{display}
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Badge key={index} variant="subtle" colorPalette="blue">
|
||||
{display}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</Wrap>
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
const sortedEvents = [...events].sort(
|
||||
(a, b) =>
|
||||
new Date(a.start_time).getTime() - new Date(b.start_time).getTime(),
|
||||
);
|
||||
|
||||
// Separate events by status
|
||||
const now = new Date();
|
||||
const activeEvents = sortedEvents.filter((e) =>
|
||||
isEventActive(e.start_time, e.end_time),
|
||||
);
|
||||
const upcomingEvents = sortedEvents.filter(
|
||||
(e) => new Date(e.start_time) > now,
|
||||
);
|
||||
const pastEvents = sortedEvents
|
||||
.filter((e) => new Date(e.end_time) < now)
|
||||
.reverse();
|
||||
|
||||
return (
|
||||
<Box w={{ base: "full", md: "container.xl" }} mx="auto" pt={2}>
|
||||
<VStack align="stretch" spacing={6}>
|
||||
<Flex justify="space-between" align="center">
|
||||
<HStack spacing={3}>
|
||||
<IconButton
|
||||
aria-label="Back to rooms"
|
||||
title="Back to rooms"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => router.push("/rooms")}
|
||||
>
|
||||
<LuArrowLeft />
|
||||
</IconButton>
|
||||
<Heading size="lg">Calendar for {roomName}</Heading>
|
||||
</HStack>
|
||||
<Button
|
||||
colorPalette="blue"
|
||||
onClick={handleSync}
|
||||
leftIcon={syncing ? <Spinner size="sm" /> : <FaSync />}
|
||||
disabled={syncing}
|
||||
>
|
||||
Force Sync
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{error && (
|
||||
<Alert.Root status="error">
|
||||
<Alert.Indicator />
|
||||
<Alert.Title>{error}</Alert.Title>
|
||||
</Alert.Root>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<Flex justify="center" py={8}>
|
||||
<Spinner size="xl" />
|
||||
</Flex>
|
||||
) : events.length === 0 ? (
|
||||
<Card.Root>
|
||||
<Card.Body>
|
||||
<Text textAlign="center" color="gray.500">
|
||||
No calendar events found. Make sure your calendar is configured
|
||||
and synced.
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
) : (
|
||||
<VStack align="stretch" spacing={6}>
|
||||
{/* Active Events */}
|
||||
{activeEvents.length > 0 && (
|
||||
<Box>
|
||||
<Heading size="md" mb={3} color="green.600">
|
||||
Active Now
|
||||
</Heading>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
{activeEvents.map((event) => (
|
||||
<Card.Root
|
||||
key={event.id}
|
||||
borderColor="green.200"
|
||||
borderWidth={2}
|
||||
>
|
||||
<Card.Body>
|
||||
<Flex justify="space-between" align="start">
|
||||
<VStack align="start" spacing={2} flex={1}>
|
||||
<HStack>
|
||||
<Heading size="sm">
|
||||
{event.title || "Untitled Event"}
|
||||
</Heading>
|
||||
<Badge colorPalette="green">Active</Badge>
|
||||
</HStack>
|
||||
<HStack fontSize="sm" color="gray.600">
|
||||
<FaClock />
|
||||
<Text>
|
||||
{formatEventTime(
|
||||
event.start_time,
|
||||
event.end_time,
|
||||
)}
|
||||
</Text>
|
||||
</HStack>
|
||||
{event.description && (
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.700"
|
||||
noOfLines={2}
|
||||
>
|
||||
{event.description}
|
||||
</Text>
|
||||
)}
|
||||
{renderAttendees(event.attendees)}
|
||||
</VStack>
|
||||
<Link href={`/${roomName}`}>
|
||||
<Button size="sm" colorPalette="green">
|
||||
Join Room
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Upcoming Events */}
|
||||
{upcomingEvents.length > 0 && (
|
||||
<Box>
|
||||
<Heading size="md" mb={3}>
|
||||
Upcoming Events
|
||||
</Heading>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
{upcomingEvents.map((event) => (
|
||||
<Card.Root key={event.id}>
|
||||
<Card.Body>
|
||||
<VStack align="start" spacing={2}>
|
||||
<HStack>
|
||||
<Heading size="sm">
|
||||
{event.title || "Untitled Event"}
|
||||
</Heading>
|
||||
{isEventUpcoming(event.start_time) && (
|
||||
<Badge colorPalette="orange">Starting Soon</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
<HStack fontSize="sm" color="gray.600">
|
||||
<FaClock />
|
||||
<Text>
|
||||
{formatEventTime(
|
||||
event.start_time,
|
||||
event.end_time,
|
||||
)}
|
||||
</Text>
|
||||
</HStack>
|
||||
{event.description && (
|
||||
<Text fontSize="sm" color="gray.700" noOfLines={2}>
|
||||
{event.description}
|
||||
</Text>
|
||||
)}
|
||||
{renderAttendees(event.attendees)}
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Past Events */}
|
||||
{pastEvents.length > 0 && (
|
||||
<Box>
|
||||
<Heading size="md" mb={3} color="gray.500">
|
||||
Past Events
|
||||
</Heading>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
{pastEvents.slice(0, 5).map((event) => (
|
||||
<Card.Root key={event.id} opacity={0.7}>
|
||||
<Card.Body>
|
||||
<VStack align="start" spacing={2}>
|
||||
<Heading size="sm">
|
||||
{event.title || "Untitled Event"}
|
||||
</Heading>
|
||||
<HStack fontSize="sm" color="gray.600">
|
||||
<FaClock />
|
||||
<Text>
|
||||
{formatEventTime(
|
||||
event.start_time,
|
||||
event.end_time,
|
||||
)}
|
||||
</Text>
|
||||
</HStack>
|
||||
{renderAttendees(event.attendees)}
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
))}
|
||||
{pastEvents.length > 5 && (
|
||||
<Text fontSize="sm" color="gray.500" textAlign="center">
|
||||
And {pastEvents.length - 5} more past events...
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user