Skip to content

Commit 7c62dd8

Browse files
setchyafonsojramos
setchy
and
afonsojramos
authored
refactor: consolidate open links fns (#1211)
* refactor: consolidate open links fns * Update src/utils/links.test.ts Co-authored-by: Afonso Jorge Ramos <[email protected]> --------- Co-authored-by: Afonso Jorge Ramos <[email protected]>
1 parent fb99d49 commit 7c62dd8

14 files changed

+227
-116
lines changed

‎src/components/NotificationRow.test.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { AppContext } from '../context/App';
44
import type { Milestone, UserType } from '../typesGitHub';
55
import { mockSingleNotification } from '../utils/api/__mocks__/response-mocks';
66
import * as comms from '../utils/comms';
7-
import * as helpers from '../utils/helpers';
7+
import * as links from '../utils/links';
88
import { NotificationRow } from './NotificationRow';
99

1010
describe('components/NotificationRow.tsx', () => {
1111
beforeEach(() => {
12-
jest.spyOn(helpers, 'openInBrowser');
12+
jest.spyOn(links, 'openNotification');
1313
});
1414

1515
afterEach(() => {
@@ -341,7 +341,7 @@ describe('components/NotificationRow.tsx', () => {
341341
);
342342

343343
fireEvent.click(screen.getByRole('main'));
344-
expect(helpers.openInBrowser).toHaveBeenCalledTimes(1);
344+
expect(links.openNotification).toHaveBeenCalledTimes(1);
345345
expect(removeNotificationFromState).toHaveBeenCalledTimes(1);
346346
});
347347

@@ -366,7 +366,7 @@ describe('components/NotificationRow.tsx', () => {
366366
);
367367

368368
fireEvent.keyDown(screen.getByRole('main'));
369-
expect(helpers.openInBrowser).toHaveBeenCalledTimes(1);
369+
expect(links.openNotification).toHaveBeenCalledTimes(1);
370370
expect(removeNotificationFromState).toHaveBeenCalledTimes(1);
371371
});
372372

@@ -391,7 +391,7 @@ describe('components/NotificationRow.tsx', () => {
391391
);
392392

393393
fireEvent.click(screen.getByRole('main'));
394-
expect(helpers.openInBrowser).toHaveBeenCalledTimes(1);
394+
expect(links.openNotification).toHaveBeenCalledTimes(1);
395395
expect(markNotificationDone).toHaveBeenCalledTimes(1);
396396
});
397397

‎src/components/NotificationRow.tsx

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,22 @@ import {
88
ReadIcon,
99
TagIcon,
1010
} from '@primer/octicons-react';
11-
import {
12-
type FC,
13-
type KeyboardEvent,
14-
type MouseEvent,
15-
useCallback,
16-
useContext,
17-
} from 'react';
11+
import { type FC, type MouseEvent, useCallback, useContext } from 'react';
1812

1913
import { AppContext } from '../context/App';
2014
import { PILL_CLASS_NAME } from '../styles/gitify';
2115
import { IconColor } from '../types';
2216
import type { Notification } from '../typesGitHub';
23-
import { openExternalLink } from '../utils/comms';
2417
import {
2518
formatForDisplay,
2619
formatNotificationUpdatedAt,
27-
openInBrowser,
2820
} from '../utils/helpers';
2921
import {
3022
getNotificationTypeIcon,
3123
getNotificationTypeIconColor,
3224
getPullRequestReviewIcon,
3325
} from '../utils/icons';
26+
import { openNotification, openUserProfile } from '../utils/links';
3427
import { formatReason } from '../utils/reason';
3528

3629
interface IProps {
@@ -49,8 +42,8 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
4942
notifications,
5043
} = useContext(AppContext);
5144

52-
const openNotification = useCallback(() => {
53-
openInBrowser(notification);
45+
const handleNotification = useCallback(() => {
46+
openNotification(notification);
5447

5548
if (settings.markAsDoneOnOpen) {
5649
markNotificationDone(notification.id, hostname);
@@ -67,15 +60,6 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
6760
unsubscribeNotification(notification.id, hostname);
6861
};
6962

70-
const openUserProfile = (
71-
event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,
72-
) => {
73-
// Don't trigger onClick of parent element.
74-
event.stopPropagation();
75-
76-
openExternalLink(notification.subject.user.html_url);
77-
};
78-
7963
const reason = formatReason(notification.reason);
8064
const NotificationIcon = getNotificationTypeIcon(notification.subject);
8165
const iconColor = getNotificationTypeIconColor(notification.subject);
@@ -116,8 +100,8 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
116100

117101
<div
118102
className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
119-
onClick={() => openNotification()}
120-
onKeyDown={() => openNotification()}
103+
onClick={() => handleNotification()}
104+
onKeyDown={() => handleNotification()}
121105
>
122106
<div
123107
className="mb-1 text-sm truncate cursor-pointer"
@@ -129,10 +113,14 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
129113

130114
<div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
131115
{notification.subject.user ? (
132-
<div
116+
<button
117+
type="button"
133118
title="View User Profile"
134-
onClick={openUserProfile}
135-
onKeyDown={openUserProfile}
119+
onClick={(event: MouseEvent<HTMLElement>) => {
120+
// Don't trigger onClick of parent element.
121+
event.stopPropagation();
122+
openUserProfile(notification.subject.user);
123+
}}
136124
className="flex-shrink-0"
137125
>
138126
<img
@@ -141,7 +129,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
141129
title={notification.subject.user.login}
142130
alt={`${notification.subject.user.login}'s avatar`}
143131
/>
144-
</div>
132+
</button>
145133
) : (
146134
<div>
147135
<FeedPersonIcon

‎src/components/Repository.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type FC, useCallback, useContext } from 'react';
33
import { CSSTransition, TransitionGroup } from 'react-transition-group';
44
import { AppContext } from '../context/App';
55
import type { Notification } from '../typesGitHub';
6-
import { openExternalLink } from '../utils/comms';
6+
import { openRepository } from '../utils/links';
77
import { NotificationRow } from './NotificationRow';
88

99
interface IProps {
@@ -20,11 +20,6 @@ export const RepositoryNotifications: FC<IProps> = ({
2020
const { markRepoNotificationsRead, markRepoNotificationsDone } =
2121
useContext(AppContext);
2222

23-
const openBrowser = useCallback(() => {
24-
const url = repoNotifications[0].repository.html_url;
25-
openExternalLink(url);
26-
}, [repoNotifications]);
27-
2823
const markRepoAsRead = useCallback(() => {
2924
const repoSlug = repoNotifications[0].repository.full_name;
3025
markRepoNotificationsRead(repoSlug, hostname);
@@ -53,8 +48,8 @@ export const RepositoryNotifications: FC<IProps> = ({
5348
)}
5449
<span
5550
className="cursor-pointer truncate"
56-
onClick={openBrowser}
57-
onKeyDown={openBrowser}
51+
onClick={() => openRepository(repoNotifications[0].repository)}
52+
onKeyDown={() => openRepository(repoNotifications[0].repository)}
5853
>
5954
{repoName}
6055
</span>

‎src/components/Sidebar.tsx

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import {
44
SyncIcon,
55
XCircleIcon,
66
} from '@primer/octicons-react';
7-
import { type FC, useCallback, useContext, useMemo } from 'react';
7+
import { type FC, useContext, useMemo } from 'react';
88
import { useLocation, useNavigate } from 'react-router-dom';
99
import { Logo } from '../components/Logo';
1010
import { AppContext } from '../context/App';
1111
import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
12-
import { openExternalLink, quitApp } from '../utils/comms';
13-
import { Constants } from '../utils/constants';
12+
import { quitApp } from '../utils/comms';
13+
import { openGitHubNotifications, openGitifyRepository } from '../utils/links';
1414
import { getNotificationCount } from '../utils/notifications';
1515

1616
export const Sidebar: FC = () => {
@@ -20,14 +20,6 @@ export const Sidebar: FC = () => {
2020
const { notifications, fetchNotifications, isLoggedIn, status } =
2121
useContext(AppContext);
2222

23-
const onOpenBrowser = useCallback(() => {
24-
openExternalLink(`https://github.com/${Constants.REPO_SLUG}`);
25-
}, []);
26-
27-
const onOpenGitHubNotifications = useCallback(() => {
28-
openExternalLink('https://github.com/notifications');
29-
}, []);
30-
3123
const toggleSettings = () => {
3224
if (location.pathname.startsWith('/settings')) {
3325
navigate('/', { replace: true });
@@ -47,7 +39,7 @@ export const Sidebar: FC = () => {
4739
type="button"
4840
className="w-5 my-3 mx-auto cursor-pointer outline-none"
4941
title="Open Gitify on GitHub"
50-
onClick={onOpenBrowser}
42+
onClick={() => openGitifyRepository()}
5143
data-testid="gitify-logo"
5244
>
5345
<Logo aria-label="Open Gitify" />
@@ -58,7 +50,7 @@ export const Sidebar: FC = () => {
5850
className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
5951
notificationsCount > 0 ? 'text-green-500' : 'text-white'
6052
}`}
61-
onClick={onOpenGitHubNotifications}
53+
onClick={() => openGitHubNotifications()}
6254
title={`${notificationsCount} Unread Notifications`}
6355
>
6456
<BellIcon

‎src/components/__snapshots__/NotificationRow.test.tsx.snap

Lines changed: 12 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/routes/Accounts.tsx

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,17 @@ import { AuthMethodIcon } from '../components/icons/AuthMethodIcon';
1515
import { PlatformIcon } from '../components/icons/PlatformIcon';
1616
import { BUTTON_CLASS_NAME } from '../styles/gitify';
1717
import type { Account } from '../types';
18-
import { getAccountUUID, getDeveloperSettingsURL } from '../utils/auth/utils';
19-
import {
20-
openExternalLink,
21-
updateTrayIcon,
22-
updateTrayTitle,
23-
} from '../utils/comms';
18+
import { getAccountUUID } from '../utils/auth/utils';
19+
import { updateTrayIcon, updateTrayTitle } from '../utils/comms';
2420
import {
2521
isOAuthAppLoggedIn,
2622
isPersonalAccessTokenLoggedIn,
2723
} from '../utils/helpers';
24+
import {
25+
openAccountProfile,
26+
openDeveloperSettings,
27+
openHost,
28+
} from '../utils/links';
2829

2930
export const AccountsRoute: FC = () => {
3031
const { auth, logoutFromAccount } = useContext(AppContext);
@@ -37,21 +38,6 @@ export const AccountsRoute: FC = () => {
3738
updateTrayTitle();
3839
}, []);
3940

40-
const openProfile = (account: Account) => {
41-
const url = new URL(`https://${account.hostname}`);
42-
url.pathname = account.user.login;
43-
openExternalLink(url.toString());
44-
};
45-
46-
const openHost = (hostname: string) => {
47-
openExternalLink(`https://${hostname}`);
48-
};
49-
50-
const openDeveloperSettings = (account: Account) => {
51-
const url = getDeveloperSettingsURL(account);
52-
openExternalLink(url);
53-
};
54-
5541
const loginWithPersonalAccessToken = useCallback(() => {
5642
return navigate('/login-personal-access-token', { replace: true });
5743
}, []);
@@ -95,7 +81,7 @@ export const AccountsRoute: FC = () => {
9581
type="button"
9682
className="cursor-pointer font-semibold mb-1 text-sm"
9783
title="Open Profile"
98-
onClick={() => openProfile(account)}
84+
onClick={() => openAccountProfile(account)}
9985
>
10086
@{account.user.login}
10187
<span

0 commit comments

Comments
 (0)