fix: move react query provider to root layout

finxol · finxol · commit 920a3b0b59b2 · 2025-04-22T14:21:04.000+02:00
diff --git a/apps/web/src/app/[locale]/account/userinfo.tsx b/apps/web/src/app/[locale]/account/userinfo.tsx
@@ -6,14 +6,9 @@ import { useTranslations } from "next-intl"
 import { Badge } from "@karr/ui/components/badge"
 
 import { apiFetch } from "@/util/apifetch"
-import { QueryProvider } from "@/components/QueryProvider"
 
 export default function UserInfo({ userid }: { userid: string }) {
-    return (
-        <QueryProvider>
-            <FetchUserData userid={userid} />
-        </QueryProvider>
-    )
+    return <FetchUserData userid={userid} />
 }
 
 function FetchUserData({ userid }: { userid: string }) {
diff --git a/apps/web/src/app/[locale]/layout.tsx b/apps/web/src/app/[locale]/layout.tsx
@@ -6,14 +6,14 @@ import { getMessages } from "next-intl/server"
 
 import { Toaster } from "@karr/ui/components/sonner"
 
-import "@/assets/globals.css"
-
 import { routing } from "@/i18n/routing"
 import { APPLICATION_NAME } from "@/util/appname"
+import "@/assets/globals.css"
+import { Locale } from "@/../global"
 
-import Footer from "../_components/footer"
-import Header from "../_components/header"
-import ThemeProvider from "../_components/ThemeProvider"
+import { Footer } from "~/_components/footer"
+import { Header } from "~/_components/header"
+import { Providers } from "~/_components/Providers"
 
 const geistSans = localFont({
     src: "../../assets/fonts/GeistVF.woff",
@@ -36,12 +36,12 @@ export default async function RootLayout({
     params
 }: Readonly<{
     children: React.ReactNode
-    params: Promise<{ locale: string }>
+    params: Promise<{ locale: Locale }>
 }>) {
     const { locale } = await params
 
     // Ensure that the incoming `locale` is valid
-    if (!routing.locales.includes(locale as "en" | "fr")) {
+    if (!routing.locales.includes(locale)) {
         notFound()
     }
 
@@ -59,12 +59,7 @@ export default async function RootLayout({
                 {/* <script src="https://unpkg.com/react-scan/dist/auto.global.js" async /> */}
             </head>
             <body>
-                <ThemeProvider
-                    attribute="class"
-                    defaultTheme="system"
-                    enableSystem
-                    disableTransitionOnChange
-                >
+                <Providers>
                     <NextIntlClientProvider messages={messages}>
                         <div className="grid h-screen grid-cols-1 grid-rows-[auto_1fr]">
                             <Header />
@@ -75,7 +70,7 @@ export default async function RootLayout({
                         </div>
                         <Toaster richColors />
                     </NextIntlClientProvider>
-                </ThemeProvider>
+                </Providers>
             </body>
         </html>
     )
diff --git a/apps/web/src/app/[locale]/trips/new/page.tsx b/apps/web/src/app/[locale]/trips/new/page.tsx
@@ -1,8 +1,5 @@
-import { Suspense } from "react"
 import { useTranslations } from "next-intl"
 
-import Loading from "@/components/Loading"
-
 import NewTripForm from "./newTripForm"
 
 export default function New() {
@@ -11,9 +8,7 @@ export default function New() {
         <article className="mt-6 flex flex-col items-center justify-center gap-4 w-full">
             <h3 className="mb-4">{t("title")}</h3>
 
-            <Suspense fallback={<Loading />}>
-                <NewTripForm />
-            </Suspense>
+            <NewTripForm />
         </article>
     )
 }
diff --git a/apps/web/src/app/[locale]/trips/search/trips.tsx b/apps/web/src/app/[locale]/trips/search/trips.tsx
@@ -23,14 +23,9 @@ import { toast } from "@karr/ui/components/sonner"
 
 import { apiFetch } from "@/util/apifetch"
 import Loading from "@/components/Loading"
-import { QueryProvider } from "@/components/QueryProvider"
 
 export default function TripList({ userid }: { userid: string }) {
-    return (
-        <QueryProvider>
-            <FetchTrips userid={userid} />
-        </QueryProvider>
-    )
+    return <FetchTrips userid={userid} />
 }
 
 function FetchTrips({ userid }: { userid: string }) {
diff --git a/apps/web/src/app/_components/Providers.tsx b/apps/web/src/app/_components/Providers.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ThemeProvider } from "next-themes"
+
+const queryClient = new QueryClient()
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+            >
+                {children}
+            </ThemeProvider>
+        </QueryClientProvider>
+    )
+}
diff --git a/apps/web/src/app/_components/ThemeProvider.tsx b/apps/web/src/app/_components/ThemeProvider.tsx
diff --git a/apps/web/src/app/_components/footer.tsx b/apps/web/src/app/_components/footer.tsx
@@ -6,7 +6,7 @@ import { LocaleSwitcher } from "./footer/LocaleSwitcher"
 import { ThemeSwitch } from "./footer/ThemeSwitch"
 import { isProduction, version } from "./footer/version"
 
-export default function Footer() {
+export function Footer() {
     return (
         <footer className="flex w-full flex-col items-center justify-between px-4 py-2">
             <Separator />
diff --git a/apps/web/src/app/_components/footer/version.ts b/apps/web/src/app/_components/footer/version.ts
@@ -1,6 +1,7 @@
 import "server-only"
 
 import packageJson from "../../../../../../package.json" with { type: "json" }
+import { PRODUCTION } from "@karr/config"
 
 export const version = packageJson.version
-export const isProduction = process.env.NODE_ENV === "production"
+export const isProduction = PRODUCTION
diff --git a/apps/web/src/app/_components/header.tsx b/apps/web/src/app/_components/header.tsx
@@ -14,7 +14,7 @@ const MemoizedAppName = memo(
     () => false // Never update
 )
 
-export default async function Header() {
+export async function Header() {
     const isAuthenticated = await auth()
 
     return (
diff --git a/config/karr.config.yaml b/config/karr.config.yaml
@@ -10,7 +10,7 @@ ADMIN_EMAIL: foo@bar.com
 FEDERATION: true
 FEDERATION_TARGETS:
     - name: Karr Live
-      url: https://karr.mobi
+      url: https://karr2.finxol.io
 DB_CONFIG:
     host: localhost
     port: 5432

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const MemoizedAppName = memo(`
`14`	`14`	`() => false // Never update`
`15`	`15`	`)`
`16`	`16`
`17`		`-export default async function Header() {`
	`17`	`+export async function Header() {`
`18`	`18`	`const isAuthenticated = await auth()`
`19`	`19`
`20`	`20`	`return (`