feat: add user handle filters (include and exclude)

src/renderer/__mocks__/state-mocks.ts

@@ -106,7 +106,9 @@ const mockSystemSettings: SystemSettingsState = {
 };
 
 const mockFilters: FilterSettingsState = {
-  hideBots: false,
+  filterUserTypes: [],
+  filterIncludeHandles: [],
+  filterExcludeHandles: [],
   filterReasons: [],
 };
 

src/renderer/components/AllRead.test.tsx

@@ -14,9 +14,7 @@ describe('renderer/components/AllRead.tsx', () => {
     const tree = render(
       <AppContext.Provider
         value={{
-          settings: {
-            ...mockSettings,
-          },
+          settings: mockSettings,
         }}
       >
         <MemoryRouter>
@@ -35,7 +33,6 @@ describe('renderer/components/AllRead.tsx', () => {
           settings: {
             ...mockSettings,
             filterReasons: ['author'],
-            hideBots: true,
           },
         }}
       >

src/renderer/components/AllRead.tsx

@@ -2,7 +2,7 @@ import { type FC, useContext, useMemo } from 'react';
 
 import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
-import { hasAnyFiltersSet } from '../utils/filters';
+import { hasAnyFiltersSet } from '../utils/notifications/filters/filter';
 import { EmojiSplash } from './layout/EmojiSplash';
 
 interface IAllRead {

src/renderer/components/Sidebar.tsx

@@ -16,12 +16,12 @@ import { APPLICATION } from '../../shared/constants';
 import { AppContext } from '../context/App';
 import { quitApp } from '../utils/comms';
 import { Constants } from '../utils/constants';
-import { hasAnyFiltersSet } from '../utils/filters';
 import {
   openGitHubIssues,
   openGitHubNotifications,
   openGitHubPulls,
 } from '../utils/links';
+import { hasAnyFiltersSet } from '../utils/notifications/filters/filter';
 import { getNotificationCount } from '../utils/notifications/notifications';
 import { LogoIcon } from './icons/LogoIcon';
 

src/renderer/components/filters/ReasonFilter.test.tsx

@@ -0,0 +1,84 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
+import { ReasonFilter } from './ReasonFilter';
+
+describe('renderer/components/filters/ReasonFilter.tsx', () => {
+  const updateFilter = jest.fn();
+
+  it('should render itself & its children', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: mockSettings,
+          notifications: [],
+        }}
+      >
+        <MemoryRouter>
+          <ReasonFilter />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should be able to toggle reason type - none already set', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              filterReasons: [],
+            },
+            notifications: [],
+            updateFilter,
+          }}
+        >
+          <MemoryRouter>
+            <ReasonFilter />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Mentioned'));
+
+    expect(updateFilter).toHaveBeenCalledWith('filterReasons', 'mention', true);
+
+    expect(
+      screen.getByLabelText('Mentioned').parentNode.parentNode,
+    ).toMatchSnapshot();
+  });
+
+  it('should be able to toggle reason type - some filters already set', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              filterReasons: ['security_alert'],
+            },
+            notifications: [],
+            updateFilter,
+          }}
+        >
+          <MemoryRouter>
+            <ReasonFilter />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Mentioned'));
+
+    expect(updateFilter).toHaveBeenCalledWith('filterReasons', 'mention', true);
+
+    expect(
+      screen.getByLabelText('Mentioned').parentNode.parentNode,
+    ).toMatchSnapshot();
+  });
+});

src/renderer/components/filters/ReasonFilter.tsx

@@ -0,0 +1,47 @@
+import { type FC, useContext } from 'react';
+
+import { NoteIcon } from '@primer/octicons-react';
+import { Stack, Text } from '@primer/react';
+
+import { AppContext } from '../../context/App';
+import type { Reason } from '../../typesGitHub';
+import {
+  getReasonFilterCount,
+  isReasonFilterSet,
+} from '../../utils/notifications/filters/reason';
+import { FORMATTED_REASONS, getReasonDetails } from '../../utils/reason';
+import { Checkbox } from '../fields/Checkbox';
+import { Title } from '../primitives/Title';
+
+export const ReasonFilter: FC = () => {
+  const { updateFilter, settings, notifications } = useContext(AppContext);
+
+  return (
+    <fieldset id="filter-reasons" className="mb-3">
+      <Title icon={NoteIcon}>Reason</Title>
+      <Stack direction="vertical" gap="condensed">
+        {Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
+          const reasonDetails = getReasonDetails(reason);
+          const reasonTitle = reasonDetails.title;
+          const reasonDescription = reasonDetails.description;
+          const isReasonChecked = isReasonFilterSet(settings, reason);
+          const reasonCount = getReasonFilterCount(notifications, reason);
+
+          return (
+            <Checkbox
+              key={reason}
+              name={reasonTitle}
+              label={reasonTitle}
+              checked={isReasonChecked}
+              onChange={(evt) =>
+                updateFilter('filterReasons', reason, evt.target.checked)
+              }
+              tooltip={<Text>{reasonDescription}</Text>}
+              counter={reasonCount}
+            />
+          );
+        })}
+      </Stack>
+    </fieldset>
+  );
+};

src/renderer/components/filters/UserHandleFilter.test.tsx

@@ -0,0 +1,194 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
+import type { SettingsState } from '../../types';
+import { UserHandleFilter } from './UserHandleFilter';
+
+describe('renderer/components/filters/UserHandleFilter.tsx', () => {
+  const updateFilter = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render itself & its children - detailed notifications enabled', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: true,
+          } as SettingsState,
+          notifications: [],
+        }}
+      >
+        <MemoryRouter>
+          <UserHandleFilter />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - detailed notifications disabled', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: false,
+          } as SettingsState,
+          notifications: [],
+        }}
+      >
+        <MemoryRouter>
+          <UserHandleFilter />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  describe('Include user handles', () => {
+    it('should be able to filter by include user handle - none already set', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              settings: {
+                ...mockSettings,
+                filterIncludeHandles: [],
+              },
+              notifications: [],
+              updateFilter,
+            }}
+          >
+            <MemoryRouter>
+              <UserHandleFilter />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      fireEvent.change(screen.getByTitle('Include handles'), {
+        target: { value: 'github-user' },
+      });
+
+      fireEvent.keyDown(screen.getByTitle('Include handles'), {
+        key: 'Enter',
+        code: 'Enter',
+      });
+
+      expect(updateFilter).toHaveBeenCalledWith(
+        'filterIncludeHandles',
+        'github-user',
+        true,
+      );
+    });
+
+    it('should not allow duplicate include user handle', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              settings: {
+                ...mockSettings,
+                filterIncludeHandles: ['github-user'],
+              },
+              notifications: [],
+              updateFilter,
+            }}
+          >
+            <MemoryRouter>
+              <UserHandleFilter />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      fireEvent.change(screen.getByTitle('Include handles'), {
+        target: { value: 'github-user' },
+      });
+
+      fireEvent.keyDown(screen.getByTitle('Include handles'), {
+        key: 'Enter',
+        code: 'Enter',
+      });
+
+      expect(updateFilter).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('Exclude user handles', () => {
+    it('should be able to filter by exclude user handle - none already set', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              settings: {
+                ...mockSettings,
+                filterExcludeHandles: [],
+              },
+              notifications: [],
+              updateFilter,
+            }}
+          >
+            <MemoryRouter>
+              <UserHandleFilter />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      fireEvent.change(screen.getByTitle('Exclude handles'), {
+        target: { value: 'github-user' },
+      });
+
+      fireEvent.keyDown(screen.getByTitle('Exclude handles'), {
+        key: 'Enter',
+        code: 'Enter',
+      });
+
+      expect(updateFilter).toHaveBeenCalledWith(
+        'filterExcludeHandles',
+        'github-user',
+        true,
+      );
+    });
+
+    it('should not allow duplicate exclude user handle', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              settings: {
+                ...mockSettings,
+                filterExcludeHandles: ['github-user'],
+              },
+              notifications: [],
+              updateFilter,
+            }}
+          >
+            <MemoryRouter>
+              <UserHandleFilter />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      fireEvent.change(screen.getByTitle('Exclude handles'), {
+        target: { value: 'github-user' },
+      });
+
+      fireEvent.keyDown(screen.getByTitle('Exclude handles'), {
+        key: 'Enter',
+        code: 'Enter',
+      });
+
+      expect(updateFilter).toHaveBeenCalledTimes(0);
+    });
+  });
+});