diff --git a/src/components/Repository.test.tsx b/src/components/Repository.test.tsx
index 58a8fdb0e..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,14 +52,29 @@ describe('components/Repository.tsx', () => {
);
});
+ it('should unsubscribe from the repository', () => {
+ const { getByTitle } = render(
+
+
+ ,
+ );
+
+ 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(
,
);
- fireEvent.click(getByRole('button'));
+ fireEvent.click(getByTitle('Mark Repository as Read'));
expect(markRepoNotifications).toHaveBeenCalledWith(
'manosim/notifications-test',
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 = ({
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 = ({
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 = ({
{repoName}
-
+
+
+
+