feat: notification filters

src/__mocks__/state-mocks.ts

@@ -86,6 +86,7 @@ export const mockSettings: SettingsState = {
   showPills: true,
   keyboardShortcut: true,
   groupBy: GroupBy.REPOSITORY,
+  filterReasons: '',
 };
 
 export const mockState: GitifyState = {

src/app.tsx

@@ -10,6 +10,7 @@ import { Loading } from './components/Loading';
 import { Sidebar } from './components/Sidebar';
 import { AppContext, AppProvider } from './context/App';
 import { AccountsRoute } from './routes/Accounts';
+import { FiltersRoute } from './routes/Filters';
 import { LoginRoute } from './routes/Login';
 import { LoginWithOAuthApp } from './routes/LoginWithOAuthApp';
 import { LoginWithPersonalAccessToken } from './routes/LoginWithPersonalAccessToken';
@@ -43,6 +44,14 @@ export const App = () => {
                 </RequireAuth>
               }
             />
+            <Route
+              path="/filters"
+              element={
+                <RequireAuth>
+                  <FiltersRoute />
+                </RequireAuth>
+              }
+            />
             <Route
               path="/settings"
               element={

src/components/Sidebar.test.tsx

@@ -45,7 +45,11 @@ describe('components/Sidebar.tsx', () => {
   it('should render itself & its children (logged out)', () => {
     const tree = render(
       <AppContext.Provider
-        value={{ isLoggedIn: false, notifications: mockAccountNotifications }}
+        value={{
+          isLoggedIn: false,
+          notifications: mockAccountNotifications,
+          settings: mockSettings,
+        }}
       >
         <MemoryRouter>
           <Sidebar />
@@ -62,6 +66,7 @@ describe('components/Sidebar.tsx', () => {
           value={{
             isLoggedIn: true,
             notifications: [],
+            settings: mockSettings,
             fetchNotifications,
             status: 'success',
           }}
@@ -83,6 +88,8 @@ describe('components/Sidebar.tsx', () => {
           value={{
             isLoggedIn: true,
             notifications: [],
+            settings: mockSettings,
+
             fetchNotifications,
             status: 'loading',
           }}
@@ -99,10 +106,54 @@ describe('components/Sidebar.tsx', () => {
     });
   });
 
+  describe('Filters', () => {
+    it('go to the filters route', () => {
+      render(
+        <AppContext.Provider
+          value={{
+            isLoggedIn: true,
+            notifications: [],
+            settings: mockSettings,
+          }}
+        >
+          <MemoryRouter>
+            <Sidebar />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+      fireEvent.click(screen.getByTitle('Filters'));
+      expect(mockNavigate).toHaveBeenCalledWith('/filters');
+    });
+
+    it('go to the home if filters path already shown', () => {
+      render(
+        <AppContext.Provider
+          value={{
+            isLoggedIn: true,
+            notifications: [],
+            settings: mockSettings,
+          }}
+        >
+          <MemoryRouter initialEntries={['/filters']}>
+            <Sidebar />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+      fireEvent.click(screen.getByTitle('Filters'));
+      expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true });
+    });
+  });
+
   describe('Settings', () => {
     it('go to the settings route', () => {
       render(
-        <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
+        <AppContext.Provider
+          value={{
+            isLoggedIn: true,
+            notifications: [],
+            settings: mockSettings,
+          }}
+        >
           <MemoryRouter>
             <Sidebar />
           </MemoryRouter>
@@ -114,7 +165,13 @@ describe('components/Sidebar.tsx', () => {
 
     it('go to the home if settings path already shown', () => {
       render(
-        <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
+        <AppContext.Provider
+          value={{
+            isLoggedIn: true,
+            notifications: [],
+            settings: mockSettings,
+          }}
+        >
           <MemoryRouter initialEntries={['/settings']}>
             <Sidebar />
           </MemoryRouter>
@@ -133,6 +190,7 @@ describe('components/Sidebar.tsx', () => {
         value={{
           isLoggedIn: true,
           notifications: mockAccountNotifications,
+          settings: mockSettings,
         }}
       >
         <MemoryRouter>
@@ -155,6 +213,7 @@ describe('components/Sidebar.tsx', () => {
         value={{
           isLoggedIn: true,
           notifications: mockAccountNotifications,
+          settings: mockSettings,
         }}
       >
         <MemoryRouter>
@@ -177,6 +236,7 @@ describe('components/Sidebar.tsx', () => {
         value={{
           isLoggedIn: true,
           notifications: mockAccountNotifications,
+          settings: mockSettings,
         }}
       >
         <MemoryRouter>
@@ -195,7 +255,9 @@ describe('components/Sidebar.tsx', () => {
     const quitAppMock = jest.spyOn(comms, 'quitApp');
 
     render(
-      <AppContext.Provider value={{ isLoggedIn: false, notifications: [] }}>
+      <AppContext.Provider
+        value={{ isLoggedIn: false, notifications: [], settings: mockSettings }}
+      >
         <MemoryRouter>
           <Sidebar />
         </MemoryRouter>
@@ -209,7 +271,9 @@ describe('components/Sidebar.tsx', () => {
     const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
 
     render(
-      <AppContext.Provider value={{ isLoggedIn: false, notifications: [] }}>
+      <AppContext.Provider
+        value={{ isLoggedIn: false, notifications: [], settings: mockSettings }}
+      >
         <MemoryRouter>
           <Sidebar />
         </MemoryRouter>
@@ -225,7 +289,13 @@ describe('components/Sidebar.tsx', () => {
   describe('should render the notifications icon', () => {
     it('when there are 0 notifications', () => {
       render(
-        <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
+        <AppContext.Provider
+          value={{
+            isLoggedIn: true,
+            notifications: [],
+            settings: mockSettings,
+          }}
+        >
           <MemoryRouter>
             <Sidebar />
           </MemoryRouter>
@@ -244,6 +314,7 @@ describe('components/Sidebar.tsx', () => {
           value={{
             isLoggedIn: true,
             notifications: mockAccountNotifications,
+            settings: mockSettings,
           }}
         >
           <MemoryRouter>

src/components/Sidebar.tsx

@@ -1,5 +1,6 @@
 import {
   BellIcon,
+  FilterIcon,
   GearIcon,
   GitPullRequestIcon,
   IssueOpenedIcon,
@@ -11,6 +12,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { AppContext } from '../context/App';
 import { Size } from '../types';
 import { quitApp } from '../utils/comms';
+import { getFilterCount } from '../utils/helpers';
 import {
   openGitHubIssues,
   openGitHubNotifications,
@@ -25,9 +27,17 @@ export const Sidebar: FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const { notifications, fetchNotifications, isLoggedIn, status } =
+  const { notifications, fetchNotifications, isLoggedIn, status, settings } =
     useContext(AppContext);
 
+  const toggleFilters = () => {
+    if (location.pathname.startsWith('/filters')) {
+      navigate('/', { replace: true });
+    } else {
+      navigate('/filters');
+    }
+  };
+
   const toggleSettings = () => {
     if (location.pathname.startsWith('/settings')) {
       navigate('/', { replace: true });
@@ -45,6 +55,10 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
+  const filterCount = useMemo(() => {
+    return getFilterCount(settings);
+  }, [settings]);
+
   return (
     <div className="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar">
       <div className="flex flex-1 flex-col items-center py-4">
@@ -90,6 +104,14 @@ export const Sidebar: FC = () => {
               onClick={() => refreshNotifications()}
             />
 
+            <SidebarButton
+              title="Filters"
+              icon={FilterIcon}
+              size={Size.MEDIUM}
+              metric={filterCount}
+              onClick={() => toggleFilters()}
+            />
+
             <SidebarButton
               title="Settings"
               icon={GearIcon}

src/context/App.test.tsx

@@ -381,6 +381,7 @@ describe('context/App.tsx', () => {
           showPills: true,
           keyboardShortcut: true,
           groupBy: 'REPOSITORY',
+          filterReasons: '',
         } as SettingsState,
       });
     });
@@ -434,6 +435,7 @@ describe('context/App.tsx', () => {
           showPills: true,
           keyboardShortcut: true,
           groupBy: 'REPOSITORY',
+          filterReasons: '',
         } as SettingsState,
       });
     });

src/context/App.tsx

@@ -64,6 +64,7 @@ export const defaultSettings: SettingsState = {
   showPills: true,
   keyboardShortcut: true,
   groupBy: GroupBy.REPOSITORY,
+  filterReasons: '',
 };
 
 interface AppContextState {