diff --git a/src/components/Repository.test.tsx b/src/components/Repository.test.tsx index 58a8fdb0e..9eaa7aec5 100644 --- a/src/components/Repository.test.tsx +++ b/src/components/Repository.test.tsx @@ -14,6 +14,7 @@ jest.mock('./NotificationRow', () => ({ describe('components/Repository.tsx', () => { const markRepoNotifications = jest.fn(); + const markRepoNotificationsDone = jest.fn(); const props = { hostname: 'github.com', @@ -52,17 +53,32 @@ describe('components/Repository.tsx', () => { }); it('should mark a repo as read', function () { - const { getByRole } = render( + const { getByTitle } = render( , ); - fireEvent.click(getByRole('button')); + fireEvent.click(getByTitle('Mark Repository as Read')); expect(markRepoNotifications).toHaveBeenCalledWith( 'manosim/notifications-test', 'github.com', ); }); + + it('should mark a repo as done', function () { + const { getByTitle } = render( + + + , + ); + + fireEvent.click(getByTitle('Mark Repository as Done')); + + expect(markRepoNotificationsDone).toHaveBeenCalledWith( + 'manosim/notifications-test', + 'github.com', + ); + }); }); diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx index 3cdb5820a..7cf0ed8ca 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 { 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 = ({ 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 = ({ 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 = ({ {repoName} -
+
+ + +
+
+ +