From cff662709d70aad2e2cad761de1245642ac10877 Mon Sep 17 00:00:00 2001 From: Igor Loskutov Date: Wed, 3 Sep 2025 07:57:11 -0400 Subject: [PATCH] cover TODOs + cross-tab cache --- www/app/(app)/AuthWrapper.tsx | 6 +- www/app/lib/apiHooks.ts | 37 +++------- www/app/lib/queryClient.tsx | 6 ++ www/app/lib/types.ts | 3 +- www/app/lib/useAuthReady.ts | 13 ---- www/package.json | 3 +- www/pnpm-lock.yaml | 129 ++++++++++++++++++++++++++++++---- 7 files changed, 138 insertions(+), 59 deletions(-) delete mode 100644 www/app/lib/useAuthReady.ts diff --git a/www/app/(app)/AuthWrapper.tsx b/www/app/(app)/AuthWrapper.tsx index ac9f1bbd..acbf3262 100644 --- a/www/app/(app)/AuthWrapper.tsx +++ b/www/app/(app)/AuthWrapper.tsx @@ -1,16 +1,16 @@ "use client"; import { Flex, Spinner } from "@chakra-ui/react"; -import useAuthReady from "../lib/useAuthReady"; +import { useAuth } from "../lib/AuthProvider"; export default function AuthWrapper({ children, }: { children: React.ReactNode; }) { - const { isLoading } = useAuthReady(); + const auth = useAuth(); - if (isLoading) { + if (auth.status === "loading") { return ( { + const auth = useAuth(); + + return { + isAuthenticated: auth.status === "authenticated", + isLoading: auth.status === "loading", + }; +}; export function useRoomsList(page: number = 1) { const { isAuthenticated } = useAuthReady(); @@ -35,7 +28,6 @@ export function useRoomsList(page: number = 1) { }, { enabled: isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -69,7 +61,6 @@ export function useTranscriptsSearch( }, { enabled: isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -115,7 +106,6 @@ export function useTranscriptGet(transcriptId: string | null) { }, { enabled: !!transcriptId && isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -133,7 +123,6 @@ export function useRoomGet(roomId: string | null) { }, { enabled: !!roomId && isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -205,7 +194,6 @@ export function useZulipStreams() { {}, { enabled: isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -225,7 +213,6 @@ export function useZulipTopics(streamId: number | null) { }, { enabled, - staleTime: STALE_TIME, }, ); } @@ -302,7 +289,6 @@ export function useTranscriptWaveform(transcriptId: string | null) { }, { enabled: !!transcriptId && isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -320,7 +306,6 @@ export function useTranscriptMP3(transcriptId: string | null) { }, { enabled: !!transcriptId && isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -338,7 +323,6 @@ export function useTranscriptTopics(transcriptId: string | null) { }, { enabled: !!transcriptId && isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -356,7 +340,6 @@ export function useTranscriptTopicsWithWords(transcriptId: string | null) { }, { enabled: !!transcriptId && isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -380,7 +363,6 @@ export function useTranscriptTopicsWithWordsPerSpeaker( }, { enabled: !!transcriptId && !!topicId && isAuthenticated, - staleTime: STALE_TIME, }, ); } @@ -398,7 +380,6 @@ export function useTranscriptParticipants(transcriptId: string | null) { }, { enabled: !!transcriptId && isAuthenticated, - staleTime: STALE_TIME, }, ); } diff --git a/www/app/lib/queryClient.tsx b/www/app/lib/queryClient.tsx index bd5946e0..70dbbc87 100644 --- a/www/app/lib/queryClient.tsx +++ b/www/app/lib/queryClient.tsx @@ -1,6 +1,7 @@ "use client"; import { QueryClient } from "@tanstack/react-query"; +import { broadcastQueryClient } from "@tanstack/query-broadcast-client-experimental"; export const queryClient = new QueryClient({ defaultOptions: { @@ -15,3 +16,8 @@ export const queryClient = new QueryClient({ }, }, }); + +broadcastQueryClient({ + queryClient, + broadcastChannel: "reflector-query-client", +}); diff --git a/www/app/lib/types.ts b/www/app/lib/types.ts index 04f1d740..39918f63 100644 --- a/www/app/lib/types.ts +++ b/www/app/lib/types.ts @@ -18,7 +18,8 @@ export interface CustomSession extends Session { }; } -// assumption that JWT is JWTWithAccessToken - not ideal, TODO find a reason we have to do that +// assumption that JWT is JWTWithAccessToken - we set it in jwt callback of auth; typing isn't strong around there +// but the assumption is crucial to auth working export const assertExtendedToken = ( t: T, ): T & { diff --git a/www/app/lib/useAuthReady.ts b/www/app/lib/useAuthReady.ts deleted file mode 100644 index f267b338..00000000 --- a/www/app/lib/useAuthReady.ts +++ /dev/null @@ -1,13 +0,0 @@ -"use client"; - -import { useAuth } from "./AuthProvider"; - -// TODO -export default function useAuthReady() { - const auth = useAuth(); - - return { - isAuthenticated: auth.status === "authenticated", - isLoading: auth.status === "loading", - }; -} diff --git a/www/package.json b/www/package.json index b509c8ff..a083594d 100644 --- a/www/package.json +++ b/www/package.json @@ -17,7 +17,8 @@ "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@sentry/nextjs": "^7.77.0", - "@tanstack/react-query": "^5.85.5", + "@tanstack/query-broadcast-client-experimental": "^5.85.9", + "@tanstack/react-query": "^5.85.9", "@vercel/edge-config": "^0.4.1", "@whereby.com/browser-sdk": "^3.3.4", "autoprefixer": "10.4.20", diff --git a/www/pnpm-lock.yaml b/www/pnpm-lock.yaml index 9095e5e1..b9a2f31c 100644 --- a/www/pnpm-lock.yaml +++ b/www/pnpm-lock.yaml @@ -25,9 +25,12 @@ importers: "@sentry/nextjs": specifier: ^7.77.0 version: 7.120.4(next@14.2.31(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.90.0))(react@18.3.1) + "@tanstack/query-broadcast-client-experimental": + specifier: ^5.85.9 + version: 5.85.9 "@tanstack/react-query": - specifier: ^5.85.5 - version: 5.85.5(react@18.3.1) + specifier: ^5.85.9 + version: 5.85.9(react@18.3.1) "@vercel/edge-config": specifier: ^0.4.1 version: 0.4.1 @@ -72,7 +75,7 @@ importers: version: 0.14.0 openapi-react-query: specifier: ^0.5.0 - version: 0.5.0(@tanstack/react-query@5.85.5(react@18.3.1))(openapi-fetch@0.14.0) + version: 0.5.0(@tanstack/react-query@5.85.9(react@18.3.1))(openapi-fetch@0.14.0) postcss: specifier: 8.4.31 version: 8.4.31 @@ -196,6 +199,13 @@ packages: engines: { node: ">=6.0.0" } hasBin: true + "@babel/runtime@7.27.0": + resolution: + { + integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==, + } + engines: { node: ">=6.9.0" } + "@babel/runtime@7.28.2": resolution: { @@ -1408,16 +1418,22 @@ packages: integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==, } - "@tanstack/query-core@5.85.5": + "@tanstack/query-broadcast-client-experimental@5.85.9": resolution: { - integrity: sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==, + integrity: sha512-8UOwzQ16BAJwoTo584ZciRcT2sOw5DPsCRwQVDvST3ri8stDCj2CRQ9BxL9BIjkwICMuyNFQDc6Xgh1Coh9uyw==, } - "@tanstack/react-query@5.85.5": + "@tanstack/query-core@5.85.9": resolution: { - integrity: sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A==, + integrity: sha512-5fxb9vwyftYE6KFLhhhDyLr8NO75+Wpu7pmTo+TkwKmMX2oxZDoLwcqGP8ItKSpUMwk3urWgQDZfyWr5Jm9LsQ==, + } + + "@tanstack/react-query@5.85.9": + resolution: + { + integrity: sha512-2T5zgSpcOZXGkH/UObIbIkGmUPQqZqn7esVQFXLOze622h4spgWf5jmvrqAo9dnI13/hyMcNsF1jsoDcb59nJQ==, } peerDependencies: react: ^18 || ^19 @@ -2820,6 +2836,12 @@ packages: } engines: { node: ">=8" } + broadcast-channel@7.1.0: + resolution: + { + integrity: sha512-InJljddsYWbEL8LBnopnCg+qMQp9KcowvYWOt4YWrjD5HmxzDYKdVbDS1w/ji5rFZdRD58V5UxJPtBdpEbEJYw==, + } + browserslist@4.25.2: resolution: { @@ -3893,6 +3915,12 @@ packages: } engines: { node: ">=10.13.0" } + eventemitter3@4.0.7: + resolution: + { + integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==, + } + events-intercept@2.0.0: resolution: { @@ -5669,6 +5697,13 @@ packages: } engines: { node: ">= 0.4" } + oblivious-set@1.4.0: + resolution: + { + integrity: sha512-szyd0ou0T8nsAqHtprRcP3WidfsN1TnAR5yWXf2mFCEr5ek3LEOkT6EZ/92Xfs74HIdyhG5WkGxIssMU0jBaeg==, + } + engines: { node: ">=16" } + oidc-token-hash@5.1.1: resolution: { @@ -5752,6 +5787,13 @@ packages: } engines: { node: ">= 0.4" } + p-finally@1.0.0: + resolution: + { + integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==, + } + engines: { node: ">=4" } + p-finally@2.0.1: resolution: { @@ -5773,6 +5815,20 @@ packages: } engines: { node: ">=10" } + p-queue@6.6.2: + resolution: + { + integrity: sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==, + } + engines: { node: ">=8" } + + p-timeout@3.2.0: + resolution: + { + integrity: sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==, + } + engines: { node: ">=8" } + package-json-from-dist@1.0.1: resolution: { @@ -6302,6 +6358,12 @@ packages: } engines: { node: ">= 0.4" } + regenerator-runtime@0.14.1: + resolution: + { + integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==, + } + regexp.prototype.flags@1.5.4: resolution: { @@ -7215,6 +7277,12 @@ packages: } engines: { node: ">= 10.0.0" } + unload@2.4.1: + resolution: + { + integrity: sha512-IViSAm8Z3sRBYA+9wc0fLQmU9Nrxb16rcDmIiR6Y9LJSZzI7QY5QsDhqPpKOjAn0O9/kfK1TfNEMMAGPTIraPw==, + } + unpipe@1.0.0: resolution: { @@ -7668,6 +7736,10 @@ snapshots: dependencies: "@babel/types": 7.28.2 + "@babel/runtime@7.27.0": + dependencies: + regenerator-runtime: 0.14.1 + "@babel/runtime@7.28.2": {} "@babel/template@7.27.2": @@ -8473,11 +8545,16 @@ snapshots: "@swc/counter": 0.1.3 tslib: 2.8.1 - "@tanstack/query-core@5.85.5": {} - - "@tanstack/react-query@5.85.5(react@18.3.1)": + "@tanstack/query-broadcast-client-experimental@5.85.9": dependencies: - "@tanstack/query-core": 5.85.5 + "@tanstack/query-core": 5.85.9 + broadcast-channel: 7.1.0 + + "@tanstack/query-core@5.85.9": {} + + "@tanstack/react-query@5.85.9(react@18.3.1)": + dependencies: + "@tanstack/query-core": 5.85.9 react: 18.3.1 "@tootallnate/once@2.0.0": {} @@ -9677,6 +9754,13 @@ snapshots: dependencies: fill-range: 7.1.1 + broadcast-channel@7.1.0: + dependencies: + "@babel/runtime": 7.27.0 + oblivious-set: 1.4.0 + p-queue: 6.6.2 + unload: 2.4.1 + browserslist@4.25.2: dependencies: caniuse-lite: 1.0.30001734 @@ -10402,6 +10486,8 @@ snapshots: event-target-shim@6.0.2: {} + eventemitter3@4.0.7: {} + events-intercept@2.0.0: {} events@3.3.0: {} @@ -11570,6 +11656,8 @@ snapshots: define-properties: 1.2.1 es-object-atoms: 1.1.1 + oblivious-set@1.4.0: {} + oidc-token-hash@5.1.1: {} once@1.3.3: @@ -11588,9 +11676,9 @@ snapshots: dependencies: openapi-typescript-helpers: 0.0.15 - openapi-react-query@0.5.0(@tanstack/react-query@5.85.5(react@18.3.1))(openapi-fetch@0.14.0): + openapi-react-query@0.5.0(@tanstack/react-query@5.85.9(react@18.3.1))(openapi-fetch@0.14.0): dependencies: - "@tanstack/react-query": 5.85.5(react@18.3.1) + "@tanstack/react-query": 5.85.9(react@18.3.1) openapi-fetch: 0.14.0 openapi-typescript-helpers: 0.0.15 @@ -11630,6 +11718,8 @@ snapshots: object-keys: 1.1.1 safe-push-apply: 1.0.0 + p-finally@1.0.0: {} + p-finally@2.0.1: {} p-limit@3.1.0: @@ -11640,6 +11730,15 @@ snapshots: dependencies: p-limit: 3.1.0 + p-queue@6.6.2: + dependencies: + eventemitter3: 4.0.7 + p-timeout: 3.2.0 + + p-timeout@3.2.0: + dependencies: + p-finally: 1.0.0 + package-json-from-dist@1.0.1: {} parent-module@1.0.1: @@ -11940,6 +12039,8 @@ snapshots: get-proto: 1.0.1 which-builtin-type: 1.2.1 + regenerator-runtime@0.14.1: {} + regexp.prototype.flags@1.5.4: dependencies: call-bind: 1.0.8 @@ -12576,6 +12677,8 @@ snapshots: universalify@2.0.1: {} + unload@2.4.1: {} + unpipe@1.0.0: {} unrs-resolver@1.11.1: