diff --git a/package.json b/package.json index 0595fa4..52e8d51 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dependencies": { "clsx": "latest", "jotai": "latest", + "jotai-effect": "^0.2.3", "next": "latest", "react": "latest", "react-dom": "latest", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1075f5..2fca6aa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: jotai: specifier: latest version: 2.6.1(@types/react@18.2.46)(react@18.2.0) + jotai-effect: + specifier: ^0.2.3 + version: 0.2.3(jotai@2.6.1) next: specifier: latest version: 14.0.4(react-dom@18.2.0)(react@18.2.0) @@ -3516,6 +3519,14 @@ packages: hasBin: true dev: true + /jotai-effect@0.2.3(jotai@2.6.1): + resolution: {integrity: sha512-Ecs40W4Y+SI1EqbvPdoLDvbyic5eMyD5ifJIQrrr+hWz1GEjmijVWyKw6TzmYzO2+++CkYPF+fYsWzsWsR0AAQ==} + peerDependencies: + jotai: '>=2.4.3' + dependencies: + jotai: 2.6.1(@types/react@18.2.46)(react@18.2.0) + dev: false + /jotai@2.6.1(@types/react@18.2.46)(react@18.2.0): resolution: {integrity: sha512-GLQtAnA9iEKRMXnyCjf1azIxfQi5JausX2EI5qSlb59j4i73ZEyV/EXPDEAQj4uQNZYEefi3degv/Pw3+L/Dtg==} engines: {node: '>=12.20.0'} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2b897e0..7cffb11 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,8 +1,11 @@ +import clsx from 'clsx'; import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; +import { Nav } from './ui/Nav'; + const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { @@ -10,19 +13,35 @@ export const metadata: Metadata = { description: 'Formula 1 Data Analysis', }; -export default function RootLayout({ +const checkServer = async () => { + // Check if server exists + // Cannot use jotai on server component, aka RootLayout + const data = fetch('http://0.0.0.0:80', { cache: 'no-store' }).then( + (res) => { + if (!res.ok) { + return null; + } + return true; + }, + () => { + return null; + }, + ); + + return data; +}; + +export default async function RootLayout({ children, }: { children: React.ReactNode; }) { + const server = await checkServer(); + return ( - -
-
- Slick Telemetry -
-
+ +