Merge ba81d6d into 665d7a5

src/components/AccountNotifications.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import { mockGitHubCloudAccount } from '../__mocks__/state-mocks';
 import { mockGitHubNotifications } from '../utils/api/__mocks__/response-mocks';
 import { AccountNotifications } from './AccountNotifications';
 
@@ -9,7 +10,7 @@ jest.mock('./Repository', () => ({
 describe('components/AccountNotifications.tsx', () => {
   it('should render itself (github.com with notifications)', () => {
     const props = {
-      hostname: 'github.com',
+      account: mockGitHubCloudAccount,
       notifications: mockGitHubNotifications,
       showAccountHostname: true,
     };
@@ -20,7 +21,7 @@ describe('components/AccountNotifications.tsx', () => {
 
   it('should render itself (github.com without notifications)', () => {
     const props = {
-      hostname: 'github.com',
+      account: mockGitHubCloudAccount,
       notifications: [],
       showAccountHostname: true,
     };

src/components/AccountNotifications.tsx

@@ -1,15 +1,18 @@
 import { ChevronDownIcon, ChevronLeftIcon } from '@primer/octicons-react';
+import type { Account } from '../types';
 import type { Notification } from '../typesGitHub';
+import { openProfile } from '../utils/helpers';
 import { RepositoryNotifications } from './Repository';
+import { PlatformIcon } from './icons/PlatformIcon';
 
 interface IProps {
-  hostname: string;
+  account: Account;
   notifications: Notification[];
   showAccountHostname: boolean;
 }
 
 export const AccountNotifications = (props: IProps) => {
-  const { hostname, showAccountHostname, notifications } = props;
+  const { account, showAccountHostname, notifications } = props;
 
   const groupedNotifications = Object.values(
     notifications.reduce(
@@ -28,9 +31,20 @@ export const AccountNotifications = (props: IProps) => {
   return (
     <>
       {showAccountHostname && (
-        <div className="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm">
-          {hostname}
-          <Chevron size={20} />
+        <div className="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold">
+          <div>
+            <PlatformIcon type={account.platform} size={16} />
+            <button
+              type="button"
+              title="Open Profile"
+              onClick={() => openProfile(account)}
+            >
+              @{account.user.login}
+            </button>
+          </div>
+          <div>
+            <Chevron size={20} />
+          </div>
         </div>
       )}
 
@@ -40,7 +54,7 @@ export const AccountNotifications = (props: IProps) => {
         return (
           <RepositoryNotifications
             key={repoSlug}
-            hostname={hostname}
+            hostname={account.hostname}
             repoName={repoSlug}
             repoNotifications={repoNotifications}
           />

src/components/NotificationRow.tsx

@@ -53,18 +53,18 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
     openInBrowser(notification);
 
     if (settings.markAsDoneOnOpen) {
-      markNotificationDone(notification.id, hostname);
+      markNotificationDone(notification);
     } else {
       // no need to mark as read, github does it by default when opening it
-      removeNotificationFromState(settings, notification.id, hostname);
+      removeNotificationFromState(settings, notification);
     }
   }, [notifications, notification, auth, settings]); // notifications required here to prevent weird state issues
 
   const unsubscribeFromThread = (event: MouseEvent<HTMLElement>) => {
     // Don't trigger onClick of parent element.
     event.stopPropagation();
 
-    unsubscribeNotification(notification.id, hostname);
+    unsubscribeNotification(notification);
   };
 
   const openUserProfile = (
@@ -237,7 +237,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
           type="button"
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Done"
-          onClick={() => markNotificationDone(notification.id, hostname)}
+          onClick={() => markNotificationDone(notification)}
         >
           <CheckIcon size={16} aria-label="Mark as Done" />
         </button>
@@ -255,7 +255,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
           type="button"
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Read"
-          onClick={() => markNotificationRead(notification.id, hostname)}
+          onClick={() => markNotificationRead(notification)}
         >
           <ReadIcon size={14} aria-label="Mark as Read" />
         </button>

src/components/Repository.test.tsx

@@ -1,7 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { shell } from 'electron';
 import { AppContext } from '../context/App';
-import { mockGitHubNotifications } from '../utils/api/__mocks__/response-mocks';
+import {
+  mockGitHubNotifications,
+  mockSingleNotification,
+} from '../utils/api/__mocks__/response-mocks';
 import { RepositoryNotifications } from './Repository';
 
 jest.mock('./NotificationRow', () => ({
@@ -57,10 +60,7 @@ describe('components/Repository.tsx', () => {
 
     fireEvent.click(screen.getByTitle('Mark Repository as Read'));
 
-    expect(markRepoNotifications).toHaveBeenCalledWith(
-      'gitify-app/notifications-test',
-      'github.com',
-    );
+    expect(markRepoNotifications).toHaveBeenCalledWith(mockSingleNotification);
   });
 
   it('should mark a repo as done', () => {
@@ -73,8 +73,7 @@ describe('components/Repository.tsx', () => {
     fireEvent.click(screen.getByTitle('Mark Repository as Done'));
 
     expect(markRepoNotificationsDone).toHaveBeenCalledWith(
-      'gitify-app/notifications-test',
-      'github.com',
+      mockSingleNotification,
     );
   });
 

src/components/Repository.tsx

@@ -26,13 +26,11 @@ export const RepositoryNotifications: FC<IProps> = ({
   }, [repoNotifications]);
 
   const markRepoAsRead = useCallback(() => {
-    const repoSlug = repoNotifications[0].repository.full_name;
-    markRepoNotifications(repoSlug, hostname);
+    markRepoNotifications(repoNotifications[0]);
   }, [repoNotifications, hostname]);
 
   const markRepoAsDone = useCallback(() => {
-    const repoSlug = repoNotifications[0].repository.full_name;
-    markRepoNotificationsDone(repoSlug, hostname);
+    markRepoNotificationsDone(repoNotifications[0]);
   }, [repoNotifications, hostname]);
 
   const avatarUrl = repoNotifications[0].repository.owner.avatar_url;