[#3] first basic modal for event display

src/components/Calendar/Calendar.tsx

@@ -20,6 +20,7 @@ import {
 } from "../../utils/dateUtils";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { push } from "redux-first-history";
+import EventDisplayModal from "../../features/Events/EventDisplay";
 
 export default function CalendarApp() {
   const calendarRef = useRef<CalendarApi | null>(null);
@@ -93,6 +94,11 @@ export default function CalendarApp() {
   }, [rangeKey, selectedCalendars]);
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [anchorElEventDisplay, setAnchorElEventDisplay] =
+    useState<HTMLElement | null>(null);
+  const [openEventDisplay, setOpenEventDisplay] = useState(false);
+  const [eventDisplayedId, setEventDisplayedId] = useState("");
+  const [eventDisplayedCalId, setEventDisplayedCalId] = useState("");
   const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
   const [selectedRange, setSelectedRange] = useState<DateSelectArg | null>(
     null
@@ -108,6 +114,10 @@ export default function CalendarApp() {
     setAnchorEl(null);
     setSelectedRange(null);
   };
+  const handleCloseEventDisplay = () => {
+    setAnchorElEventDisplay(null);
+    setOpenEventDisplay(false);
+  };
 
   const handleMonthUp = () => {
     setSelectedMiniDate(
@@ -273,6 +283,10 @@ export default function CalendarApp() {
               window.open(info.event.url);
             } else {
               console.log(info.event);
+              setOpenEventDisplay(true);
+              setAnchorElEventDisplay(info.el);
+              setEventDisplayedId(info.event.extendedProps.uid);
+              setEventDisplayedCalId(info.event.extendedProps.calId);
             }
           }}
           headerToolbar={{
@@ -294,6 +308,13 @@ export default function CalendarApp() {
           open={Boolean(anchorElCal)}
           onClose={() => setAnchorElCal(null)}
         />
+        <EventDisplayModal
+          open={openEventDisplay}
+          onClose={handleCloseEventDisplay}
+          anchorEl={anchorElEventDisplay}
+          eventId={eventDisplayedId}
+          calId={eventDisplayedCalId}
+        />
       </div>
     </main>
   );

src/features/Calendars/CalendarSlice.ts

@@ -136,6 +136,8 @@ const CalendarSlice = createSlice({
           Object.keys(state.list[action.payload.calId].events).forEach((id) => {
             state.list[action.payload.calId].events[id].color =
               state.list[action.payload.calId].color;
+            state.list[action.payload.calId].events[id].calId =
+              action.payload.calId;
           });
         }
       )

src/features/Events/EventDisplay.tsx

@@ -0,0 +1,221 @@
+import React, { useEffect, useState } from "react";
+import { addEvent } from "../Calendars/CalendarSlice";
+import { CalendarEvent } from "./EventsTypes";
+import { DateSelectArg } from "@fullcalendar/core";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  Popover,
+  TextField,
+  Button,
+  Box,
+  Typography,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+  Avatar,
+  ButtonGroup,
+  Card,
+  CardContent,
+  Divider,
+  IconButton,
+} from "@mui/material";
+import EventModal from "./EventModal";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import CloseIcon from "@mui/icons-material/Close";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
+import VideocamIcon from "@mui/icons-material/Videocam";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import CircleIcon from "@mui/icons-material/Circle";
+
+function EventDisplayModal({
+  eventId,
+  calId,
+  anchorEl,
+  open,
+  onClose,
+}: {
+  eventId: string;
+  calId: string;
+  anchorEl: HTMLElement | null;
+  open: boolean;
+  onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
+}) {
+  if (calId && eventId) {
+    const calendar = useAppSelector((state) => state.calendars.list[calId]);
+    const event = useAppSelector(
+      (state) => state.calendars.list[calId].events[eventId]
+    );
+    const user = useAppSelector((state) => state.user);
+    const [showAllAttendees, setShowAllAttendees] = useState(false);
+    const attendeeDisplayLimit = 3;
+
+    const visibleAttendees = showAllAttendees
+      ? event.attendee
+      : event.attendee.slice(0, attendeeDisplayLimit);
+    console.log(event);
+    return (
+      <Popover open={open} anchorEl={anchorEl} onClose={onClose}>
+        <Card sx={{ width: 300, p: 2, position: "relative" }}>
+          {/* Top-right buttons */}
+          <Box
+            sx={{
+              position: "absolute",
+              top: 8,
+              right: 8,
+              display: "flex",
+              gap: 1,
+            }}
+          >
+            <IconButton size="small">
+              <EditIcon fontSize="small" />
+            </IconButton>
+            <IconButton size="small">
+              <DeleteIcon fontSize="small" />
+            </IconButton>
+            <IconButton
+              size="small"
+              onClick={() => onClose({}, "backdropClick")}
+            >
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </Box>
+
+          <CardContent sx={{ pt: 1.5 }}>
+            {/* Title */}
+            {event.title && (
+              <Typography variant="h6" fontWeight="bold" gutterBottom>
+                {event.title}
+              </Typography>
+            )}
+
+            {/* Time info */}
+            <Typography variant="body2" color="textSecondary" gutterBottom>
+              {formatDate(event.start)}
+              {event.end &&
+                ` – ${new Date(event.end).toLocaleTimeString(undefined, {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}`}
+            </Typography>
+
+            {event.location && (
+              <Box
+                sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}
+              >
+                <LocationOnIcon sx={{ fontSize: 18 }} />
+                <Typography variant="body2">{event.location}</Typography>
+              </Box>
+            )}
+
+            {/* Description */}
+            {event.description && (
+              <Typography variant="body2" sx={{ mb: 1 }}>
+                {event.description}
+              </Typography>
+            )}
+
+            {/* Video conference */}
+            {event.x_openpass_videoconference && (
+              <Box
+                sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}
+              >
+                <VideocamIcon sx={{ fontSize: 18 }} />
+                <Typography variant="body2">
+                  Video conference available
+                </Typography>
+              </Box>
+            )}
+
+            {/* Attendees */}
+            {/* Attendees with toggle */}
+            {event.attendee?.length > 0 && (
+              <Box sx={{ mb: 1 }}>
+                <Typography variant="subtitle2">Attendees:</Typography>
+                {visibleAttendees.map((a, idx) => (
+                  <Typography key={idx} variant="body2">
+                    {a.cn}
+                  </Typography>
+                ))}
+
+                {event.attendee.length > attendeeDisplayLimit && (
+                  <Typography
+                    variant="body2"
+                    color="primary"
+                    sx={{ cursor: "pointer", mt: 0.5 }}
+                    onClick={() => setShowAllAttendees(!showAllAttendees)}
+                  >
+                    {showAllAttendees
+                      ? "Show less"
+                      : `Show more (${
+                          event.attendee.length - attendeeDisplayLimit
+                        } more)`}
+                  </Typography>
+                )}
+              </Box>
+            )}
+
+            {/* Error */}
+            {event.error && (
+              <Box
+                sx={{ display: "flex", alignItems: "center", gap: 1, mt: 1 }}
+              >
+                <ErrorOutlineIcon color="error" sx={{ fontSize: 18 }} />
+                <Typography variant="body2" color="error">
+                  {event.error}
+                </Typography>
+              </Box>
+            )}
+
+            {/* Colored dot and calendar icon row */}
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 2 }}>
+              <CalendarTodayIcon sx={{ fontSize: 16 }} />
+              <CircleIcon
+                sx={{
+                  color: calendar.color ?? "#3788D8",
+                  width: 12,
+                  height: 12,
+                }}
+              />
+              <Typography variant="body2">{calendar.name}</Typography>
+            </Box>
+
+            <Divider sx={{ mb: 1 }} />
+
+            {/* Attendance options */}
+            {event.attendee.find(
+              (person) => person.cal_address === `mailto:${user.userData.email}`
+            ) && (
+              <Box>
+                <Typography variant="body2" sx={{ mb: 1 }}>
+                  Will you attend?
+                </Typography>
+                <ButtonGroup size="small" fullWidth>
+                  <Button>Accept</Button>
+                  <Button>Maybe</Button>
+                  <Button>Decline</Button>
+                </ButtonGroup>
+              </Box>
+            )}
+          </CardContent>
+        </Card>
+      </Popover>
+    );
+  } else {
+    return <></>;
+  }
+}
+
+const formatDate = (date: Date) =>
+  new Date(date).toLocaleString(undefined, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+export default EventDisplayModal;

src/features/Events/EventModal.tsx

@@ -70,6 +70,7 @@ function EventPopover({
 
   const handleSave = async () => {
     const newEvent: CalendarEvent = {
+      calId: calendarid,
       title,
       start: new Date(start),
       allday,

src/features/Events/EventsTypes.ts

@@ -1,6 +1,7 @@
 import { userAttendee, userOrganiser } from "../User/userDataTypes";
 
 export interface CalendarEvent {
+  calId: string;
   uid: string;
   transp?: string;
   start: Date; // ISO date

src/features/User/userDataTypes.ts

@@ -1,5 +1,8 @@
 export interface userData {
   email: string;
+  family_name: string;
+  given_name: string;
+  name: string;
   sid: string;
   sub: string;
   openpaasId?: string;