From 3730a5d23222485b8bc135cc0b0279da9835f873 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 18 Jun 2024 14:44:15 -0400 Subject: [PATCH] refactor: extract sidebar button component (#1270) * feat: my quick links * refactor: extract sidebar button into component * refactor: extract sidebar button into component * refactor: extract sidebar button into component * refactor: extract sidebar button into component --- src/components/Sidebar.tsx | 73 +++--- .../__snapshots__/Sidebar.test.tsx.snap | 20 +- src/components/buttons/SidebarButton.test.tsx | 25 ++ src/components/buttons/SidebarButton.tsx | 38 ++++ .../__snapshots__/SidebarButton.test.tsx.snap | 213 ++++++++++++++++++ src/styles/gitify.ts | 3 - src/types.ts | 1 + 7 files changed, 313 insertions(+), 60 deletions(-) create mode 100644 src/components/buttons/SidebarButton.test.tsx create mode 100644 src/components/buttons/SidebarButton.tsx create mode 100644 src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index eee0c2c82..a10b36f55 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -8,11 +8,10 @@ import { type FC, useContext, useMemo } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { Logo } from '../components/Logo'; import { AppContext } from '../context/App'; -import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify'; -import { cn } from '../utils/cn'; import { quitApp } from '../utils/comms'; import { openGitHubNotifications, openGitifyRepository } from '../utils/links'; import { getNotificationCount } from '../utils/notifications'; +import { SidebarButton } from './buttons/SidebarButton'; export const Sidebar: FC = () => { const navigate = useNavigate(); @@ -29,6 +28,11 @@ export const Sidebar: FC = () => { } }; + const refreshNotifications = () => { + navigate('/', { replace: true }); + fetchNotifications(); + }; + const notificationsCount = useMemo(() => { return getNotificationCount(notifications); }, [notifications]); @@ -46,63 +50,42 @@ export const Sidebar: FC = () => { - + metric={notificationsCount} + icon={BellIcon} + onClick={() => openGitHubNotifications()} + />
{isLoggedIn && ( <> - - + icon={GearIcon} + size={16} + onClick={() => toggleSettings()} + /> )} {!isLoggedIn && ( - + icon={XCircleIcon} + size={16} + onClick={() => quitApp()} + /> )}
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap index 6ef542d27..4a2dbcf07 100644 --- a/src/components/__snapshots__/Sidebar.test.tsx.snap +++ b/src/components/__snapshots__/Sidebar.test.tsx.snap @@ -63,7 +63,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in) + ); +}; diff --git a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap new file mode 100644 index 000000000..30add36d3 --- /dev/null +++ b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap @@ -0,0 +1,213 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/buttons/SidebarButton.tsx should render with metric 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], +} +`; + +exports[`components/buttons/SidebarButton.tsx should render without metric 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], +} +`; diff --git a/src/styles/gitify.ts b/src/styles/gitify.ts index ac91a80b3..d6a2e6d47 100644 --- a/src/styles/gitify.ts +++ b/src/styles/gitify.ts @@ -1,5 +1,2 @@ export const BUTTON_CLASS_NAME = 'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none'; - -export const BUTTON_SIDEBAR_CLASS_NAME = - 'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default'; diff --git a/src/types.ts b/src/types.ts index 7b3d1bbd1..410c5c95a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -127,6 +127,7 @@ export enum IconColor { PURPLE = 'text-purple-500', RED = 'text-red-500', YELLOW = 'text-yellow-500 dark:text-yellow-300', + WHITE = 'text-white', } export type PullRequestApprovalIcon = {