feat: mark repository as done

Author: adufr

src/components/Repository.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext } from 'react';
-import { ReadIcon } from '@primer/octicons-react';
+import { ReadIcon, CheckIcon } 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, markRepoNotificationsDone } =
+    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 markRepoAsDone = useCallback(() => {
+    const repoSlug = repoNotifications[0].repository.full_name;
+    markRepoNotificationsDone(repoSlug, hostname);
+  }, [repoNotifications, hostname]);
+
   const avatarUrl = repoNotifications[0].repository.owner.avatar_url;
 
   return (
@@ -40,7 +46,17 @@ 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-green-500"
+            title="Mark Repository as Done"
+            onClick={markRepoAsDone}
+          >
+            <CheckIcon size={16} aria-label="Mark Repository as Done" />
+          </button>
+
+          <div className="w-[14px]" />
+
           <button
             className="focus:outline-none h-full hover:text-green-500"
             title="Mark Repository as Read"

src/context/App.tsx

@@ -56,6 +56,7 @@ interface AppContextState {
   markNotificationDone: (id: string, hostname: string) => Promise<void>;
   unsubscribeNotification: (id: string, hostname: string) => Promise<void>;
   markRepoNotifications: (id: string, hostname: string) => Promise<void>;
+  markRepoNotificationsDone: (id: string, hostname: string) => Promise<void>;
 
   settings: SettingsState;
   updateSetting: (name: keyof SettingsState, value: any) => void;
@@ -75,6 +76,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     markNotificationDone,
     unsubscribeNotification,
     markRepoNotifications,
+    markRepoNotificationsDone,
   } = useNotifications(settings.colors);
 
   useEffect(() => {
@@ -197,6 +199,12 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     [accounts, notifications],
   );
 
+  const markRepoNotificationsDoneWithAccounts = useCallback(
+    async (repoSlug: string, hostname: string) =>
+      await markRepoNotificationsDone(accounts, repoSlug, hostname),
+    [accounts, notifications],
+  );
+
   return (
     <AppContext.Provider
       value={{
@@ -215,6 +223,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         markNotificationDone: markNotificationDoneWithAccounts,
         unsubscribeNotification: unsubscribeNotificationWithAccounts,
         markRepoNotifications: markRepoNotificationsWithAccounts,
+        markRepoNotificationsDone: markRepoNotificationsDoneWithAccounts,
 
         settings,
         updateSetting,

src/hooks/useNotifications.ts

@@ -43,6 +43,11 @@ interface NotificationsState {
     repoSlug: string,
     hostname: string,
   ) => Promise<void>;
+  markRepoNotificationsDone: (
+    accounts: AuthState,
+    repoSlug: string,
+    hostname: string,
+  ) => Promise<void>;
   isFetching: boolean;
   requestFailed: boolean;
 }
@@ -312,6 +317,47 @@ export const useNotifications = (colors: boolean): NotificationsState => {
     [notifications],
   );
 
+  const markRepoNotificationsDone = useCallback(
+    async (accounts, repoSlug, hostname) => {
+      setIsFetching(true);
+
+      try {
+        const accountIndex = notifications.findIndex(
+          (accountNotifications) => accountNotifications.hostname === hostname,
+        );
+
+        if (accountIndex !== -1) {
+          const notificationsToRemove = notifications[
+            accountIndex
+          ].notifications.filter(
+            (notification) => notification.repository.full_name === repoSlug,
+          );
+
+          for (const notification of notificationsToRemove) {
+            await markNotificationDone(
+              accounts,
+              notification.id,
+              notifications[accountIndex].hostname,
+            );
+          }
+        }
+
+        const updatedNotifications = removeNotifications(
+          repoSlug,
+          notifications,
+          hostname,
+        );
+
+        setNotifications(updatedNotifications);
+        setTrayIconColor(updatedNotifications);
+        setIsFetching(false);
+      } catch (err) {
+        setIsFetching(false);
+      }
+    },
+    [notifications],
+  );
+
   return {
     isFetching,
     requestFailed,
@@ -322,5 +368,6 @@ export const useNotifications = (colors: boolean): NotificationsState => {
     markNotificationDone,
     unsubscribeNotification,
     markRepoNotifications,
+    markRepoNotificationsDone,
   };
 };