From caecc882472f2df024080fc4effa0fceb34be505 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Thu, 6 Nov 2025 10:48:34 +0100
Subject: [PATCH] [Glitch] Fix: correctly dismisses announcement when viewed

Port d45b4db1d76f9ce7a310ff3a420be47f9d35113d to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../components/announcements/announcement.tsx | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/announcements/announcement.tsx b/app/javascript/flavours/glitch/features/home_timeline/components/announcements/announcement.tsx
index 1bc8cdb9da..1e80ab2410 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/components/announcements/announcement.tsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/components/announcements/announcement.tsx
@@ -1,11 +1,13 @@
-import { useEffect, useState } from 'react';
 import type { FC } from 'react';
+import { useEffect, useState } from 'react';
 
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
+import { dismissAnnouncement } from '@/flavours/glitch/actions/announcements';
 import type { ApiAnnouncementJSON } from '@/flavours/glitch/api_types/announcements';
 import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context';
 import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
+import { useAppDispatch } from '@/flavours/glitch/store';
 
 import { ReactionsBar } from './reactions';
 
@@ -22,13 +24,23 @@ export const Announcement: FC<AnnouncementProps> = ({
   announcement,
   selected,
 }) => {
-  const [unread, setUnread] = useState(!announcement.read);
+  const { read, id } = announcement;
+
+  // Dismiss announcement when it becomes active.
+  const dispatch = useAppDispatch();
   useEffect(() => {
-    // Only update `unread` marker once the announcement is out of view
-    if (!selected && unread !== !announcement.read) {
-      setUnread(!announcement.read);
+    if (selected && !read) {
+      dispatch(dismissAnnouncement(id));
     }
-  }, [announcement.read, selected, unread]);
+  }, [selected, id, dispatch, read]);
+
+  // But visually show the announcement as read only when it goes out of view.
+  const [unread, setUnread] = useState(!read);
+  useEffect(() => {
+    if (!selected && unread !== !read) {
+      setUnread(!read);
+    }
+  }, [selected, unread, read]);
 
   return (
     <AnimateEmojiProvider className='announcements__item'>