Merge pull request #292 from uwblueprint/announcements

e2e implementation of participant announcements

Author: applepie7864

backend/resolvers/announcementResolver.ts

@@ -1,4 +1,4 @@
-import { PrismaClient, Announcement, Priority } from "@prisma/client";
+import { PrismaClient, Announcement, Priority, UserAnnouncement } from "@prisma/client";
 import { getNow } from "../utils/formatDateTime";
 
 const prisma = new PrismaClient();
@@ -83,21 +83,19 @@ const announcementResolver = {
       {
         participant_id,
       }: { participant_id: number; }
-    ): Promise<Announcement[]> => {
+    ): Promise<UserAnnouncement[]> => {
       try {
-        return await prisma.announcement.findMany({
+        return await prisma.userAnnouncement.findMany({
           orderBy: {
-            creation_date: "desc",
+            announcement: {
+              creation_date: "desc"
+            },
           },
           where: {
-            user_announcements: {
-              some: {
-                participant_id,
-              },
-            },
+            participant_id,
           },
           include: {
-            user_announcements: true,
+            announcement: true,
           },
         });
       } catch (err) {

backend/types/resolvers.ts

@@ -16,7 +16,7 @@ const resolvers = gql`
     getAllAnnouncements: [Announcement]
     getAnnouncementsInDateRange(start: String!, end: String!): [Announcement]
     getAnnouncementsByParticipants(participant_ids: [Int!]!): [Announcement]
-    getAnnouncementsByParticipantId(participant_id: Int!): [Announcement]
+    getAnnouncementsByParticipantId(participant_id: Int!): [UserAnnouncement]
     getAssignedTasks(participant_id: Int!): GetAssignedTaskResponse!
     getTasksByType(type: [TaskType!]!): [Task]
     getCustomBadges: [Badge]

frontend/src/gql/mutations.ts

@@ -308,6 +308,22 @@ export const SET_MARILLAC_BUCKS_GOAL = gql`
   }
 `;
 
+export const UPDATE_PIN_READ_ANNOUNCEMENTS = gql`
+  mutation UpdatePinReadAnnouncement(
+    $announcement_id: Int!
+    $participant_id: Int!
+    $pinned: Boolean
+    $read: Boolean
+  ) {
+    updatePinReadAnnouncement(
+      announcement_id: $announcement_id
+      participant_id: $participant_id
+      pinned: $pinned
+      read: $read
+    )
+  }
+`
+
 export const UPDATE_MARILLAC_BUCKS_GOAL = gql`
   mutation updateMarillacBucksGoal($participant_id: Int!, $new_goal_value: Int!) {
     updateMarillacBucksGoal(participant_id: $participant_id, new_goal_value: $new_goal_value)

frontend/src/gql/queries.ts

@@ -164,11 +164,13 @@ export const GET_ANNOUNCEMENTS_BY_PARTICIPANT_ID = gql`
       participant_id: $participant_id
     ) {
       announcement_id
-      priority
-      creation_date
-      message
-      user_announcements {
-        participant_id
+      participant_id
+      read
+      pinned
+      announcement {
+        priority
+        creation_date
+        message
       }
     }
   }

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>
   );
 }