feat: delay notification removal (#1092)

* feat: delay notification removal

* feat: delay notification removal

* feat: delay notification removal

* feat: delay notification removal

* chore: remove comment

Author: setchy

src/__mocks__/mock-state.ts

@@ -18,4 +18,5 @@ export const mockSettings: SettingsState = {
   detailedNotifications: false,
   markAsDoneOnOpen: false,
   showAccountHostname: false,
+  delayNotificationState: false,
 };

src/components/NotificationRow.tsx

@@ -47,7 +47,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
       markNotificationDone(notification.id, hostname);
     } else {
       // no need to mark as read, github does it by default when opening it
-      removeNotificationFromState(notification.id, hostname);
+      removeNotificationFromState(settings, notification.id, hostname);
     }
   }, [notifications, notification, accounts, settings]); // notifications required here to prevent weird state issues
 
@@ -84,7 +84,10 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
   ]);
 
   return (
-    <div className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group">
+    <div
+      id={notification.id}
+      className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+    >
       <div
         className={`flex justify-center items-center w-5 ${iconColor}`}
         title={notificationTitle}

src/components/__snapshots__/NotificationRow.test.tsx.snap

@@ -131,7 +131,12 @@ describe('context/App.tsx', () => {
 
       expect(markNotificationReadMock).toHaveBeenCalledTimes(1);
       expect(markNotificationReadMock).toHaveBeenCalledWith(
-        { enterpriseAccounts: [], token: null, user: null },
+        {
+          enterpriseAccounts: [],
+          token: null,
+          user: null,
+        },
+        mockSettings,
         '123-456',
         'github.com',
       );
@@ -160,6 +165,7 @@ describe('context/App.tsx', () => {
       expect(markNotificationDoneMock).toHaveBeenCalledTimes(1);
       expect(markNotificationDoneMock).toHaveBeenCalledWith(
         { enterpriseAccounts: [], token: null, user: null },
+        mockSettings,
         '123-456',
         'github.com',
       );
@@ -188,6 +194,7 @@ describe('context/App.tsx', () => {
       expect(unsubscribeNotificationMock).toHaveBeenCalledTimes(1);
       expect(unsubscribeNotificationMock).toHaveBeenCalledWith(
         { enterpriseAccounts: [], token: null, user: null },
+        mockSettings,
         '123-456',
         'github.com',
       );
@@ -221,6 +228,7 @@ describe('context/App.tsx', () => {
       expect(markRepoNotificationsMock).toHaveBeenCalledTimes(1);
       expect(markRepoNotificationsMock).toHaveBeenCalledWith(
         { enterpriseAccounts: [], token: null, user: null },
+        mockSettings,
         'gitify-app/notifications-test',
         'github.com',
       );
@@ -325,6 +333,7 @@ describe('context/App.tsx', () => {
         detailedNotifications: false,
         markAsDoneOnOpen: false,
         showAccountHostname: false,
+        delayNotificationState: false,
       },
     );
   });
@@ -369,6 +378,7 @@ describe('context/App.tsx', () => {
         detailedNotifications: false,
         markAsDoneOnOpen: false,
         showAccountHostname: false,
+        delayNotificationState: false,
       },
     );
   });

src/context/App.test.tsx

@@ -44,6 +44,7 @@ export const defaultSettings: SettingsState = {
   detailedNotifications: false,
   markAsDoneOnOpen: false,
   showAccountHostname: false,
+  delayNotificationState: false,
 };
 
 interface AppContextState {
@@ -57,7 +58,11 @@ interface AppContextState {
   notifications: AccountNotifications[];
   status: Status;
   errorDetails: GitifyError;
-  removeNotificationFromState: (id: string, hostname: string) => void;
+  removeNotificationFromState: (
+    settings: SettingsState,
+    id: string,
+    hostname: string,
+  ) => void;
   fetchNotifications: () => Promise<void>;
   markNotificationRead: (id: string, hostname: string) => Promise<void>;
   markNotificationDone: (id: string, hostname: string) => Promise<void>;
@@ -199,31 +204,31 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
   const markNotificationReadWithAccounts = useCallback(
     async (id: string, hostname: string) =>
-      await markNotificationRead(accounts, id, hostname),
+      await markNotificationRead(accounts, settings, id, hostname),
     [accounts, notifications],
   );
 
   const markNotificationDoneWithAccounts = useCallback(
     async (id: string, hostname: string) =>
-      await markNotificationDone(accounts, id, hostname),
+      await markNotificationDone(accounts, settings, id, hostname),
     [accounts, notifications],
   );
 
   const unsubscribeNotificationWithAccounts = useCallback(
     async (id: string, hostname: string) =>
-      await unsubscribeNotification(accounts, id, hostname),
+      await unsubscribeNotification(accounts, settings, id, hostname),
     [accounts, notifications],
   );
 
   const markRepoNotificationsWithAccounts = useCallback(
     async (repoSlug: string, hostname: string) =>
-      await markRepoNotifications(accounts, repoSlug, hostname),
+      await markRepoNotifications(accounts, settings, repoSlug, hostname),
     [accounts, notifications],
   );
 
   const markRepoNotificationsDoneWithAccounts = useCallback(
     async (repoSlug: string, hostname: string) =>
-      await markRepoNotificationsDone(accounts, repoSlug, hostname),
+      await markRepoNotificationsDone(accounts, settings, repoSlug, hostname),
     [accounts, notifications],
   );