feat: show read notifications

src/__mocks__/mock-state.ts

@@ -8,6 +8,7 @@ export const mockAccounts: AuthState = {
 };
 
 export const mockSettings: SettingsState = {
+  showReadNotifications: false,
   participating: false,
   playSound: true,
   showNotifications: true,

src/components/NotificationRow.tsx

@@ -35,12 +35,22 @@ export const NotificationRow: React.FC<IProps> = ({
 
     if (settings.markAsDoneOnOpen) {
       markNotificationDone(notification.id, hostname);
-    } else {
+    }
+
+    if (!settings.showReadNotifications) {
       // no need to mark as read, github does it by default when opening it
       removeNotificationFromState(notification.id, hostname);
     }
   }, [settings]);
 
+  const setRowAsRead = useCallback(() => {
+    if (settings.showReadNotifications && notification.unread) {
+      const notificationRow = document.getElementById(notification.id);
+      notificationRow.className += 'opacity-50 dark:opacity-50';
+      console.log('Notification Row: ', notificationRow.className);
+    }
+  }, [settings]);
+
   const openBrowser = useCallback(
     () => openInBrowser(notification, accounts),
     [notification],
@@ -72,9 +82,13 @@ export const NotificationRow: React.FC<IProps> = ({
   ]);
 
   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 border-b border-gray-100 dark:border-gray-darker group dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker
+          ${!notification.unread ? 'opacity-50 dark:opacity-50' : ''}`}
+    >
       <div
-        className={`flex justify-center items-center w-5 ${realIconColor}`}
+        className={`flex flex-col justify-center items-center w-5 ${realIconColor}`}
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
@@ -84,7 +98,10 @@ export const NotificationRow: React.FC<IProps> = ({
         <div
           className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden cursor-pointer"
           role="main"
-          onClick={() => pressTitle()}
+          onClick={() => {
+            setRowAsRead();
+            pressTitle();
+          }}
           title={notification.subject.title}
         >
           {notification.subject.title}
@@ -130,13 +147,17 @@ export const NotificationRow: React.FC<IProps> = ({
           <BellSlashIcon size={14} aria-label="Unsubscribe" />
         </button>
 
-        <button
-          className="focus:outline-none h-full hover:text-green-500"
-          title="Mark as Read"
-          onClick={() => markNotificationRead(notification.id, hostname)}
-        >
-          <ReadIcon size={14} aria-label="Mark as Read" />
-        </button>
+        {notification.unread ? (
+          <button
+            className="focus:outline-none h-full hover:text-green-500"
+            title="Mark as Read"
+            onClick={() => markNotificationRead(notification.id, hostname)}
+          >
+            <ReadIcon size={14} aria-label="Mark as Read" />
+          </button>
+        ) : (
+          <div className="w-[14px]" />
+        )}
       </div>
     </div>
   );

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

@@ -2,10 +2,11 @@
 
 exports[`components/NotificationRow.tsx should render itself & its children 1`] = `
 <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"
+  className="flex space-x-3 py-2 px-3 bg-white border-b border-gray-100 dark:border-gray-darker group dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker
+          "
 >
   <div
-    className="flex justify-center items-center w-5 text-green-500"
+    className="flex flex-col justify-center items-center w-5 text-green-500"
     title="Open Issue"
   >
     <svg

src/context/App.test.tsx

@@ -296,6 +296,7 @@ describe('context/App.tsx', () => {
         showNotifications: true,
         showBots: true,
         showNotificationsCountInTray: false,
+        showReadNotifications: false,
         openAtStartup: false,
         theme: 'SYSTEM',
         colors: null,
@@ -336,6 +337,7 @@ describe('context/App.tsx', () => {
         showNotifications: true,
         showBots: true,
         showNotificationsCountInTray: false,
+        showReadNotifications: false,
         openAtStartup: true,
         theme: 'SYSTEM',
         colors: null,

src/context/App.tsx

@@ -32,6 +32,7 @@ const defaultAccounts: AuthState = {
 };
 
 export const defaultSettings: SettingsState = {
+  showReadNotifications: false,
   participating: false,
   playSound: true,
   showNotifications: true,
@@ -94,7 +95,11 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 
   useEffect(() => {
     fetchNotifications(accounts, settings);
-  }, [settings.participating, settings.showBots]);
+  }, [
+    settings.participating,
+    settings.showReadNotifications,
+    settings.showBots,
+  ]);
 
   useEffect(() => {
     fetchNotifications(accounts, settings);

src/hooks/useNotifications.test.ts

@@ -23,11 +23,11 @@ describe('hooks/useNotifications.ts', () => {
         ];
 
         nock('https://api.github.com')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(200, notifications);
 
         nock('https://github.gitify.io/api/v3')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(200, notifications);
 
         const { result } = renderHook(() => useNotifications(false));
@@ -52,11 +52,11 @@ describe('hooks/useNotifications.ts', () => {
         const message = 'Oops! Something went wrong.';
 
         nock('https://api.github.com/')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(400, { message });
 
         nock('https://github.gitify.io/api/v3/')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(400, { message });
 
         const { result } = renderHook(() => useNotifications(false));
@@ -88,7 +88,7 @@ describe('hooks/useNotifications.ts', () => {
         ];
 
         nock('https://github.gitify.io/api/v3/')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(200, notifications);
 
         const { result } = renderHook(() => useNotifications(false));
@@ -113,7 +113,7 @@ describe('hooks/useNotifications.ts', () => {
         };
 
         nock('https://github.gitify.io/api/v3/')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(400, { message: 'Oops! Something went wrong.' });
 
         const { result } = renderHook(() => useNotifications(false));
@@ -142,7 +142,7 @@ describe('hooks/useNotifications.ts', () => {
         ];
 
         nock('https://api.github.com')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(200, notifications);
 
         const { result } = renderHook(() => useNotifications(false));
@@ -266,7 +266,7 @@ describe('hooks/useNotifications.ts', () => {
         ];
 
         nock('https://api.github.com')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(200, notifications);
 
         nock('https://api.github.com')
@@ -398,7 +398,7 @@ describe('hooks/useNotifications.ts', () => {
         ];
 
         nock('https://api.github.com')
-          .get('/notifications?participating=false')
+          .get('/notifications?all=false&participating=false')
           .reply(200, notifications);
         nock('https://api.github.com')
           .get('/1')
@@ -449,11 +449,11 @@ describe('hooks/useNotifications.ts', () => {
       ];
 
       nock('https://api.github.com')
-        .get('/notifications?participating=false')
+        .get('/notifications?all=false&participating=false')
         .reply(200, notifications);
 
       nock('https://github.gitify.io/api/v3')
-        .get('/notifications?participating=false')
+        .get('/notifications?all=false&participating=false')
         .reply(200, notifications);
 
       const { result } = renderHook(() => useNotifications(false));

src/hooks/useNotifications.ts

@@ -65,7 +65,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
   const fetchNotifications = useCallback(
     async (accounts: AuthState, settings: SettingsState) => {
       const isGitHubLoggedIn = accounts.token !== null;
-      const endpointSuffix = `notifications?participating=${settings.participating}`;
+      const endpointSuffix = `notifications?all=${settings.showReadNotifications}&participating=${settings.participating}`;
 
       function getGitHubNotifications() {
         if (!isGitHubLoggedIn) {

src/routes/Settings.tsx

@@ -145,6 +145,14 @@ export const SettingsRoute: React.FC = () => {
           <legend id="notifications" className="font-semibold  mt-2 mb-1">
             Notifications
           </legend>
+          <FieldCheckbox
+            name="showReadNotifications"
+            label="Show read notifications"
+            checked={settings.showReadNotifications}
+            onChange={(evt) =>
+              updateSetting('showReadNotifications', evt.target.checked)
+            }
+          />
           <FieldCheckbox
             name="showOnlyParticipating"
             label="Show only participating"

src/routes/__snapshots__/Settings.test.tsx.snap

@@ -180,6 +180,29 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       >
         Notifications
       </legend>
+      <div
+        class="flex items-start mt-1 mb-3"
+      >
+        <div
+          class="flex items-center h-5"
+        >
+          <input
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            id="showReadNotifications"
+            type="checkbox"
+          />
+        </div>
+        <div
+          class="ml-3 text-sm"
+        >
+          <label
+            class="font-medium text-gray-700 dark:text-gray-200"
+            for="showReadNotifications"
+          >
+            Show read notifications
+          </label>
+        </div>
+      </div>
       <div
         class="flex items-start mt-1 mb-3"
       >

src/types.ts

@@ -16,6 +16,7 @@ interface AppearanceSettingsState {
 }
 
 interface NotificationSettingsState {
+  showReadNotifications: boolean;
   participating: boolean;
   showNotifications: boolean;
   showBots: boolean;