fix: notification read state when using delayNotificationState settings (#2314)

* fix: notification read state for delayNotificationState

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* fix: notification read state for delayNotificationState

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* fix: notification read state for delayNotificationState

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* Update useNotifications.ts

* fix: notification read state for delayNotificationState

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* fix: notification read state for delayNotificationState

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* fix: notification read state for delayNotificationState

Signed-off-by: Adam Setch <adam.setch@outlook.com>

---------

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/components/notifications/NotificationRow.test.tsx

@@ -84,6 +84,28 @@ describe('renderer/components/notifications/NotificationRow.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should render itself & its children - notification is read', async () => {
+    jest
+      .spyOn(global.Date, 'now')
+      .mockImplementation(() => new Date('2024').valueOf());
+
+    const props = {
+      notification: {
+        ...mockSingleNotification,
+        unread: false,
+      },
+      account: mockGitHubCloudAccount,
+    };
+
+    const tree = render(
+      <AppContext.Provider value={{ settings: mockSettings }}>
+        <NotificationRow {...props} />
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
   describe('notification interactions', () => {
     it('should open a notification in the browser - click', async () => {
       const markNotificationsAsRead = jest.fn();

src/renderer/components/notifications/NotificationRow.tsx

@@ -18,13 +18,11 @@ import { NotificationHeader } from './NotificationHeader';
 interface INotificationRow {
   notification: Notification;
   isAnimated?: boolean;
-  isRead?: boolean;
 }
 
 export const NotificationRow: FC<INotificationRow> = ({
   notification,
   isAnimated = false,
-  isRead = false,
 }: INotificationRow) => {
   const {
     settings,
@@ -33,12 +31,9 @@ export const NotificationRow: FC<INotificationRow> = ({
     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) {
@@ -55,13 +50,11 @@ export const NotificationRow: FC<INotificationRow> = ({
 
   const actionMarkAsDone = () => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
     markNotificationsAsDone([notification]);
   };
 
   const actionMarkAsRead = () => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
     markNotificationsAsRead([notification]);
   };
 
@@ -78,6 +71,8 @@ export const NotificationRow: FC<INotificationRow> = ({
 
   const groupByDate = settings.groupBy === GroupBy.DATE;
 
+  const isNotificationRead = !notification.unread;
+
   return (
     <div
       className={cn(
@@ -86,7 +81,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         'text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-350 ease-in-out',
-        (isRead || showAsRead) && Opacity.READ,
+        isNotificationRead && Opacity.READ,
       )}
       id={notification.id}
     >

src/renderer/components/notifications/RepositoryNotifications.test.tsx

@@ -39,6 +39,20 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () =>
     expect(tree).toMatchSnapshot();
   });
 
+  it('should render itself & its children - all notifications are read', () => {
+    for (const n of props.repoNotifications) {
+      n.unread = false;
+    }
+
+    const tree = render(
+      <AppContext.Provider value={{}}>
+        <RepositoryNotifications {...props} />
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should open the browser when clicking on the repo name', async () => {
     const openExternalLinkMock = jest
       .spyOn(comms, 'openExternalLink')

src/renderer/components/notifications/RepositoryNotifications.tsx

@@ -27,28 +27,29 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
   const { settings, markNotificationsAsRead, markNotificationsAsDone } =
     useContext(AppContext);
   const [animateExit, setAnimateExit] = useState(false);
-  const [showAsRead, setShowAsRead] = useState(false);
   const [showRepositoryNotifications, setShowRepositoryNotifications] =
     useState(true);
 
   const avatarUrl = repoNotifications[0].repository.owner.avatar_url;
 
   const actionMarkAsDone = () => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
     markNotificationsAsDone(repoNotifications);
   };
 
   const actionMarkAsRead = () => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
     markNotificationsAsRead(repoNotifications);
   };
 
   const actionToggleRepositoryNotifications = () => {
     setShowRepositoryNotifications(!showRepositoryNotifications);
   };
 
+  const areAllRepoNotificationsRead = repoNotifications.every(
+    (notification) => !notification.unread,
+  );
+
   const Chevron = getChevronDetails(
     true,
     showRepositoryNotifications,
@@ -63,7 +64,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           'bg-gitify-repository',
           animateExit &&
             'translate-x-full opacity-0 transition duration-350 ease-in-out',
-          showAsRead && Opacity.READ,
+          areAllRepoNotificationsRead && Opacity.READ,
         )}
         direction="horizontal"
         onClick={actionToggleRepositoryNotifications}
@@ -122,7 +123,6 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
         repoNotifications.map((notification) => (
           <NotificationRow
             isAnimated={animateExit}
-            isRead={showAsRead}
             key={notification.id}
             notification={notification}
           />