Tanstack Devtools in web (#1049)

* update Tanstack packages + simple feature flagging system

* format

* cleanup unused exports

---------

Co-authored-by: Brendan Allan <[email protected]>

Author: oscartbeaumont

apps/web/app/Layout/features.ts

@@ -0,0 +1,38 @@
+import { Effect, Store, useStore } from "@tanstack/react-store";
+
+const defaultFeatureFlags = {
+	enableUploadProgress: false,
+};
+
+type FeatureFlags = typeof defaultFeatureFlags;
+
+function safeJsonFromLocalStorage(key: string) {
+	try {
+		return JSON.parse(localStorage.getItem(key) || "{}");
+	} catch {
+		return {};
+	}
+}
+
+const featureFlagsLocalStorageKey = "featureFlags";
+export const featureFlags = new Store<FeatureFlags>({
+	...defaultFeatureFlags,
+	...safeJsonFromLocalStorage(featureFlagsLocalStorageKey),
+});
+
+new Effect({
+	fn: () =>
+		localStorage.setItem(
+			featureFlagsLocalStorageKey,
+			JSON.stringify(featureFlags.state),
+		),
+	deps: [featureFlags],
+}).mount();
+
+export function useFeatureFlag(name: keyof FeatureFlags) {
+	return useStore(featureFlags, (state) => state[name]);
+}
+
+export function useFeatureFlags() {
+	return useStore(featureFlags);
+}

apps/web/app/Layout/providers.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import { buildEnv } from "@cap/env";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import {
+	QueryClient,
+	QueryClientProvider,
+	useQueryClient,
+} from "@tanstack/react-query";
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
 import posthog from "posthog-js";
 import { PostHogProvider as PHProvider } from "posthog-js/react";
 import { type PropsWithChildren, useEffect, useState } from "react";
@@ -57,12 +63,65 @@ export function ReactQueryProvider({
 	const [queryClient] = useState(() => new QueryClient());
 
 	return (
-		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+		<QueryClientProvider client={queryClient}>
+			{children}
+			{process.env.NODE_ENV === "development" ? <Devtools /> : null}
+		</QueryClientProvider>
 	);
 }
 
 import { SessionProvider as NASessionProvider } from "next-auth/react";
+import { featureFlags, useFeatureFlags } from "./features";
 
 export function SessionProvider({ children }: PropsWithChildren) {
 	return <NASessionProvider>{children}</NASessionProvider>;
 }
+
+export function Devtools() {
+	const client = useQueryClient();
+
+	return (
+		<TanStackDevtools
+			config={{
+				// TODO: This doesn't seem to be working?
+				position: "top-left",
+			}}
+			plugins={[
+				{
+					name: "Cap",
+					render: <CapDevtools />,
+				},
+				{
+					name: "Tanstack Query",
+					render: <ReactQueryDevtoolsPanel client={client} />,
+				},
+			]}
+		/>
+	);
+}
+
+function CapDevtools() {
+	const flags = useFeatureFlags();
+
+	return (
+		<div className="flex flex-col space-y-4 p-4">
+			<h1 className="text-2xl font-semibold">Cap Devtools</h1>
+			<div className="space-y-2">
+				<h1 className="text-lg font-semibold">Features</h1>
+				<label className="flex items-center space-x-2">
+					<input
+						type="checkbox"
+						checked={flags.enableUploadProgress}
+						onChange={(e) =>
+							featureFlags.setState((prev) => ({
+								...prev,
+								enableUploadProgress: e.target.checked,
+							}))
+						}
+					/>
+					<span>Enable Upload Progress UI</span>
+				</label>
+			</div>
+		</div>
+	);
+}

apps/web/app/s/[videoId]/_components/ProgressCircle.tsx

@@ -3,6 +3,7 @@
 import type { Video } from "@cap/web-domain";
 import clsx from "clsx";
 import { Effect, Option } from "effect";
+import { useFeatureFlag } from "@/app/Layout/features";
 import { useEffectQuery } from "@/lib/EffectRuntime";
 import { withRpc } from "@/lib/Rpcs";
 
@@ -22,14 +23,8 @@ const MINUTE = 60 * SECOND;
 const HOUR = 60 * 60 * SECOND;
 const DAY = 24 * HOUR;
 
-// TODO: Remove this once we are more confident in the feature
-// localStorage.setItem("betaUploadProgress", "true");
-const enableBetaUploadProgress =
-	"localStorage" in globalThis
-		? localStorage.getItem("betaUploadProgress") === "true"
-		: false;
-
 export function useUploadProgress(videoId: Video.VideoId, enabledRaw: boolean) {
+	const enableBetaUploadProgress = useFeatureFlag("enableUploadProgress");
 	const enabled = enableBetaUploadProgress ? enabledRaw : false;
 
 	const query = useEffectQuery({

apps/web/package.json

@@ -58,9 +58,10 @@
 		"@rive-app/react-canvas": "^4.18.7",
 		"@stripe/stripe-js": "^3.3.0",
 		"@t3-oss/env-nextjs": "^0.12.0",
-		"@tanstack/react-query": "^5.75.4",
-		"@tanstack/react-store": "^0.5.5",
-		"@tanstack/store": "^0.5.5",
+		"@tanstack/react-devtools": "^0.7.0",
+		"@tanstack/react-query": "^5.90.1",
+		"@tanstack/react-query-devtools": "^5.90.1",
+		"@tanstack/react-store": "^0.7.7",
 		"@ts-rest/core": "^3.52.1",
 		"@uidotdev/usehooks": "^2.4.1",
 		"@virtual-grid/react": "^2.0.3",