feat: add "Unsubscribe from repository" button

src/components/Repository.test.tsx

@@ -13,6 +13,7 @@ jest.mock('./NotificationRow', () => ({
 }));
 
 describe('components/Repository.tsx', () => {
+  const unsubscribeRepository = jest.fn();
   const markRepoNotifications = jest.fn();
 
   const props = {
@@ -51,14 +52,29 @@ describe('components/Repository.tsx', () => {
     );
   });
 
+  it('should unsubscribe from the repository', () => {
+    const { getByTitle } = render(
+      <AppContext.Provider value={{ unsubscribeRepository }}>
+        <RepositoryNotifications {...props} />
+      </AppContext.Provider>,
+    );
+
+    fireEvent.click(getByTitle('Unsubscribe'));
+
+    expect(unsubscribeRepository).toHaveBeenCalledWith(
+      'manosim/notifications-test',
+      'github.com',
+    );
+  });
+
   it('should mark a repo as read', function () {
-    const { getByRole } = render(
+    const { getByTitle } = render(
       <AppContext.Provider value={{ markRepoNotifications }}>
         <RepositoryNotifications {...props} />
       </AppContext.Provider>,
     );
 
-    fireEvent.click(getByRole('button'));
+    fireEvent.click(getByTitle('Mark Repository as Read'));
 
     expect(markRepoNotifications).toHaveBeenCalledWith(
       'manosim/notifications-test',

src/components/Repository.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext } from 'react';
-import { ReadIcon } from '@primer/octicons-react';
+import { BellSlashIcon, ReadIcon } from '@primer/octicons-react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import { AppContext } from '../context/App';
@@ -18,7 +18,8 @@ export const RepositoryNotifications: React.FC<IProps> = ({
   repoNotifications,
   hostname,
 }) => {
-  const { markRepoNotifications } = useContext(AppContext);
+  const { markRepoNotifications, unsubscribeRepository } =
+    useContext(AppContext);
 
   const openBrowser = useCallback(() => {
     const url = repoNotifications[0].repository.html_url;
@@ -30,6 +31,11 @@ export const RepositoryNotifications: React.FC<IProps> = ({
     markRepoNotifications(repoSlug, hostname);
   }, [repoNotifications, hostname]);
 
+  const unsubscribe = useCallback(() => {
+    const repoSlug = repoNotifications[0].repository.full_name;
+    unsubscribeRepository(repoSlug, hostname);
+  }, [repoNotifications, hostname]);
+
   const avatarUrl = repoNotifications[0].repository.owner.avatar_url;
 
   return (
@@ -40,7 +46,15 @@ export const RepositoryNotifications: React.FC<IProps> = ({
           <span onClick={openBrowser}>{repoName}</span>
         </div>
 
-        <div className="flex justify-center items-center">
+        <div className="flex justify-center items-center gap-2">
+          <button
+            className="focus:outline-none h-full hover:text-red-500"
+            title="Unsubscribe"
+            onClick={unsubscribe}
+          >
+            <BellSlashIcon size={14} aria-label="Unsubscribe" />
+          </button>
+
           <button
             className="focus:outline-none h-full hover:text-green-500"
             title="Mark Repository as Read"

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

@@ -19,8 +19,37 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       </span>
     </div>
     <div
-      className="flex justify-center items-center"
+      className="flex justify-center items-center gap-2"
     >
+      <button
+        className="focus:outline-none h-full hover:text-red-500"
+        onClick={[Function]}
+        title="Unsubscribe"
+      >
+        <svg
+          aria-hidden="false"
+          aria-label="Unsubscribe"
+          className="octicon octicon-bell-slash"
+          fill="currentColor"
+          focusable="false"
+          height={14}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={14}
+        >
+          <path
+            d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+          />
+        </svg>
+      </button>
       <button
         className="focus:outline-none h-full hover:text-green-500"
         onClick={[Function]}

src/context/App.tsx

@@ -55,6 +55,7 @@ interface AppContextState {
   markNotification: (id: string, hostname: string) => Promise<void>;
   markNotificationDone: (id: string, hostname: string) => Promise<void>;
   unsubscribeNotification: (id: string, hostname: string) => Promise<void>;
+  unsubscribeRepository: (repoSlug: string, hostname: string) => Promise<void>;
   markRepoNotifications: (id: string, hostname: string) => Promise<void>;
 
   settings: SettingsState;
@@ -74,6 +75,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     markNotification,
     markNotificationDone,
     unsubscribeNotification,
+    unsubscribeRepository,
     markRepoNotifications,
   } = useNotifications(settings.colors);
 
@@ -191,6 +193,12 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     [accounts, notifications],
   );
 
+  const unsubscribeRepositoryWithAccounts = useCallback(
+    async (repoSlug: string, hostname: string) =>
+      await unsubscribeRepository(accounts, repoSlug, hostname),
+    [accounts, notifications],
+  );
+
   const markRepoNotificationsWithAccounts = useCallback(
     async (repoSlug: string, hostname: string) =>
       await markRepoNotifications(accounts, repoSlug, hostname),
@@ -214,6 +222,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         markNotification: markNotificationWithAccounts,
         markNotificationDone: markNotificationDoneWithAccounts,
         unsubscribeNotification: unsubscribeNotificationWithAccounts,
+        unsubscribeRepository: unsubscribeRepositoryWithAccounts,
         markRepoNotifications: markRepoNotificationsWithAccounts,
 
         settings,

src/hooks/useNotifications.test.ts

@@ -551,6 +551,117 @@ describe('hooks/useNotifications.ts', () => {
     });
   });
 
+  describe('unsubscribeRepository', () => {
+    const repoSlug = 'manosim/notifications-test';
+    const id = 'notification-123';
+
+    describe('github.com', () => {
+      const accounts = { ...mockAccounts, enterpriseAccounts: [] };
+      const hostname = 'github.com';
+
+      it('should unsubscribe from a repository with success - github.com', async () => {
+        // The unsubscribe endpoint call.
+        nock('https://api.github.com/')
+          .put(`/repos/${repoSlug}/subscription`)
+          .reply(200);
+
+        // The mark read endpoint call.
+        nock('https://api.github.com/')
+          .patch(`/notifications/threads/${id}`)
+          .reply(200);
+
+        const { result } = renderHook(() => useNotifications(false));
+
+        act(() => {
+          result.current.unsubscribeRepository(accounts, id, hostname);
+        });
+
+        await waitFor(() => {
+          expect(result.current.isFetching).toBe(false);
+        });
+
+        expect(result.current.notifications.length).toBe(0);
+      });
+
+      it('should unsubscribe from a repository with failure - github.com', async () => {
+        // The unsubscribe endpoint call.
+        nock('https://api.github.com/')
+          .put(`/repos/${repoSlug}/subscription`)
+          .reply(400);
+
+        // The mark read endpoint call.
+        nock('https://api.github.com/')
+          .patch(`/notifications/threads/${id}`)
+          .reply(400);
+
+        const { result } = renderHook(() => useNotifications(false));
+
+        act(() => {
+          result.current.unsubscribeRepository(accounts, id, hostname);
+        });
+
+        await waitFor(() => {
+          expect(result.current.isFetching).toBe(false);
+        });
+
+        expect(result.current.notifications.length).toBe(0);
+      });
+    });
+
+    describe('enterprise', () => {
+      const accounts = { ...mockAccounts, token: null };
+      const hostname = 'github.gitify.io';
+
+      it('should unsubscribe from a notification with success - enterprise', async () => {
+        // The unsubscribe endpoint call.
+        nock('https://github.gitify.io/')
+          .put(`/repos/${repoSlug}/subscription`)
+          .reply(200);
+
+        // The mark read endpoint call.
+        nock('https://github.gitify.io/')
+          .patch(`/notifications/threads/${id}`)
+          .reply(200);
+
+        const { result } = renderHook(() => useNotifications(false));
+
+        act(() => {
+          result.current.unsubscribeRepository(accounts, repoSlug, hostname);
+        });
+
+        await waitFor(() => {
+          expect(result.current.isFetching).toBe(false);
+        });
+
+        expect(result.current.notifications.length).toBe(0);
+      });
+
+      it('should unsubscribe from a notification with failure - enterprise', async () => {
+        // The unsubscribe endpoint call.
+        nock('https://github.gitify.io/')
+          .put(`/repos/${repoSlug}/subscription`)
+          .reply(400);
+
+        // The mark read endpoint call.
+        nock('https://github.gitify.io/')
+          .patch(`/notifications/threads/${id}`)
+          .reply(400);
+
+        const { result } = renderHook(() => useNotifications(false));
+
+        act(() => {
+          result.current.unsubscribeRepository(accounts, repoSlug, hostname);
+        });
+
+        await waitFor(() => {
+          expect(result.current.isFetching).toBe(false);
+        });
+
+        expect(result.current.notifications.length).toBe(0);
+      });
+    });
+  });
+
   describe('markRepoNotifications', () => {
     const repoSlug = 'manosim/gitify';
 

src/hooks/useNotifications.ts

@@ -38,6 +38,11 @@ interface NotificationsState {
     id: string,
     hostname: string,
   ) => Promise<void>;
+  unsubscribeRepository: (
+    accounts: AuthState,
+    repoSlug: string,
+    hostname: string,
+  ) => Promise<void>;
   markRepoNotifications: (
     accounts: AuthState,
     repoSlug: string,
@@ -279,6 +284,30 @@ export const useNotifications = (colors: boolean): NotificationsState => {
     [notifications],
   );
 
+  const unsubscribeRepository = useCallback(
+    async (accounts, repoSlug, hostname) => {
+      setIsFetching(true);
+
+      const isEnterprise = hostname !== Constants.DEFAULT_AUTH_OPTIONS.hostname;
+      const token = isEnterprise
+        ? getEnterpriseAccountToken(hostname, accounts.enterpriseAccounts)
+        : accounts.token;
+
+      try {
+        await apiRequestAuth(
+          `${generateGitHubAPIUrl(hostname)}repos/${repoSlug}/subscription`,
+          'PUT',
+          token,
+          { ignored: true },
+        );
+        await markRepoNotifications(accounts, repoSlug, hostname);
+      } catch (err) {
+        setIsFetching(false);
+      }
+    },
+    [notifications],
+  );
+
   const markRepoNotifications = useCallback(
     async (accounts, repoSlug, hostname) => {
       setIsFetching(true);
@@ -321,6 +350,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
     markNotification,
     markNotificationDone,
     unsubscribeNotification,
+    unsubscribeRepository,
     markRepoNotifications,
   };
 };