refactor: create Header component

src/components/Header.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Header } from './Header';
+
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+describe('components/Header.tsx', () => {
+  it('should render itself & its children', () => {
+    const tree = render(<Header>Test Header</Header>);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should navigate back', () => {
+    render(<Header>Test Header</Header>);
+
+    fireEvent.click(screen.getByLabelText('Go Back'));
+    expect(mockNavigate).toHaveBeenNthCalledWith(1, -1);
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith(-1);
+  });
+});

src/components/Header.tsx

@@ -0,0 +1,29 @@
+import { ArrowLeftIcon } from '@primer/octicons-react';
+import type { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface IHeader {
+  children: ReactNode;
+}
+
+export const Header = ({ children }: IHeader) => {
+  const navigate = useNavigate();
+  return (
+    <div className="mx-8 mt-4 flex items-center justify-between py-2">
+      <button
+        type="button"
+        className="focus:outline-none"
+        title="Go Back"
+        onClick={() => navigate(-1)}
+      >
+        <ArrowLeftIcon
+          size={20}
+          className="hover:text-gray-400"
+          aria-label="Go Back"
+        />
+      </button>
+
+      <h3 className="text-lg font-semibold">{children}</h3>
+    </div>
+  );
+};

src/routes/Accounts.tsx

@@ -1,5 +1,4 @@
 import {
-  ArrowLeftIcon,
   KeyIcon,
   PersonIcon,
   PlusIcon,
@@ -8,11 +7,10 @@ import {
 
 import { type FC, useCallback, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-
-import { AppContext } from '../context/App';
-
+import { Header } from '../components/Header';
 import { AuthMethodIcon } from '../components/icons/AuthMethodIcon';
 import { PlatformIcon } from '../components/icons/PlatformIcon';
+import { AppContext } from '../context/App';
 import { BUTTON_CLASS_NAME } from '../styles/gitify';
 import type { Account } from '../types';
 import { getAccountUUID } from '../utils/auth/utils';
@@ -47,23 +45,7 @@ export const AccountsRoute: FC = () => {
 
   return (
     <div className="flex h-screen flex-col" data-testid="accounts">
-      <div className="mx-8 mt-2 flex items-center justify-between py-2">
-        <button
-          type="button"
-          className="focus:outline-none"
-          title="Go Back"
-          onClick={() => navigate(-1)}
-        >
-          <ArrowLeftIcon
-            size={20}
-            className="hover:text-gray-400"
-            aria-label="Go Back"
-          />
-        </button>
-
-        <h3 className="text-lg font-semibold">Accounts</h3>
-      </div>
-
+      <Header>Accounts</Header>
       <div className="flex-grow overflow-x-auto px-8">
         <div className="mt-4 flex flex-col text-sm">
           {auth.accounts.map((account) => (

src/routes/LoginWithOAuthApp.tsx

@@ -1,12 +1,7 @@
-import {
-  ArrowLeftIcon,
-  BookIcon,
-  PersonIcon,
-  SignInIcon,
-} from '@primer/octicons-react';
+import { BookIcon, PersonIcon, SignInIcon } from '@primer/octicons-react';
 import { type FC, useCallback, useContext } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
-import { useNavigate } from 'react-router-dom';
+import { Header } from '../components/Header';
 import { Button } from '../components/fields/Button';
 import { FieldInput } from '../components/fields/FieldInput';
 import { AppContext } from '../context/App';
@@ -58,7 +53,6 @@ export const validate = (values: IValues): IFormErrors => {
 
 export const LoginWithOAuthApp: FC = () => {
   const { loginWithOAuthApp } = useContext(AppContext);
-  const navigate = useNavigate();
 
   const renderForm = (formProps: FormRenderProps) => {
     const { handleSubmit, submitting, pristine, values } = formProps;
@@ -130,26 +124,10 @@ export const LoginWithOAuthApp: FC = () => {
 
   return (
     <div>
-      <div className="mx-8 mt-4 flex items-center justify-between py-2">
-        <button
-          type="button"
-          className="focus:outline-none"
-          title="Go Back"
-          onClick={() => navigate(-1)}
-        >
-          <ArrowLeftIcon
-            size={20}
-            className="hover:text-gray-400"
-            aria-label="Go Back"
-          />
-        </button>
-
-        <h3 className="justify-center text-lg font-semibold">
-          <PersonIcon size={20} className="mr-2" />
-          Login with OAuth App
-        </h3>
-      </div>
-
+      <Header>
+        <PersonIcon size={20} className="mr-2" />
+        Login with OAuth App
+      </Header>
       <div className="px-8">
         <Form
           initialValues={{

src/routes/LoginWithPersonalAccessToken.tsx

@@ -1,12 +1,8 @@
-import {
-  ArrowLeftIcon,
-  BookIcon,
-  KeyIcon,
-  SignInIcon,
-} from '@primer/octicons-react';
+import { BookIcon, KeyIcon, SignInIcon } from '@primer/octicons-react';
 import { type FC, useCallback, useContext, useState } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
 import { useNavigate } from 'react-router-dom';
+import { Header } from '../components/Header';
 import { Button } from '../components/fields/Button';
 import { FieldInput } from '../components/fields/FieldInput';
 import { AppContext } from '../context/App';
@@ -138,25 +134,10 @@ export const LoginWithPersonalAccessToken: FC = () => {
 
   return (
     <div>
-      <div className="mx-8 mt-4 flex items-center justify-between py-2">
-        <button
-          type="button"
-          className="focus:outline-none"
-          title="Go Back"
-          onClick={() => navigate(-1)}
-        >
-          <ArrowLeftIcon
-            size={20}
-            className="hover:text-gray-400"
-            aria-label="Go Back"
-          />
-        </button>
-
-        <h3 className="justify-center text-lg font-semibold">
-          <KeyIcon size={18} className="mr-2" />
-          Login with Personal Access Token
-        </h3>
-      </div>
+      <Header>
+        <KeyIcon size={18} className="mr-2" />
+        Login with Personal Access Token
+      </Header>
 
       <div className="px-8">
         <Form

src/routes/Settings.tsx

@@ -1,5 +1,4 @@
 import {
-  ArrowLeftIcon,
   CheckIcon,
   CommentIcon,
   IssueClosedIcon,
@@ -17,6 +16,7 @@ import {
   useState,
 } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Header } from '../components/Header';
 import { Checkbox } from '../components/fields/Checkbox';
 import { RadioGroup } from '../components/fields/RadioGroup';
 import { AppContext } from '../context/App';
@@ -55,23 +55,7 @@ export const SettingsRoute: FC = () => {
 
   return (
     <div className="flex h-screen flex-col" data-testid="settings">
-      <div className="mx-8 mt-2 flex items-center justify-between py-2">
-        <button
-          type="button"
-          className="focus:outline-none"
-          title="Go Back"
-          onClick={() => navigate(-1)}
-        >
-          <ArrowLeftIcon
-            size={20}
-            className="hover:text-gray-400"
-            aria-label="Go Back"
-          />
-        </button>
-
-        <h3 className="text-lg font-semibold">Settings</h3>
-      </div>
-
+      <Header>Settings</Header>
       <div className="flex-grow overflow-x-auto px-8">
         <fieldset className="mb-3">
           <legend id="appearance" className="mb-1 mt-2 font-semibold">