chore: #26 Refactor React Router example usage (#27)

Author: kurtdoherty

package.json

@@ -33,12 +33,12 @@
     "just-debounce-it": "^3.2.0",
     "qs": "^6.14.0",
     "query-string": "9.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-hook-form": "^7.51.3",
     "react-router": "^6.22.3",
     "react-router-dom": "^6.22.3",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "yup": "^1.6.1",
     "zustand": "^5.0.3"
   },
@@ -50,8 +50,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/eslint": "^9.6.1",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^8.24.0",
     "@typescript-eslint/parser": "^8.24.0",
     "@vitejs/plugin-react": "^4.3.4",

src/components/login/__styles__/index.ts src/components/LoginPage/__styles__/index.ts

@@ -1,9 +1,9 @@
-import { LoginModule } from '..'
+import { LoginPage } from '..'
 import { render } from '@testing-library/react'
 
 describe('Login', () => {
   it('should match a snapshot', () => {
     process.env.VITE_APP_ENV = 'development'
-    expect(render(<LoginModule />).asFragment()).toMatchSnapshot()
+    expect(render(<LoginPage />).asFragment()).toMatchSnapshot()
   })
 })

src/components/login/__styles__/login-bg.svg src/components/LoginPage/__styles__/login-bg.svg

@@ -1,4 +1,3 @@
-import { FC } from 'react'
 import { Button, ButtonGroup, Subtitle, FlexContainer, Icon, elMb7, BodyText } from '@reapit/elements'
 import { LoginContainer, LoginContentWrapper } from './__styles__'
 import { reapitConnectBrowserSession } from '../../core/connect-session'
@@ -7,7 +6,7 @@ export const handleLoginClick = () => {
   reapitConnectBrowserSession.connectLoginRedirect()
 }
 
-export const LoginModule: FC = () => {
+export const LoginPage = () => {
   return (
     <LoginContainer>
       <LoginContentWrapper>
@@ -25,6 +24,3 @@ export const LoginModule: FC = () => {
     </LoginContainer>
   )
 }
-
-export default LoginModule
-export * from './login-routes'

src/components/login/__tests__/__snapshots__/index.test.tsx.snap src/components/LoginPage/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ContactsEditView > should match a snapshot with data 1`] = `
+exports[`FullContactDetails > should match a snapshot with data 1`] = `
 <DocumentFragment>
   <div
     class="mocked-styled-93 el-snack-holder"
@@ -708,7 +708,7 @@ exports[`ContactsEditView > should match a snapshot with data 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ContactsEditView > should match a snapshot with no data 1`] = `
+exports[`FullContactDetails > should match a snapshot with no data 1`] = `
 <DocumentFragment>
   <div
     class="mocked-styled-93 el-snack-holder"

src/components/login/__tests__/index.test.tsx src/components/LoginPage/__tests__/index.test.tsx

@@ -1,34 +1,34 @@
 import { Mock } from 'vitest'
-import { ContactsEditView } from '..'
-import { usePlatformGet } from '../../../../hooks'
+import { FullContactDetails } from '..'
+import { usePlatformGet } from '../../../../../hooks'
 import {
   mockSourceModelPagedResult,
   mockContactCategories,
   mockNegotiatorModelPagedResult,
   mockOfficeModelPagedResult,
   mockContactModel,
-} from '../../../../scripts/stubs'
-import { render } from '../../../../scripts/tests'
+} from '../../../../../scripts/stubs'
+import { render } from '../../../../../scripts/tests'
 
-vi.mock('../../../../hooks', () => ({
+vi.mock('../../../../../hooks', () => ({
   usePlatformGet: vi.fn(),
   usePlatformUpdate: vi.fn(() => [vi.fn()]),
 }))
 
 const mockUsePlatformGet = usePlatformGet as Mock
 
-describe('ContactsEditView', () => {
+describe('FullContactDetails', () => {
   it('should match a snapshot with data', () => {
-    mockUsePlatformGet
+    vi.mocked(mockUsePlatformGet)
       .mockReturnValue([mockSourceModelPagedResult])
       .mockReturnValue([mockContactCategories])
       .mockReturnValue([mockNegotiatorModelPagedResult])
       .mockReturnValue([mockOfficeModelPagedResult])
 
-    expect(render(<ContactsEditView contact={mockContactModel} />).asFragment()).toMatchSnapshot()
+    expect(render(<FullContactDetails contact={mockContactModel} />).asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot with no data', () => {
-    expect(render(<ContactsEditView contact={null} />).asFragment()).toMatchSnapshot()
+    expect(render(<FullContactDetails contact={null} />).asFragment()).toMatchSnapshot()
   })
 })

src/components/login/index.tsx src/components/LoginPage/index.tsx

@@ -1,4 +1,3 @@
-import { FC } from 'react'
 import { elFadeIn, KeyValueList, StatusIndicator, Badge, BadgeGroup } from '@reapit/elements'
 import {
   ContactModel,
@@ -7,15 +6,15 @@ import {
   OfficeModelPagedResult,
   SourceModelPagedResult,
 } from '@reapit/foundations-ts-definitions'
-import { usePlatformGet } from '../../../hooks'
-import { combineAddress } from '../../../utils/combine-address'
-import { combineName } from '../../../utils/combine-name'
+import { usePlatformGet } from '../../../../hooks'
+import { combineAddress } from '../../../../utils/combine-address'
+import { combineName } from '../../../../utils/combine-name'
 
-export interface ContactsEditViewProps {
+export interface FullContactDetailsProps {
   contact: ContactModel | null
 }
 
-export const ContactsEditView: FC<ContactsEditViewProps> = ({ contact }) => {
+export const FullContactDetails = ({ contact }: FullContactDetailsProps) => {
   const {
     title,
     forename,
@@ -206,4 +205,4 @@ export const ContactsEditView: FC<ContactsEditViewProps> = ({ contact }) => {
   )
 }
 
-export default ContactsEditView
+export default FullContactDetails