fix: delay state

src/components/NotificationRow.tsx

@@ -45,9 +45,12 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
     unsubscribeNotification,
   } = useContext(AppContext);
   const [animateExit, setAnimateExit] = useState(false);
+  const [showAsRead, setShowAsRead] = useState(false);
 
   const handleNotification = useCallback(() => {
     setAnimateExit(!settings.delayNotificationState);
+    setShowAsRead(settings.delayNotificationState);
+
     openNotification(notification);
 
     if (settings.markAsDoneOnOpen) {
@@ -102,6 +105,7 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
         'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
         animateExit &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
+        showAsRead && 'opacity-50 dark:opacity-50',
       )}
     >
       <div
@@ -219,6 +223,7 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           title="Mark as Done"
           onClick={() => {
             setAnimateExit(!settings.delayNotificationState);
+            setShowAsRead(settings.delayNotificationState);
             markNotificationDone(notification);
           }}
         >
@@ -240,6 +245,7 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           title="Mark as Read"
           onClick={() => {
             setAnimateExit(!settings.delayNotificationState);
+            setShowAsRead(settings.delayNotificationState);
             markNotificationRead(notification);
           }}
         >

src/styles/gitify.ts

@@ -3,5 +3,3 @@ export const BUTTON_CLASS_NAME =
 
 export const BUTTON_SIDEBAR_CLASS_NAME =
   'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default';
-
-export const READ_NOTIFICATION_CLASS_NAME = 'opacity-50 dark:opacity-50';

src/utils/remove-notification.test.ts

@@ -1,6 +1,5 @@
 import { mockSingleAccountNotifications } from '../__mocks__/notifications-mocks';
 import { mockSettings } from '../__mocks__/state-mocks';
-import { READ_NOTIFICATION_CLASS_NAME } from '../styles/gitify';
 import { mockSingleNotification } from './api/__mocks__/response-mocks';
 import { removeNotification } from './remove-notification';
 
@@ -17,11 +16,7 @@ describe('utils/remove-notification.ts', () => {
     expect(result[0].notifications.length).toBe(0);
   });
 
-  it('should set notification as opaque if delayNotificationState enabled', () => {
-    const mockElement = document.createElement('div');
-    mockElement.id = mockSingleAccountNotifications[0].notifications[0].id;
-    jest.spyOn(document, 'getElementById').mockReturnValue(mockElement);
-
+  it('should skip notification removal if delay state enabled', () => {
     expect(mockSingleAccountNotifications[0].notifications.length).toBe(1);
 
     const result = removeNotification(
@@ -31,9 +26,5 @@ describe('utils/remove-notification.ts', () => {
     );
 
     expect(result[0].notifications.length).toBe(1);
-    expect(document.getElementById).toHaveBeenCalledWith(
-      mockSingleAccountNotifications[0].notifications[0].id,
-    );
-    expect(mockElement.className).toContain(READ_NOTIFICATION_CLASS_NAME);
   });
 });

src/utils/remove-notification.ts

@@ -1,4 +1,3 @@
-import { READ_NOTIFICATION_CLASS_NAME } from '../styles/gitify';
 import type { AccountNotifications, SettingsState } from '../types';
 import type { Notification } from '../typesGitHub';
 import { getAccountUUID } from './auth/utils';
@@ -9,8 +8,6 @@ export const removeNotification = (
   notifications: AccountNotifications[],
 ): AccountNotifications[] => {
   if (settings.delayNotificationState) {
-    const notificationRow = document.getElementById(notification.id);
-    notificationRow.className += ` ${READ_NOTIFICATION_CLASS_NAME}`;
     return notifications;
   }