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}
-
+
+
+