Merge branch 'dev' into IN-857-user-management

apps/app/next-i18next.config.mjs

@@ -91,11 +91,11 @@ const config = {
 	partialBundledLanguages: true,
 	nonExplicitSupportedLngs: true,
 	cleanCode: true,
-	// react: {
-	// 	useSuspense: false,
-	// 	bindI18nStore: 'added loaded',
-	// 	bindI18n: 'languageChanged loaded',
-	// },
+	react: {
+		useSuspense: false,
+		// 	bindI18nStore: 'added loaded',
+		// 	bindI18n: 'languageChanged loaded',
+	},
 
 	backend: isBrowser
 		? {
@@ -111,11 +111,8 @@ const config = {
 		skipOnVariables: false,
 		alwaysFormat: true,
 		format: (value, format) => {
-			switch (format) {
-				case 'lowercase': {
-					if (typeof value === 'string') return value.toLowerCase()
-					break
-				}
+			if (format === 'lowercase' && typeof value === 'string') {
+				return value.toLowerCase()
 			}
 			return value
 		},

apps/app/src/pages/_app.tsx

@@ -9,33 +9,27 @@ import { type AppProps, type NextWebVitalsMetric } from 'next/app'
 import dynamic from 'next/dynamic'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-// import Script from 'next/script'
 import { type Session } from 'next-auth'
 import { appWithTranslation } from 'next-i18next'
 import { DefaultSeo, type DefaultSeoProps } from 'next-seo'
 import { GoogleAnalytics } from 'nextjs-google-analytics'
 
 import { appEvent } from '@weareinreach/analytics/events'
-import { isLocalDev } from '@weareinreach/env/checks'
 import { PageLoadProgress } from '@weareinreach/ui/components/core/PageLoadProgress'
 import { Footer } from '@weareinreach/ui/components/sections/Footer'
 import { Navbar } from '@weareinreach/ui/components/sections/Navbar'
 import { useScreenSize } from '@weareinreach/ui/hooks/useScreenSize'
 import { BodyGrid } from '@weareinreach/ui/layouts/BodyGrid'
 import { Providers } from '~app/providers'
 import { api } from '~app/utils/api'
+import { ConditionalReactQueryDevtool } from '~app/utils/RQDevtool'
 
 import nextI18nConfig from '../../next-i18next.config.mjs'
-// import { Donate, DonateModal } from '@weareinreach/ui/components/core/Donate'
+
 const DonateModal = dynamic(() =>
 	import('@weareinreach/ui/components/core/Donate').then((mod) => mod.DonateModal)
 )
 
-const ReactQueryDevtools = dynamic(
-	() => import('@tanstack/react-query-devtools').then((mod) => mod.ReactQueryDevtools),
-	{ ssr: false }
-)
-
 const defaultSEO = {
 	titleTemplate: '%s | InReach',
 	defaultTitle: 'InReach',
@@ -91,9 +85,7 @@ const MyApp = (appProps: AppPropsWithGridSwitch) => {
 				{(isMobile || isTablet) && <Space h={80} />}
 				<Footer />
 				<Notifications transitionDuration={500} />
-				{isLocalDev && (
-					<ReactQueryDevtools initialIsOpen={false} toggleButtonProps={{ style: { zIndex: 99998 } }} />
-				)}
+				<ConditionalReactQueryDevtool />
 				<Analytics />
 				<SpeedInsights />
 				<DonateModal />

apps/app/src/utils/RQDevtool.tsx

@@ -0,0 +1,23 @@
+import dynamic from 'next/dynamic'
+import { useSession } from 'next-auth/react'
+
+import { isLocalDev, isVercelDev, isVercelProd } from '@weareinreach/env/checks'
+
+const ReactQueryDevtools = dynamic(
+	() => import('@tanstack/react-query-devtools').then((mod) => mod.ReactQueryDevtools),
+	{ ssr: false }
+)
+
+export const ConditionalReactQueryDevtool = () => {
+	const { data: session, status: authStatus } = useSession()
+	const isLoggedIn = !!session && authStatus === 'authenticated'
+	// don't do anything on server or if we're in prod
+	if (typeof window === 'undefined' || isVercelProd) {
+		return null
+	}
+
+	if (isLocalDev || (isVercelDev && isLoggedIn)) {
+		return <ReactQueryDevtools initialIsOpen={false} toggleButtonProps={{ style: { zIndex: 99998 } }} />
+	}
+	return null
+}

packages/env/checks.ts

@@ -13,24 +13,50 @@ export const isBrowser = typeof window !== 'undefined'
  */
 export const isDev = process.env.NODE_ENV !== 'production'
 
+/**
+ * Checks if the application is running on Vercel.
+ *
+ * @returns {boolean} True if running on Vercel, false otherwise.
+ */
+export const isVercel = !!(process.env.VERCEL ?? process.env.NEXT_PUBLIC_VERCEL)
+
 /**
  * Get the Vercel environment. Can be used on server or client.
  *
  * @returns The Vercel environment.
  */
-const getVercelEnv = () => process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV
+const getVercelEnv = () => process.env.VERCEL_ENV ?? process.env.NEXT_PUBLIC_VERCEL_ENV
 /**
  * Checks if Vercel is active in development mode for a branch that is not `dev`.
  *
  * @returns {boolean} Whether Vercel is active in development mode or not.
  */
 export const isVercelActiveDev =
-	process.env.VERCEL_ENV === 'preview' && process.env.VERCEL_GIT_COMMIT_REF !== 'dev'
-export const isVercelProd = process.env.VERCEL_ENV === 'production'
+	(process.env.VERCEL_ENV === 'preview' && process.env.VERCEL_GIT_COMMIT_REF !== 'dev') ||
+	(process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview' &&
+		process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF !== 'dev')
+
+/**
+ * Checks if Vercel is active in development mode for any branch.
+ *
+ * @returns {boolean} Whether Vercel is active in development mode or not.
+ */
+export const isVercelDev =
+	process.env.VERCEL_ENV === 'preview' || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
+
+/**
+ * Checks if the application is running in Vercel production mode.
+ *
+ * @returns {boolean} True if running in Vercel production mode, false otherwise.
+ */
+export const isVercelProd =
+	process.env.VERCEL_ENV === 'production' || process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
 /**
  * Checks if the application is running in a local development environment.
  *
  * @returns {boolean} True if running in local development, false otherwise.
  */
 export const isLocalDev =
-	process.env.NODE_ENV === 'development' && !['preview', 'production'].includes(getVercelEnv() ?? 'nope')
+	process.env.NODE_ENV === 'development' &&
+	!isVercel &&
+	!['preview', 'production'].includes(getVercelEnv() ?? 'nope')