diff --git a/src/renderer/src/routes/(MapTabs)/_Map.tab2.tsx b/src/renderer/src/routes/(MapTabs)/_Map.tab2.tsx
index 91894cc..5171d08 100644
--- a/src/renderer/src/routes/(MapTabs)/_Map.tab2.tsx
+++ b/src/renderer/src/routes/(MapTabs)/_Map.tab2.tsx
@@ -4,10 +4,10 @@ import { createFileRoute } from '@tanstack/react-router'
import { Text } from '../../components/Text'
export const Route = createFileRoute('/(MapTabs)/_Map/tab2')({
- component: RouteComponent,
+ component: Settings,
})
-function RouteComponent() {
+export function Settings() {
return (
Tab 2
diff --git a/src/renderer/src/routes/(MapTabs)/_Map.test.tsx b/src/renderer/src/routes/(MapTabs)/_Map.test.tsx
index cf98d8d..34a7182 100644
--- a/src/renderer/src/routes/(MapTabs)/_Map.test.tsx
+++ b/src/renderer/src/routes/(MapTabs)/_Map.test.tsx
@@ -1,20 +1,54 @@
+import type { ReactNode } from 'react'
+import {
+ RouterProvider,
+ createRootRoute,
+ createRoute,
+ createRouter,
+} from '@tanstack/react-router'
import { render, screen } from '@testing-library/react'
-import { expect, test, vi } from 'vitest'
+import { expect, test } from 'vitest'
+import { IntlProvider } from '../../contexts/IntlContext'
import { MapLayout } from './_Map'
-vi.mock('@tanstack/react-router', () => ({
- useNavigate: vi.fn(() => {
- return { navigate: vi.fn() }
- }),
- createFileRoute: vi.fn(() => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- return (options: any) => ({ component: options.component }) // Mocked implementation
- }),
- Outlet: () =>
Mocked Outlet
,
-}))
-
-test('renders something in the jsdom', () => {
- render(
)
- expect(screen).toBeDefined()
+const rootRoute = createRootRoute({})
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+
{children}
+)
+
+// Creates a stubbed out router. We are just testing whether the navigation gets passed the correct route (aka "/tab1" or "/tab2") so we do not need the actual router and can just intecept the navgiation state.
+const mapRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ id: 'map',
+ component: MapLayout,
+})
+
+const catchAllRoute = createRoute({
+ getParentRoute: () => mapRoute,
+ path: '$',
+ component: () => null,
+})
+
+const routeTree = rootRoute.addChildren([mapRoute.addChildren([catchAllRoute])])
+
+const router = createRouter({ routeTree })
+
+test('clicking tabs navigate to correct tab', () => {
+ // @ts-expect-error - typings
+ render(
, { wrapper: Wrapper })
+ const settingsButton = screen.getByText('Settings')
+ settingsButton.click()
+ const settingsRouteName = router.state.location.pathname
+ expect(settingsRouteName).toStrictEqual('/tab2')
+
+ const observationTab = screen.getByTestId('tab-observation')
+ observationTab.click()
+ const observationTabRouteName = router.state.location.pathname
+ expect(observationTabRouteName).toStrictEqual('/tab1')
+
+ const aboutTab = screen.getByText('About')
+ aboutTab.click()
+ const aboutTabRoute = router.state.location.pathname
+ expect(aboutTabRoute).toStrictEqual('/tab2')
})
diff --git a/src/renderer/src/routes/(MapTabs)/_Map.tsx b/src/renderer/src/routes/(MapTabs)/_Map.tsx
index 6acbacf..70826f1 100644
--- a/src/renderer/src/routes/(MapTabs)/_Map.tsx
+++ b/src/renderer/src/routes/(MapTabs)/_Map.tsx
@@ -1,49 +1,42 @@
-import * as React from 'react'
-import { Paper } from '@mui/material'
-import Tab from '@mui/material/Tab'
-import Tabs from '@mui/material/Tabs'
-import { Outlet, createFileRoute, useNavigate } from '@tanstack/react-router'
+import { Suspense } from 'react'
+import { CircularProgress, Paper } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { Outlet, createFileRoute } from '@tanstack/react-router'
-import type { FileRoutesById } from '../../routeTree.gen'
+import { VERY_LIGHT_GREY, WHITE } from '../../colors'
+import { Tabs } from '../../components/Tabs'
+
+const Container = styled('div')({
+ display: 'flex',
+ backgroundColor: WHITE,
+ height: '100%',
+})
export const Route = createFileRoute('/(MapTabs)/_Map')({
component: MapLayout,
})
export function MapLayout() {
- const navigate = useNavigate()
- const renderCount = React.useRef(0)
- renderCount.current = renderCount.current + 1
return (
-
-
navigate({ to: value as MapTabRoute })}
- orientation="vertical"
- >
-
-
-
-
-
+
+
+
+
+ }>
+
+
+
- map component here
- parent map component render count: {renderCount.current}
-
+
}>
+
map component here
+
+
)
}
-
-type TabProps = React.ComponentProps
-
-type MapTabRoute = {
- [K in keyof FileRoutesById]: K extends `${'/(MapTabs)/_Map'}${infer Rest}`
- ? Rest extends ''
- ? never
- : `${Rest}`
- : never
-}[keyof FileRoutesById]
-
-type MapTabProps = Omit & { value: MapTabRoute }
-
-function MapTab(props: MapTabProps) {
- return
-}
diff --git a/src/renderer/src/routes/__root.tsx b/src/renderer/src/routes/__root.tsx
index 9946ccc..7f8173e 100644
--- a/src/renderer/src/routes/__root.tsx
+++ b/src/renderer/src/routes/__root.tsx
@@ -1,7 +1,8 @@
+import { Suspense } from 'react'
import { CssBaseline, ThemeProvider } from '@mui/material'
+import CircularProgress from '@mui/material/CircularProgress'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
import { theme } from '../Theme'
import { ApiProvider } from '../contexts/ApiContext'
@@ -16,8 +17,9 @@ export const Route = createRootRoute({
-
-
+ }>
+
+
diff --git a/src/renderer/src/routes/index.tsx b/src/renderer/src/routes/index.tsx
index a06e285..5254a96 100644
--- a/src/renderer/src/routes/index.tsx
+++ b/src/renderer/src/routes/index.tsx
@@ -1,7 +1,5 @@
-import * as React from 'react'
-import Box from '@mui/material/Box'
-import CircularProgress from '@mui/material/CircularProgress'
-import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { useLayoutEffect } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useDeviceInfo } from '../queries/deviceInfo'
@@ -9,22 +7,21 @@ export const Route = createFileRoute('/')({
component: RouteComponent,
})
+// the user will never get here, they will be redirected.
+// While this code is semi hacky, the suggested alternative is to redirect in the (beforeLoad)[https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes#the-routebeforeload-option]. The problem is that this requires the router to use 'useDeviceInfo'. We could pass this hook to the router via the RouterContext. But i think the complexity of passing that info makes this hacky code slightly more desirable and easy to understand.
+
function RouteComponent() {
- const router = useRouter()
+ const navigate = useNavigate()
const { data } = useDeviceInfo()
const hasCreatedDeviceName = data?.name !== undefined
- React.useEffect(() => {
+ useLayoutEffect(() => {
if (!hasCreatedDeviceName) {
- router.navigate({ to: '/Onboarding' })
+ navigate({ to: '/Onboarding' })
} else {
- router.navigate({ to: '/tab1' })
+ navigate({ to: '/tab1' })
}
- }, [hasCreatedDeviceName])
+ })
- return (
-
-
-
- )
+ return null
}
diff --git a/src/renderer/vite.config.js b/src/renderer/vite.config.js
index 8c88d3a..0c6514f 100644
--- a/src/renderer/vite.config.js
+++ b/src/renderer/vite.config.js
@@ -1,3 +1,5 @@
+///
+///
import * as path from 'node:path'
import { fileURLToPath } from 'node:url'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'