refactor: extract filters and show on all read screen

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/AllRead.test.tsx

@@ -1,14 +1,49 @@
 import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { mockSettings } from '../__mocks__/state-mocks';
 import { ensureStableEmojis } from '../__mocks__/utils';
+import { AppContext } from '../context/App';
 import { AllRead } from './AllRead';
 
 describe('renderer/components/AllRead.tsx', () => {
   beforeEach(() => {
     ensureStableEmojis();
   });
 
-  it('should render itself & its children', () => {
-    const tree = render(<AllRead />);
+  it('should render itself & its children - no filters', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+          },
+        }}
+      >
+        <MemoryRouter>
+          <AllRead />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - with filters', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            filterReasons: ['author'],
+            hideBots: true,
+          },
+        }}
+      >
+        <MemoryRouter>
+          <AllRead />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
 
     expect(tree).toMatchSnapshot();
   });

src/renderer/components/AllRead.tsx

@@ -1,12 +1,18 @@
-import { type FC, useMemo } from 'react';
+import { type FC, useContext, useMemo } from 'react';
 
 import { Stack } from '@primer/react';
 
+import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
+import { hasFiltersSet } from '../utils/filters';
 import { Centered } from './primitives/Centered';
 import { EmojiText } from './primitives/EmojiText';
 
 export const AllRead: FC = () => {
+  const { settings } = useContext(AppContext);
+
+  const hasFilters = hasFiltersSet(settings);
+
   const emoji = useMemo(
     () =>
       Constants.ALL_READ_EMOJIS[
@@ -22,7 +28,13 @@ export const AllRead: FC = () => {
           <EmojiText text={emoji} />
         </div>
 
-        <div className="mb-2 text-xl font-semibold">No new notifications</div>
+        {hasFilters ? (
+          <div className="mb-2 text-xl font-semibold">
+            No new filtered notifications
+          </div>
+        ) : (
+          <div className="mb-2 text-xl font-semibold">No new notifications</div>
+        )}
       </Stack>
     </Centered>
   );

src/renderer/components/Sidebar.tsx

@@ -15,7 +15,7 @@ import { IconButton, Stack } from '@primer/react';
 import { AppContext } from '../context/App';
 import { quitApp } from '../utils/comms';
 import { Constants } from '../utils/constants';
-import { getFilterCount } from '../utils/helpers';
+import { hasFiltersSet } from '../utils/filters';
 import {
   openGitHubIssues,
   openGitHubNotifications,
@@ -67,10 +67,6 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
-  const filterCount = useMemo(() => {
-    return getFilterCount(settings);
-  }, [settings]);
-
   return (
     <div className="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-gray-sidebar">
       <div className="flex flex-1 flex-col">
@@ -113,7 +109,7 @@ export const Sidebar: FC = () => {
               description="Filter notifications"
               unsafeDisableTooltip={false}
               size="small"
-              variant={filterCount > 0 ? 'primary' : 'invisible'}
+              variant={hasFiltersSet(settings) ? 'primary' : 'invisible'}
               tooltipDirection="e"
               onClick={() => toggleFilters()}
               data-testid="sidebar-filter-notifications"

src/renderer/components/__snapshots__/AllRead.test.tsx.snap

@@ -0,0 +1,28 @@
+import { defaultSettings } from '../context/App';
+import type { SettingsState } from '../types';
+import { getFilterCount, hasFiltersSet } from './filters';
+
+describe('renderer/utils/filters.ts', () => {
+  it('default filter settings', () => {
+    expect(getFilterCount(defaultSettings)).toBe(0);
+    expect(hasFiltersSet(defaultSettings)).toBe(false);
+  });
+
+  it('non-default reason filters', () => {
+    const settings = {
+      ...defaultSettings,
+      filterReasons: ['subscribed', 'manual'],
+    } as SettingsState;
+    expect(getFilterCount(settings)).toBe(2);
+    expect(hasFiltersSet(settings)).toBe(true);
+  });
+
+  it('non-default bot filters', () => {
+    const settings = {
+      ...defaultSettings,
+      hideBots: true,
+    } as SettingsState;
+    expect(getFilterCount(settings)).toBe(1);
+    expect(hasFiltersSet(settings)).toBe(true);
+  });
+});

src/renderer/utils/filters.test.ts

@@ -0,0 +1,23 @@
+import { defaultSettings } from '../context/App';
+import type { SettingsState } from '../types';
+
+export function getFilterCount(settings: SettingsState): number {
+  let count = 0;
+
+  if (settings.filterReasons.length !== defaultSettings.filterReasons.length) {
+    count += settings.filterReasons.length;
+  }
+
+  if (
+    settings.detailedNotifications &&
+    settings.hideBots !== defaultSettings.hideBots
+  ) {
+    count += 1;
+  }
+
+  return count;
+}
+
+export function hasFiltersSet(settings: SettingsState): boolean {
+  return getFilterCount(settings) > 0;
+}

src/renderer/utils/filters.ts

@@ -11,8 +11,7 @@ import {
   ChevronRightIcon,
 } from '@primer/octicons-react';
 import log from 'electron-log';
-import { defaultSettings } from '../context/App';
-import type { Hostname, Link, SettingsState } from '../types';
+import type { Hostname, Link } from '../types';
 import type { SubjectType } from '../typesGitHub';
 import {
   mockGraphQLResponse,
@@ -25,7 +24,6 @@ import {
   generateGitHubWebUrl,
   generateNotificationReferrerId,
   getChevronDetails,
-  getFilterCount,
   getPlatformFromHostname,
   isEnterpriseServerHost,
   isMarkAsDoneFeatureSupported,
@@ -614,28 +612,6 @@ describe('renderer/utils/helpers.ts', () => {
     });
   });
 
-  describe('filter count', () => {
-    it('default filter settings', () => {
-      expect(getFilterCount(defaultSettings)).toBe(0);
-    });
-
-    it('non-default reason filters', () => {
-      const settings = {
-        ...defaultSettings,
-        filterReasons: ['subscribed', 'manual'],
-      } as SettingsState;
-      expect(getFilterCount(settings)).toBe(2);
-    });
-
-    it('non-default bot filters', () => {
-      const settings = {
-        ...defaultSettings,
-        hideBots: true,
-      } as SettingsState;
-      expect(getFilterCount(settings)).toBe(1);
-    });
-  });
-
   describe('getChevronDetails', () => {
     it('should return correct chevron details', () => {
       expect(getChevronDetails(true, true, 'account')).toEqual({

src/renderer/utils/helpers.test.ts

@@ -5,8 +5,7 @@ import {
 } from '@primer/octicons-react';
 import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import log from 'electron-log';
-import { defaultSettings } from '../context/App';
-import type { Account, Chevron, Hostname, Link, SettingsState } from '../types';
+import type { Account, Chevron, Hostname, Link } from '../types';
 import type { Notification } from '../typesGitHub';
 import { getHtmlUrl, getLatestDiscussion } from './api/client';
 import type { PlatformType } from './auth/types';
@@ -206,23 +205,6 @@ export function formatNotificationUpdatedAt(
   return '';
 }
 
-export function getFilterCount(settings: SettingsState): number {
-  let count = 0;
-
-  if (settings.filterReasons.length !== defaultSettings.filterReasons.length) {
-    count += settings.filterReasons.length;
-  }
-
-  if (
-    settings.detailedNotifications &&
-    settings.hideBots !== defaultSettings.hideBots
-  ) {
-    count += 1;
-  }
-
-  return count;
-}
-
 export function getChevronDetails(
   hasNotifications: boolean,
   isVisible: boolean,