From bfb7aeecad100ad2ef16f212ed4c23032a6cf9cf Mon Sep 17 00:00:00 2001
From: Arthur Dufour <dufourarthur.perso@gmail.com>
Date: Sun, 18 Feb 2024 09:35:48 +0100
Subject: [PATCH 1/4] feat: implement `unsubscribeRepository`

---
 src/components/Repository.tsx | 20 +++++++++++++++++---
 src/context/App.tsx           |  9 +++++++++
 src/hooks/useNotifications.ts | 30 ++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index 3cdb5820a..f4cd1737f 100644
--- a/src/components/Repository.tsx
+++ b/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"
diff --git a/src/context/App.tsx b/src/context/App.tsx
index d009a1604..db958b8aa 100644
--- a/src/context/App.tsx
+++ b/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,
diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts
index 41875fb8b..b3157b762 100644
--- a/src/hooks/useNotifications.ts
+++ b/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,
   };
 };

From 1fcb1eabae738aad0fdd70b1bab5bc9739a89b7d Mon Sep 17 00:00:00 2001
From: Arthur Dufour <dufourarthur.perso@gmail.com>
Date: Sun, 18 Feb 2024 09:36:21 +0100
Subject: [PATCH 2/4] tests: fix existing test

---
 src/components/Repository.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Repository.test.tsx b/src/components/Repository.test.tsx
index 58a8fdb0e..decc82f8f 100644
--- a/src/components/Repository.test.tsx
+++ b/src/components/Repository.test.tsx
@@ -52,13 +52,13 @@ describe('components/Repository.tsx', () => {
   });
 
   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',

From 5e9f7b742631b11ca61d0b21ac396f0abe986e56 Mon Sep 17 00:00:00 2001
From: Arthur Dufour <dufourarthur.perso@gmail.com>
Date: Sun, 18 Feb 2024 09:42:50 +0100
Subject: [PATCH 3/4] tests: add Repository component tests

---
 src/components/Repository.test.tsx            | 16 ++++++++++
 .../__snapshots__/Repository.test.tsx.snap    | 31 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/components/Repository.test.tsx b/src/components/Repository.test.tsx
index decc82f8f..752eb82e6 100644
--- a/src/components/Repository.test.tsx
+++ b/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,6 +52,21 @@ 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 { getByTitle } = render(
       <AppContext.Provider value={{ markRepoNotifications }}>
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index 2960f4ad7..e3d078f74 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/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]}

From 517897cc730d335c6a1e5590b8b97a7cf473884f Mon Sep 17 00:00:00 2001
From: Arthur Dufour <dufourarthur.perso@gmail.com>
Date: Sun, 18 Feb 2024 09:43:05 +0100
Subject: [PATCH 4/4] tests: add `unsubscribeRepository()` tests

---
 src/hooks/useNotifications.test.ts | 111 +++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)

diff --git a/src/hooks/useNotifications.test.ts b/src/hooks/useNotifications.test.ts
index c6f2b753d..71c195c7a 100644
--- a/src/hooks/useNotifications.test.ts
+++ b/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';