From 768117a105df3cf02808a6308c74e57670eac16b Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 22:18:52 -0400 Subject: [PATCH 1/4] refactor: interaction button component --- .../buttons/InteractionButton.test.tsx | 19 +++++++++++++++ src/components/buttons/InteractionButton.tsx | 24 +++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 src/components/buttons/InteractionButton.test.tsx create mode 100644 src/components/buttons/InteractionButton.tsx diff --git a/src/components/buttons/InteractionButton.test.tsx b/src/components/buttons/InteractionButton.test.tsx new file mode 100644 index 000000000..3c5d94aaf --- /dev/null +++ b/src/components/buttons/InteractionButton.test.tsx @@ -0,0 +1,19 @@ +import { MarkGithubIcon } from '@primer/octicons-react'; +import { render } from '@testing-library/react'; +import { + type IInteractionButton, + InteractionButton, +} from './InteractionButton'; + +describe('components/buttons/InteractionButton.tsx', () => { + it('should render', () => { + const props: IInteractionButton = { + title: 'Mock Interaction Button', + icon: MarkGithubIcon, + size: 'small', + onClick: () => () => {}, + }; + const tree = render(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/buttons/InteractionButton.tsx b/src/components/buttons/InteractionButton.tsx new file mode 100644 index 000000000..0c56b54af --- /dev/null +++ b/src/components/buttons/InteractionButton.tsx @@ -0,0 +1,24 @@ +import type { Icon } from '@primer/octicons-react'; +import type { FC, MouseEventHandler } from 'react'; + +export interface IInteractionButton { + title: string; + icon: Icon; + size: 'small' | 'medium'; + onClick: () => MouseEventHandler; +} + +export const InteractionButton: FC = ( + props: IInteractionButton, +) => { + return ( + + ); +}; From 19c5ccebc30ead962bc1348775676ea79bef4bc0 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 22:19:14 -0400 Subject: [PATCH 2/4] refactor: interaction button component --- .../InteractionButton.test.tsx.snap | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 src/components/buttons/__snapshots__/InteractionButton.test.tsx.snap diff --git a/src/components/buttons/__snapshots__/InteractionButton.test.tsx.snap b/src/components/buttons/__snapshots__/InteractionButton.test.tsx.snap new file mode 100644 index 000000000..ebb73292b --- /dev/null +++ b/src/components/buttons/__snapshots__/InteractionButton.test.tsx.snap @@ -0,0 +1,104 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/buttons/InteractionButton.tsx should render 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ +
+ , + "container":
+ +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; From e4e583917d334a01fcf6523466d3073664c0c7d4 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 22:45:46 -0400 Subject: [PATCH 3/4] refactor: hover group and interaction button components --- src/components/AccountNotifications.tsx | 16 +-- src/components/HoverGroup.test.tsx | 9 ++ src/components/HoverGroup.tsx | 13 ++ src/components/NotificationRow.tsx | 38 +++--- src/components/RepositoryNotifications.tsx | 38 +++--- .../AccountNotifications.test.tsx.snap | 57 +++++---- .../__snapshots__/HoverGroup.test.tsx.snap | 74 ++++++++++++ .../NotificationRow.test.tsx.snap | 52 ++++---- .../RepositoryNotifications.test.tsx.snap | 21 ++-- .../buttons/InteractionButton.test.tsx | 13 +- src/components/buttons/InteractionButton.tsx | 11 +- .../InteractionButton.test.tsx.snap | 113 +++++++++++++++++- 12 files changed, 338 insertions(+), 117 deletions(-) create mode 100644 src/components/HoverGroup.test.tsx create mode 100644 src/components/HoverGroup.tsx create mode 100644 src/components/__snapshots__/HoverGroup.test.tsx.snap diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx index b96e5625f..e775ee699 100644 --- a/src/components/AccountNotifications.tsx +++ b/src/components/AccountNotifications.tsx @@ -8,8 +8,10 @@ import { AppContext } from '../context/App'; import type { Account } from '../types'; import type { Notification } from '../typesGitHub'; import { openAccountProfile } from '../utils/links'; +import { HoverGroup } from './HoverGroup'; import { NotificationRow } from './NotificationRow'; import { RepositoryNotifications } from './RepositoryNotifications'; +import { InteractionButton } from './buttons/InteractionButton'; import { PlatformIcon } from './icons/PlatformIcon'; interface IAccountNotifications { @@ -78,16 +80,14 @@ export const AccountNotifications: FC = ( @{account.user.login} -
- -
+ /> + )} diff --git a/src/components/HoverGroup.test.tsx b/src/components/HoverGroup.test.tsx new file mode 100644 index 000000000..ea3573f68 --- /dev/null +++ b/src/components/HoverGroup.test.tsx @@ -0,0 +1,9 @@ +import { render } from '@testing-library/react'; +import { HoverGroup } from './HoverGroup'; + +describe('components/HoverGroup.tsx', () => { + it('should render', () => { + const tree = render(Hover Group); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/HoverGroup.tsx b/src/components/HoverGroup.tsx new file mode 100644 index 000000000..0d238d381 --- /dev/null +++ b/src/components/HoverGroup.tsx @@ -0,0 +1,13 @@ +import type { FC, ReactNode } from 'react'; + +interface IHoverGroup { + children: ReactNode; +} + +export const HoverGroup: FC = ({ children }: IHoverGroup) => { + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 7a6d6f734..a70a57d07 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -35,6 +35,8 @@ import { openUserProfile, } from '../utils/links'; import { formatReason } from '../utils/reason'; +import { HoverGroup } from './HoverGroup'; +import { InteractionButton } from './buttons/InteractionButton'; import { PillButton } from './buttons/PillButton'; import { AvatarIcon } from './icons/AvatarIcon'; @@ -250,42 +252,34 @@ export const NotificationRow: FC = ({ -
- - - - - -
+ /> + ); }; diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx index 31909999b..5c614883e 100644 --- a/src/components/RepositoryNotifications.tsx +++ b/src/components/RepositoryNotifications.tsx @@ -9,7 +9,9 @@ import { type FC, useCallback, useContext, useState } from 'react'; import { AppContext } from '../context/App'; import type { Notification } from '../typesGitHub'; import { openRepository } from '../utils/links'; +import { HoverGroup } from './HoverGroup'; import { NotificationRow } from './NotificationRow'; +import { InteractionButton } from './buttons/InteractionButton'; import { AvatarIcon } from './icons/AvatarIcon'; interface IRepositoryNotifications { @@ -70,34 +72,26 @@ export const RepositoryNotifications: FC = ({ -
- - - - - -
+ /> + {showRepositoryNotifications && diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index 30d9dfb62..c895cd3a4 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -40,7 +40,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
); }; diff --git a/src/components/buttons/__snapshots__/InteractionButton.test.tsx.snap b/src/components/buttons/__snapshots__/InteractionButton.test.tsx.snap index ebb73292b..d3e92bde3 100644 --- a/src/components/buttons/__snapshots__/InteractionButton.test.tsx.snap +++ b/src/components/buttons/__snapshots__/InteractionButton.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/buttons/InteractionButton.tsx should render 1`] = ` +exports[`components/buttons/InteractionButton.tsx should render - medium 1`] = ` { "asFragment": [Function], "baseElement": @@ -11,11 +11,117 @@ exports[`components/buttons/InteractionButton.tsx should render 1`] = ` type="button" > + +
+ , + "container":
+ +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`components/buttons/InteractionButton.tsx should render - small 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+