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