expanded view frontend

applepie7864 · applepie7864 · commit 35aa7ef7b767 · 2025-10-29T14:06:39.000-04:00
diff --git a/frontend/src/participant/common/GreenButton.tsx b/frontend/src/participant/common/GreenButton.tsx
@@ -1,34 +1,41 @@
 import React from "react";
-import { Button, Text } from "@chakra-ui/react";
+import { Button, Flex, Text } from "@chakra-ui/react";
 import { ButtonProps } from "../../types/component";
 
-export default function GreenButton({ text, action, is_active }: ButtonProps) {
+type GreenButtonProps = ButtonProps & {
+  icon?: JSX.Element;
+};
+
+export default function GreenButton({ text, action, is_active, icon }: GreenButtonProps) {
   return (
     <Button
-      onClick={action}
-      isActive={is_active}
-      cursor="pointer"
-      borderRadius="4px"
-      border="1px"
-      borderColor="#0C727E"
-      width="fit-content"
-      height="fit-content"
-      paddingX="10px"
-      paddingY="8px"
-      bg="#FFFFFF"
-      color="#0C727E"
-      _hover={{
-        color: "#FFFFFF",
-        bg: "#0C727E",
-      }}
-      _active={{
-        color: "#FFFFFF",
-        bg: "#0C727E",
-      }}
+        onClick={action}
+        isActive={is_active}
+        cursor="pointer"
+        borderRadius="4px"
+        border="1px"
+        borderColor="#0C727E"
+        width="fit-content"
+        height="fit-content"
+        paddingX="10px"
+        paddingY="8px"
+        bg="#FFFFFF"
+        color="#0C727E"
+        _hover={{
+            color: "#FFFFFF",
+            bg: "#0C727E",
+        }}
+        _active={{
+            color: "#FFFFFF",
+            bg: "#0C727E",
+        }}
     >
-      <Text textStyle="mobile.c1" color="inherit">
-        {text}
-      </Text>
+        <Flex alignItems="center" gap="5px">
+            {icon}
+            <Text textStyle="mobile.c1" color="inherit">
+                {text}
+            </Text>
+        </Flex>
     </Button>
   );
 }
diff --git a/frontend/src/participant/pages/announcements/Main.tsx b/frontend/src/participant/pages/announcements/Main.tsx
@@ -9,6 +9,7 @@ import {
 import { ParticipantContext } from "../../common/ParticipantContext";
 import { Priority } from "../../../types/AnnouncementTypes";
 import GreenButton from "../../common/GreenButton";
+import AnnouncementsExpandedView from "./components/AnnouncementsExpandedView";
 
 // Keep labels stable
 const FILTER_LABELS = ["ALL", "UNREAD", "PINNED", "IMPORTANT"] as const;
@@ -17,6 +18,17 @@ export default function ParticipantsAnnouncementsPage() {
   const participant = useContext(ParticipantContext);
   const participantId = participant?.id;
 
+  const [expandedView, setExpandedView] = useState(false);
+  const [selected, setSelected] = useState({
+    uaid: -1,
+    allRooms: false,
+    message: "",
+    importance: -1,
+    read: false, 
+    pinned: false, 
+    date: ""
+  })
+
   const [filter, setFilter] = useState(0);
   const isAll = filter === 0;
 
@@ -56,6 +68,12 @@ export default function ParticipantsAnnouncementsPage() {
   if (loading) return <Text>Loading announcements…</Text>;
   if (error) return <Text color="red.500">Error loading announcements.</Text>;
 
+  if (expandedView && selected) {
+    return (
+      <AnnouncementsExpandedView announcement={selected} />
+    )
+  }
+
   return (
     <>
       <Flex w="100%" alignItems="center" justifyContent="center" gap="8px">
@@ -72,17 +90,38 @@ export default function ParticipantsAnnouncementsPage() {
           <Text textStyle="mobile.s1" color="text.light.secondary">
             Most Recent
           </Text>
-          {data.map((a: any) => {
+          {data.map((a: any, i: number) => {
+            const uaid = a.announcement_id;
+            const allRooms = false;
+            const message = isAll ? a.message : a.announcement.message
+            const importance = Object.values(Priority).indexOf(isAll ? a.priority : a.announcement.priority)
+            const read = isAll ? a.user_announcements.read : a.read
+            const pinned = isAll ? a.user_announcements.pinned : a.pinned
+            const date = isAll ? a.creation_date : a.announcement.creation_date
+
             return (
-              <ParticipantAnnouncementCard
-                key={a.announcement_id}
-                allRooms={false}
-                message={isAll ? a.message : a.announcement.message}
-                importance={Object.values(Priority).indexOf(isAll ? a.priority : a.announcement.priority)}
-                hasRead={isAll ? a.user_announcements.read : a.read}
-                isPinned={isAll ? a.user_announcements.pinned : a.pinned}
-                time={isAll ? a.creation_date : a.announcement.creation_date}
-              />
+              <Flex key={i} cursor="pointer" onClick={() => {
+                setSelected({
+                  uaid,
+                  allRooms,
+                  message, 
+                  importance, 
+                  read, 
+                  pinned, 
+                  date
+                })
+                setExpandedView(true)
+              }}>
+                <ParticipantAnnouncementCard
+                  userAnnouncementId={uaid}
+                  allRooms={allRooms}
+                  message={message}
+                  importance={importance}
+                  hasRead={read}
+                  isPinned={pinned}
+                  time={date}
+                />
+              </Flex>
             );
           })}
         </>
diff --git a/frontend/src/participant/pages/announcements/components/AnnouncementsExpandedView.tsx b/frontend/src/participant/pages/announcements/components/AnnouncementsExpandedView.tsx
@@ -0,0 +1,64 @@
+import { Divider, Flex, Text } from "@chakra-ui/react";
+import React from "react";
+import { displayDate2 } from "../../../../utils/formatDateTime";
+import Icon from "../../../common/Icon";
+import important from "../../../icons/announcements/important.svg"
+import orangepin from "../../../icons/announcements/orangepin.svg"
+import greenpin from "../../../icons/announcements/greenpin.svg"
+import unread from "../../../icons/announcements/unread.svg"
+import GreenButton from "../../../common/GreenButton";
+
+type AnnouncementInfo = {
+    uaid: number;
+    allRooms: boolean;
+    message: string;
+    importance: number;
+    read: boolean;
+    pinned: boolean;
+    date: string;
+}
+
+type AnnouncementsExpandedViewProps = {
+    announcement: AnnouncementInfo;
+}
+
+export default function AnnouncementsExpandedView({ announcement }: AnnouncementsExpandedViewProps) {
+    return (
+        <>
+            <Flex alignItems="center" justify="space-between">
+                <Text textStyle="mobile.h2">{announcement.allRooms ? "Admin To All Rooms" : "Admin To Your Room"}</Text>
+                <Text textStyle="mobile.b0" color="text.light.secondary">{displayDate2(new Date(announcement.date))}</Text>
+            </Flex>
+
+            <Flex gap="12px">
+                <Flex gap="8px">
+                    <Icon icon={important} width="3px" height="3px" />
+                    <Text textStyle="mobile.s1" color="#D34C5C">Priority</Text>
+                </Flex>
+                <Flex gap="8px">
+                    <Icon icon={orangepin} width="8px" height="8px" />
+                    <Text textStyle="mobile.s1" color="#E67D4F">Pinned</Text>
+                </Flex>
+            </Flex>
+
+            <Divider borderColor="neutral.300" />
+
+            <Text>{announcement.message}</Text>
+
+            <Flex marginTop="8px" gap="12px">
+                <GreenButton
+                    text="Mark as Unread"
+                    is_active={false}
+                    action={() => {}}
+                    icon={<Icon icon={unread} width="14px" height="14px" />}
+                />
+                <GreenButton 
+                    text="Pin"
+                    is_active={false}
+                    action={() => {}}
+                    icon={<Icon icon={greenpin} width="8px" height="8px" />}
+                />
+            </Flex>
+        </>
+    )
+};
diff --git a/frontend/src/participant/pages/announcements/components/ParticipantAnnouncementCard.tsx b/frontend/src/participant/pages/announcements/components/ParticipantAnnouncementCard.tsx
@@ -4,7 +4,7 @@ import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
 import PriorityHighIcon from "@mui/icons-material/PriorityHigh";
 import PushPinIcon from "@mui/icons-material/PushPin";
 import CircleIcon from "@mui/icons-material/Circle";
-import React from "react";
+import React, { useState } from "react";
 import notification from "../../../icons/announcements/notification.svg"
 import group from "../../../icons/announcements/group.svg"
 import profile from "../../../icons/announcements/profile.svg"
@@ -20,9 +20,11 @@ type ParticipantAnnouncementCardProps = {
   hasRead: boolean;
   isPinned: boolean;
   time: string;
+  userAnnouncementId: number;
 };
 
 export default function ParticipantAnnouncementCard({
+  userAnnouncementId,
   allRooms,
   message,
   importance,
@@ -39,7 +41,6 @@ export default function ParticipantAnnouncementCard({
       paddingLeft="25px"
       flexDir="column"
       position="relative"
-      cursor="pointer"
     >
       {!hasRead && (
         <Flex position="absolute" top="42px" left="0px">
diff --git a/frontend/src/utils/formatDateTime.ts b/frontend/src/utils/formatDateTime.ts
@@ -237,7 +237,6 @@ export const displayDate2 = (date: Date) => {
   const month = get("month");
   const day = get("day");
   const dayPeriod = get("dayPeriod").toUpperCase().replaceAll(".", "");
-  console.log(dayPeriod)
 
   return `${hour}:${minute} ${dayPeriod}, ${month} ${day}`;
 };
