fix: hide query devtools in prod

Author: jakeaturner

admin/config/inertia.ts

@@ -13,6 +13,7 @@ const inertiaConfig = defineConfig({
    */
   sharedData: {
     appVersion: () => SystemService.getAppVersion(),
+    environment: process.env.NODE_ENV || 'production',
   },
 
   /**

admin/inertia/app/app.tsx

@@ -11,6 +11,7 @@ import { generateUUID } from '~/lib/util'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import NotificationsProvider from '~/providers/NotificationProvider'
+import { UsePageProps } from '../../types/system'
 
 const appName = import.meta.env.VITE_APP_NAME || 'Project N.O.M.A.D.'
 const queryClient = new QueryClient()
@@ -33,13 +34,15 @@ createInertiaApp({
   },
 
   setup({ el, App, props }) {
+    const environment = (props.initialPage.props as unknown as UsePageProps).environment
+    const showDevtools = ['development', 'staging'].includes(environment)
     createRoot(el).render(
       <QueryClientProvider client={queryClient}>
         <TransmitProvider baseUrl={window.location.origin} enableLogging={true}>
           <NotificationsProvider>
             <ModalsProvider>
               <App {...props} />
-              <ReactQueryDevtools initialIsOpen={false} />
+              {showDevtools && <ReactQueryDevtools initialIsOpen={false} />}
             </ModalsProvider>
           </NotificationsProvider>
         </TransmitProvider>

admin/inertia/components/Footer.tsx

@@ -1,7 +1,8 @@
 import { usePage } from '@inertiajs/react'
+import { UsePageProps } from '../../types/system'
 
 export default function Footer() {
-  const { appVersion } = usePage().props as unknown as { appVersion: string }
+  const { appVersion } = usePage().props as unknown as UsePageProps
   return (
     <footer className="">
       <div className="flex justify-center border-t border-gray-900/10 py-4">

admin/inertia/components/Providers.tsx

@@ -0,0 +1,32 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { TransmitProvider } from 'react-adonis-transmit'
+import ModalsProvider from '~/providers/ModalProvider'
+import NotificationsProvider from '~/providers/NotificationProvider'
+import { UsePageProps } from '../../types/system'
+import { usePage } from '@inertiajs/react'
+
+export default function Providers({
+  children,
+  queryClient,
+}: {
+  children: React.ReactNode
+  queryClient: QueryClient
+}) {
+  const { environment } = usePage().props as unknown as UsePageProps
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TransmitProvider baseUrl={window.location.origin} enableLogging={true}>
+        <NotificationsProvider>
+          <ModalsProvider>
+            {children}
+            {['development', 'staging'].includes(environment) && (
+              <ReactQueryDevtools initialIsOpen={false} />
+            )}
+          </ModalsProvider>
+        </NotificationsProvider>
+      </TransmitProvider>
+    </QueryClientProvider>
+  )
+}

admin/inertia/layouts/AppLayout.tsx

@@ -1,24 +1,17 @@
-import Footer from "~/components/Footer";
+import Footer from '~/components/Footer'
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-screen flex flex-col">
-      <div className="p-2 flex gap-2 flex-col items-center justify-center cursor-pointer" onClick={() => window.location.href = '/home'}>
+      <div
+        className="p-2 flex gap-2 flex-col items-center justify-center cursor-pointer"
+        onClick={() => (window.location.href = '/home')}
+      >
         <img src="/project_nomad_logo.png" alt="Project Nomad Logo" className="h-40 w-40" />
         <h1 className="text-5xl font-bold text-desert-green">Command Center</h1>
       </div>
       <hr className="text-desert-green font-semibold h-[1.5px] bg-desert-green border-none" />
       <div className="flex-1 w-full bg-desert">{children}</div>
-      {/* <TanStackRouterDevtools /> */}
-      {/* <hr className="text-desert-green font-semibold h-[1.5px] bg-desert-green border-none" />
-      <div className="p-2 flex flex-col items-center justify-center ">
-        <p className="text-sm text-gray-900 italic">
-          Sapientia ianua vitae | Wisdom is the gateway to life
-        </p>
-        <p
-        className="text-desert-orange font-semibold text-sm italic"
-        >A project by Crosstalk Solutions</p>
-      </div> */}
       <Footer />
     </div>
   )

admin/types/system.ts

@@ -14,4 +14,5 @@ export type SystemInformationResponse = {
 // Type inferrence is not working properly with usePage and shared props, so we define this type manually
 export type UsePageProps = {
     appVersion: string
+    environment: string
 }