refactor: reduce duplication within filter module

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

@@ -0,0 +1,148 @@
+import { MarkGithubIcon } from '@primer/octicons-react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { mockAccountNotifications } from '../../__mocks__/notifications-mocks';
+import { mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
+import type { SettingsState } from '../../types';
+import { stateFilter } from '../../utils/notifications/filters';
+import { FilterSection } from './FilterSection';
+
+describe('renderer/components/filters/FilterSection.tsx', () => {
+  const updateFilter = jest.fn();
+
+  const mockFilter = stateFilter;
+  const mockFilterSetting = 'filterStates';
+
+  describe('should render itself & its children', () => {
+    it('with detailed notifications enabled', () => {
+      const tree = render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              detailedNotifications: true,
+            } as SettingsState,
+            notifications: mockAccountNotifications,
+          }}
+        >
+          <MemoryRouter>
+            <FilterSection
+              id={'FilterSectionTest'}
+              title={'FilterSectionTitle'}
+              icon={MarkGithubIcon}
+              filter={{
+                ...mockFilter,
+                requiresDetailsNotifications: true,
+              }}
+              filterSetting={mockFilterSetting}
+            />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('with detailed notifications disabled', () => {
+      const tree = render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              detailedNotifications: false,
+            } as SettingsState,
+            notifications: mockAccountNotifications,
+          }}
+        >
+          <FilterSection
+            id={'FilterSectionTest'}
+            title={'FilterSectionTitle'}
+            icon={MarkGithubIcon}
+            filter={{
+              ...mockFilter,
+              requiresDetailsNotifications: false,
+            }}
+            filterSetting={mockFilterSetting}
+          />
+        </AppContext.Provider>,
+      );
+
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  it('should be able to toggle filter value - none already set', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              filterStates: [],
+            },
+            notifications: [],
+            updateFilter,
+          }}
+        >
+          <MemoryRouter>
+            <FilterSection
+              id={'FilterSectionTest'}
+              title={'FilterSectionTitle'}
+              icon={MarkGithubIcon}
+              filter={mockFilter}
+              filterSetting={mockFilterSetting}
+            />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Open'));
+
+    expect(updateFilter).toHaveBeenCalledWith(mockFilterSetting, 'open', true);
+
+    expect(
+      screen.getByLabelText('Open').parentNode.parentNode,
+    ).toMatchSnapshot();
+  });
+
+  it('should be able to toggle user type - some filters already set', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              filterStates: ['open'],
+            },
+            notifications: [],
+            updateFilter,
+          }}
+        >
+          <MemoryRouter>
+            <FilterSection
+              id={'FilterSectionTest'}
+              title={'FilterSectionTitle'}
+              icon={MarkGithubIcon}
+              filter={mockFilter}
+              filterSetting={mockFilterSetting}
+            />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Closed'));
+
+    expect(updateFilter).toHaveBeenCalledWith(
+      mockFilterSetting,
+      'closed',
+      true,
+    );
+
+    expect(
+      screen.getByLabelText('Closed').parentNode.parentNode,
+    ).toMatchSnapshot();
+  });
+});

src/renderer/components/filters/FilterSection.tsx

@@ -0,0 +1,86 @@
+import { type ReactNode, useContext } from 'react';
+
+import type { Icon } from '@primer/octicons-react';
+import { Stack, Text } from '@primer/react';
+
+import { AppContext } from '../../context/App';
+import type { FilterSettingsState, FilterValue } from '../../types';
+import type { Filter } from '../../utils/notifications/filters';
+import { Checkbox } from '../fields/Checkbox';
+import { Tooltip } from '../fields/Tooltip';
+import { Title } from '../primitives/Title';
+import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
+
+export interface IFilterSection<T extends FilterValue> {
+  id: string;
+  title: string;
+  icon: Icon;
+  filter: Filter<T>;
+  filterSetting: keyof FilterSettingsState;
+  tooltip?: ReactNode;
+  layout?: 'horizontal' | 'vertical';
+}
+
+export const FilterSection = <T extends FilterValue>({
+  id,
+  title,
+  icon,
+  filter,
+  filterSetting,
+  tooltip,
+  layout = 'vertical',
+}: IFilterSection<T>) => {
+  const { updateFilter, settings, notifications } = useContext(AppContext);
+
+  return (
+    <fieldset id={id}>
+      <Stack direction="horizontal" gap="condensed" align="baseline">
+        <Title icon={icon}>{title}</Title>
+        {tooltip && (
+          <Tooltip
+            name={`tooltip-${id}`}
+            tooltip={
+              <Stack direction="vertical" gap="condensed">
+                {tooltip}
+                {filter.requiresDetailsNotifications && (
+                  <RequiresDetailedNotificationWarning />
+                )}
+              </Stack>
+            }
+          />
+        )}
+      </Stack>
+
+      <Stack
+        direction={layout}
+        gap={layout === 'horizontal' ? 'normal' : 'condensed'}
+      >
+        {(Object.keys(filter.FILTER_TYPES) as T[]).map((type) => {
+          const typeDetails = filter.getTypeDetails(type);
+          const typeTitle = typeDetails.title;
+          const typeDescription = typeDetails.description;
+          const isChecked = filter.isFilterSet(settings, type);
+          const count = filter.getFilterCount(notifications, type);
+
+          return (
+            <Checkbox
+              key={type as string}
+              name={typeTitle}
+              label={typeTitle}
+              checked={isChecked}
+              onChange={(evt) =>
+                updateFilter(filterSetting, type, evt.target.checked)
+              }
+              tooltip={typeDescription ? <Text>{typeDescription}</Text> : null}
+              disabled={
+                filter.requiresDetailsNotifications &&
+                !settings.detailedNotifications
+              }
+              counter={count}
+            />
+          );
+        })}
+      </Stack>
+    </fieldset>
+  );
+};

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

@@ -1,13 +1,11 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { mockAccountNotifications } from '../../__mocks__/notifications-mocks';
 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
@@ -24,62 +22,4 @@ describe('renderer/components/filters/ReasonFilter.tsx', () => {
 
     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

@@ -1,48 +1,20 @@
-import { type FC, useContext } from 'react';
+import type { FC } from 'react';
 
 import { NoteIcon } from '@primer/octicons-react';
-import { Stack, Text } from '@primer/react';
+import { 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';
+import { reasonFilter } from '../../utils/notifications/filters';
+import { FilterSection } from './FilterSection';
 
 export const ReasonFilter: FC = () => {
-  const { updateFilter, settings, notifications } = useContext(AppContext);
-
   return (
-    <fieldset id="filter-reasons">
-      <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>
+    <FilterSection
+      id="filter-reasons"
+      title="Reason"
+      icon={NoteIcon}
+      filter={reasonFilter}
+      filterSetting="filterReasons"
+      tooltip={<Text>Filter notifications by reason.</Text>}
+    />
   );
 };