From c98ec94d7f9cb89a9364dd9fca5bb0cc5e0bf643 Mon Sep 17 00:00:00 2001
From: Joe Karow <58997957+JoeKarow@users.noreply.github.com>
Date: Fri, 3 May 2024 15:16:00 -0400
Subject: [PATCH] feat: RQ devtool in vercel preview (#1257)

<!--- Please provide a general summary of your changes in the title
above -->

# Pull Request type

<!-- Please try to limit your pull request to one type; submit multiple
pull requests if needed. -->

Please check the type of change your PR introduces:

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, renaming)
- [ ] Refactoring (no functional changes, no API changes)
- [ ] Build-related changes
- [ ] Documentation content changes
- [ ] Other (please describe):

## What is the current behavior?

React Query devtool only shows in local dev

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

<!-- Please describe the behavior or changes that are being added by
this PR. -->
Devtool will show in vercel preview env when logged in.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this does introduce a breaking change, please describe the
impact and migration path for existing applications below. -->

## Other information

<!-- Any other information that is important to this PR, such as
screenshots of how the component looks before and after the change. -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a conditional React Query Devtool that dynamically loads
based on the user's session status and environment.
- **Enhancements**
- Simplified language formatting settings in the internationalization
configuration.
- Streamlined dynamic import and conditional usage of development tools
in the application framework.
- **Refactor**
- Replaced complex conditional logic with simpler, more efficient checks
in environment configuration utilities.
- **Bug Fixes**
- Removed unused imports and outdated configurations to enhance
performance and maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/app/next-i18next.config.mjs | 17 +++++++---------
 apps/app/src/pages/_app.tsx      | 14 +++----------
 apps/app/src/utils/RQDevtool.tsx | 23 +++++++++++++++++++++
 packages/env/checks.ts           | 34 ++++++++++++++++++++++++++++----
 4 files changed, 63 insertions(+), 25 deletions(-)
 create mode 100644 apps/app/src/utils/RQDevtool.tsx

diff --git a/apps/app/next-i18next.config.mjs b/apps/app/next-i18next.config.mjs
index 7a511d1498..7ecac1459f 100644
--- a/apps/app/next-i18next.config.mjs
+++ b/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
 		},
diff --git a/apps/app/src/pages/_app.tsx b/apps/app/src/pages/_app.tsx
index db029c6449..f99d47aa3d 100644
--- a/apps/app/src/pages/_app.tsx
+++ b/apps/app/src/pages/_app.tsx
@@ -9,14 +9,12 @@ 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'
@@ -24,18 +22,14 @@ 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 />
diff --git a/apps/app/src/utils/RQDevtool.tsx b/apps/app/src/utils/RQDevtool.tsx
new file mode 100644
index 0000000000..049ff599f0
--- /dev/null
+++ b/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
+}
diff --git a/packages/env/checks.ts b/packages/env/checks.ts
index 065a89b769..01d94f2dbf 100644
--- a/packages/env/checks.ts
+++ b/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')