From b9d73266c06e8a0348fa8dbf6ee0686f7b6f8f2f Mon Sep 17 00:00:00 2001
From: Namit Bhutani <namit.bhut@gmail.com>
Date: Mon, 22 Jul 2024 22:15:00 +0530
Subject: [PATCH 1/6] feat: popup toast for unread notifications

---
 frontend/src/About.tsx                    |  2 +-
 frontend/src/components/announcements.tsx | 71 ++++++++++++++++++++---
 2 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx
index e91ffd72..6d9ebb75 100644
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -58,7 +58,7 @@ function About() {
           </a>
           . We thank Arunachala AM, Jason Goveas, Anurav Garg, Dharanikanth
           Reddy, Karthik Prakash, Shreyash Dash, Kovid Lakhera, Palaniappan R,
-          Meghraj Goswami, Soumitra Shewale, Kishan Abijay, Namit Bhutani, 
+          Meghraj Goswami, Soumitra Shewale, Kishan Abijay, Namit Bhutani,
           Chaitanya Keyal and Samir Khairati for this rewrite of ChronoFactorem.
         </p>
       </div>
diff --git a/frontend/src/components/announcements.tsx b/frontend/src/components/announcements.tsx
index f2e26a8c..617adbb3 100644
--- a/frontend/src/components/announcements.tsx
+++ b/frontend/src/components/announcements.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import {
   Dialog,
   DialogContent,
@@ -5,9 +6,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { useToast } from "@/components/ui/use-toast";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { Megaphone } from "lucide-react";
 import type { z } from "zod";
@@ -29,6 +30,37 @@ function Announcements() {
     queryFn: fetchAnnouncements,
   });
 
+  const { toast } = useToast();
+
+  const [readAnnouncements, setReadAnnouncements] = useState<string[]>(() => {
+    const storedReadAnnouncements = localStorage.getItem("readAnnouncements");
+    return storedReadAnnouncements ? JSON.parse(storedReadAnnouncements) : [];
+  });
+
+  useEffect(() => {
+    localStorage.setItem(
+      "readAnnouncements",
+      JSON.stringify(readAnnouncements),
+    );
+  }, [readAnnouncements]);
+
+  useEffect(() => {
+    const unreadAnnouncements = announcements?.filter(
+      (announcement) => !readAnnouncements.includes(announcement.id),
+    );
+
+    if (unreadAnnouncements && unreadAnnouncements.length > 0) {
+      toast({
+        title: "New Announcements",
+        description: `You have ${unreadAnnouncements.length} unread announcement(s).`,
+      });
+    }
+  }, [announcements, readAnnouncements, toast]);
+
+  const markAsRead = (id: string) => {
+    setReadAnnouncements((prev) => [...prev, id]);
+  };
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -44,13 +76,29 @@ function Announcements() {
           <div className="flex flex-col-reverse mx-3 mt-1 gap-3 divide-y divide-y-reverse">
             {Array.isArray(announcements) && announcements?.length ? (
               announcements
-                ?.sort(
-                  (a, b) =>
-                    new Date(a.createdAt as string).getTime() -
-                    new Date(b.createdAt as string).getTime(),
-                )
+                ?.sort((a, b) => {
+                  const isUnreadA = !readAnnouncements.includes(a.id);
+                  const isUnreadB = !readAnnouncements.includes(b.id);
+
+                  if (isUnreadA !== isUnreadB) {
+                    return isUnreadA ? -1 : 1;
+                  }
+
+                  return (
+                    new Date(b.createdAt as string).getTime() -
+                    new Date(a.createdAt as string).getTime()
+                  );
+                })
+                .reverse()
                 .map((announcement) => (
-                  <div className="flex gap-1 flex-col">
+                  <div
+                    key={announcement.id}
+                    className={`flex gap-1 flex-col ${
+                      readAnnouncements.includes(announcement.id)
+                        ? "opacity-50"
+                        : ""
+                    }`}
+                  >
                     <h1 className="font-bold text-base">
                       {announcement.title}
                     </h1>
@@ -60,6 +108,15 @@ function Announcements() {
                       ).toLocaleString()}
                     </p>
                     <p className="opacity-90 mb-3">{announcement.message}</p>
+                    {!readAnnouncements.includes(announcement.id) && (
+                      <Button
+                        onClick={() => markAsRead(announcement.id)}
+                        size="sm"
+                        variant="outline"
+                      >
+                        Mark as Read
+                      </Button>
+                    )}
                   </div>
                 ))
             ) : (

From 78b1166a2ca81459ae10a3155a9a35256defc7b0 Mon Sep 17 00:00:00 2001
From: kishan1735 <gswwarriorsnba@gmail.com>
Date: Mon, 22 Jul 2024 23:45:16 +0530
Subject: [PATCH 2/6] fix: add margin to read button

---
 frontend/src/components/announcements.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/announcements.tsx b/frontend/src/components/announcements.tsx
index 617adbb3..de2b435a 100644
--- a/frontend/src/components/announcements.tsx
+++ b/frontend/src/components/announcements.tsx
@@ -111,6 +111,7 @@ function Announcements() {
                     {!readAnnouncements.includes(announcement.id) && (
                       <Button
                         onClick={() => markAsRead(announcement.id)}
+                        className="mb-3"
                         size="sm"
                         variant="outline"
                       >

From 9170565efe42de8357c5575917c1745a39eb58ae Mon Sep 17 00:00:00 2001
From: Namit Bhutani <namit.bhut@gmail.com>
Date: Tue, 23 Jul 2024 00:56:46 +0530
Subject: [PATCH 3/6] fix: added id to announcement type

---
 lib/src/zodEntityTypes.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/src/zodEntityTypes.ts b/lib/src/zodEntityTypes.ts
index 1d0d1d35..6a5cb6ad 100644
--- a/lib/src/zodEntityTypes.ts
+++ b/lib/src/zodEntityTypes.ts
@@ -181,6 +181,7 @@ export const namedCourseWithSectionsType = (name?: string) =>
 export const namedAnnouncementType = (name?: string) =>
   z
     .object({
+      id: namedUUIDType(addNameToString("announcement id", name)),
       title: namedNonEmptyStringType(addNameToString("announcement title", name)),
       message: namedNonEmptyStringType(addNameToString("announcement message", name)),
       createdAt: namedISOTimestampType(addNameToString("announcement createdAt", name)).optional(),

From 973a0c4644e1cff3b852409d986f30a4cbc2e1a8 Mon Sep 17 00:00:00 2001
From: kishan1735 <gswwarriorsnba@gmail.com>
Date: Tue, 23 Jul 2024 09:05:37 +0530
Subject: [PATCH 4/6] feat: create announcementWithID type

---
 frontend/src/components/announcements.tsx | 10 +++----
 lib/src/zodEntityTypes.ts                 | 35 +++++++++++++++++++----
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/announcements.tsx b/frontend/src/components/announcements.tsx
index de2b435a..7ddc3098 100644
--- a/frontend/src/components/announcements.tsx
+++ b/frontend/src/components/announcements.tsx
@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import {
   Dialog,
   DialogContent,
@@ -7,18 +6,19 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useToast } from "@/components/ui/use-toast";
+import { DialogTrigger } from "@radix-ui/react-dialog";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { DialogTrigger } from "@radix-ui/react-dialog";
 import { Megaphone } from "lucide-react";
+import { useEffect, useState } from "react";
 import type { z } from "zod";
-import { announcementType } from "../../../lib/src";
+import { announcementWithIDType } from "../../../lib/src";
 import { Button } from "./ui/button";
 
 const fetchAnnouncements = async (): Promise<
-  z.infer<typeof announcementType>[]
+  z.infer<typeof announcementWithIDType>[]
 > => {
-  const response = await axios.get<z.infer<typeof announcementType>[]>(
+  const response = await axios.get<z.infer<typeof announcementWithIDType>[]>(
     "/api/user/announcements",
   );
   return response.data;
diff --git a/lib/src/zodEntityTypes.ts b/lib/src/zodEntityTypes.ts
index 6a5cb6ad..40ce79af 100644
--- a/lib/src/zodEntityTypes.ts
+++ b/lib/src/zodEntityTypes.ts
@@ -179,17 +179,42 @@ export const namedCourseWithSectionsType = (name?: string) =>
     .merge(namedCourseType(name));
 
 export const namedAnnouncementType = (name?: string) =>
+  z
+    .object({
+      title: namedNonEmptyStringType(
+        addNameToString("announcement title", name),
+      ),
+      message: namedNonEmptyStringType(
+        addNameToString("announcement message", name),
+      ),
+      createdAt: namedISOTimestampType(
+        addNameToString("announcement createdAt", name),
+      ).optional(),
+    })
+    .strict({
+      message: addNameToString("announcement has extra fields", name),
+    });
+
+export const namedAnnouncementWithIDType = (name?: string) =>
   z
     .object({
       id: namedUUIDType(addNameToString("announcement id", name)),
-      title: namedNonEmptyStringType(addNameToString("announcement title", name)),
-      message: namedNonEmptyStringType(addNameToString("announcement message", name)),
-      createdAt: namedISOTimestampType(addNameToString("announcement createdAt", name)).optional(),
+      title: namedNonEmptyStringType(
+        addNameToString("announcement title", name),
+      ),
+      message: namedNonEmptyStringType(
+        addNameToString("announcement message", name),
+      ),
+      createdAt: namedISOTimestampType(
+        addNameToString("announcement createdAt", name),
+      ).optional(),
     })
-    .strict({ message: addNameToString("announcement has extra fields", name) });
+    .strict({
+      message: addNameToString("announcement has extra fields", name),
+    });
 
+export const announcementWithIDType = namedAnnouncementWithIDType();
 export const announcementType = namedAnnouncementType();
-
 export const userType = namedUserType();
 export const timetableType = namedTimetableType();
 export const sectionType = namedSectionType();

From 6f800cc1f720aa3e945e1c9f4d8888ee8b4fd685 Mon Sep 17 00:00:00 2001
From: skoriop <karthikp.ivy@gmail.com>
Date: Tue, 23 Jul 2024 10:41:04 +0530
Subject: [PATCH 5/6] fix: minor nitpick

---
 frontend/src/components/announcements.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/announcements.tsx b/frontend/src/components/announcements.tsx
index 7ddc3098..39655147 100644
--- a/frontend/src/components/announcements.tsx
+++ b/frontend/src/components/announcements.tsx
@@ -52,7 +52,7 @@ function Announcements() {
     if (unreadAnnouncements && unreadAnnouncements.length > 0) {
       toast({
         title: "New Announcements",
-        description: `You have ${unreadAnnouncements.length} unread announcement(s).`,
+        description: `You have ${unreadAnnouncements.length} unread announcement${unreadAnnouncements.length > 1 ? 's' : ''}.`,
       });
     }
   }, [announcements, readAnnouncements, toast]);

From 90f4db71886b8fb3dc195db9eada701d001e5f04 Mon Sep 17 00:00:00 2001
From: skoriop <karthikp.ivy@gmail.com>
Date: Tue, 23 Jul 2024 14:22:27 +0530
Subject: [PATCH 6/6] style: lint with biome

---
 frontend/src/components/announcements.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/announcements.tsx b/frontend/src/components/announcements.tsx
index 39655147..86b4d0f5 100644
--- a/frontend/src/components/announcements.tsx
+++ b/frontend/src/components/announcements.tsx
@@ -52,7 +52,9 @@ function Announcements() {
     if (unreadAnnouncements && unreadAnnouncements.length > 0) {
       toast({
         title: "New Announcements",
-        description: `You have ${unreadAnnouncements.length} unread announcement${unreadAnnouncements.length > 1 ? 's' : ''}.`,
+        description: `You have ${
+          unreadAnnouncements.length
+        } unread announcement${unreadAnnouncements.length > 1 ? "s" : ""}.`,
       });
     }
   }, [announcements, readAnnouncements, toast]);