diff --git a/apps/web/app/(admin)/AdminLayout.tsx b/apps/web/app/(admin)/AdminLayout.tsx index bc4bd9e4..1094af76 100644 --- a/apps/web/app/(admin)/AdminLayout.tsx +++ b/apps/web/app/(admin)/AdminLayout.tsx @@ -1,50 +1,59 @@ 'use client' import {createBrowserSupabaseClient} from '@supabase/auth-helpers-nextjs' -import {QueryClientProvider, useQueryClient} from '@tanstack/react-query' -// import {TRPCProvider} from '@usevenice/engine-frontend' -import type {Viewer} from '@usevenice/cdk-core' +import {QueryClientProvider} from '@tanstack/react-query' +import {zViewerFromUnverifiedJwtToken} from '@usevenice/cdk-core' import {TRPCProvider} from '@usevenice/engine-frontend' import React from 'react' import { - SupabaseViewerProvider, + SupabaseProvider, useSupabaseContext, -} from '../../contexts/SupabaseViewerProvider' +} from '../../contexts/supabase-context' +import {ViewerContext} from '../../contexts/viewer-context' import {createQueryClient} from '../../lib/query-client' -import type {Database} from '../../supabase/supabase.gen' -import {useViewerContext} from '../../contexts/viewer-context' +import type {Database as DB} from '../../supabase/supabase.gen' -export function AdminLayout({ - children, - initialViewer, -}: { +export function AdminLayout(props: { children: React.ReactNode - initialViewer: Viewer & {accessToken?: string | null} + /** Viewer will be inferred from this... */ + initialAccessToken: string | null | undefined }) { - console.log('[AdminLayout] rendering', initialViewer) - const {current: queryClient} = React.useRef(createQueryClient()) - const {current: supabase} = React.useRef( - createBrowserSupabaseClient({}), - ) + console.log('[AdminLayout] rendering', props.initialAccessToken) + const {current: supabase} = React.useRef(createBrowserSupabaseClient({})) + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any ;(globalThis as any).supabase = supabase - ;(globalThis as any).queryClient = queryClient return ( - - - <_TRPCProvider>{children} - - + + + ) } -function _TRPCProvider({children}: {children: React.ReactNode}) { - const queryClient = useQueryClient() - const {accessToken} = useViewerContext() +/** Separate Inner component is needed in order to useSupabaseContext */ +function AdminLayoutInner({ + children, + initialAccessToken, +}: React.ComponentProps) { + const {session, status, error} = useSupabaseContext() + const accessToken = + status === 'initial' || status === 'loading' + ? initialAccessToken + : session?.access_token + const viewer = zViewerFromUnverifiedJwtToken.parse(accessToken) + + // NOTE: Should change queryClient when authenticated identity changes to reset all trpc cache + const {current: queryClient} = React.useRef(createQueryClient()) + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any + ;(globalThis as any).queryClient = queryClient return ( - - {children} - + + + + {children} + + + ) } diff --git a/apps/web/app/(admin)/layout.tsx b/apps/web/app/(admin)/layout.tsx index 0393e217..143c8182 100644 --- a/apps/web/app/(admin)/layout.tsx +++ b/apps/web/app/(admin)/layout.tsx @@ -14,7 +14,7 @@ export default async function AdminLayoutServer({ console.log('[AdminLayoutServer] rendering') // We only get the viewer from cookies to be consistent with how it works // createBrowserSupabaseClient which only uses cookie and does not use header etc. - const viewer = await serverGetViewer({cookies}) + const {accessToken} = await serverGetViewer({cookies}) - return {children} + return {children} } diff --git a/apps/web/app/(admin)/login/page.tsx b/apps/web/app/(admin)/login/page.tsx index 466e654f..4ad898de 100644 --- a/apps/web/app/(admin)/login/page.tsx +++ b/apps/web/app/(admin)/login/page.tsx @@ -3,7 +3,7 @@ import {Auth, ThemeSupa} from '@supabase/auth-ui-react' import {useMutation} from '@tanstack/react-query' -import {useSupabaseContext} from '../../../contexts/SupabaseViewerProvider' +import {useSupabaseContext} from '../../../contexts/supabase-context' import {useViewerContext} from '../../../contexts/viewer-context' import {VeniceTheme} from '../../../themes' diff --git a/apps/web/contexts/SupabaseViewerProvider.tsx b/apps/web/contexts/supabase-context.tsx similarity index 74% rename from apps/web/contexts/SupabaseViewerProvider.tsx rename to apps/web/contexts/supabase-context.tsx index af5e49ed..0958c865 100644 --- a/apps/web/contexts/SupabaseViewerProvider.tsx +++ b/apps/web/contexts/supabase-context.tsx @@ -1,34 +1,28 @@ /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */ import type {Session, SupabaseClient} from '@supabase/supabase-js' -import type {Viewer} from '@usevenice/cdk-core' -import {zViewerFromUnverifiedJwtToken} from '@usevenice/cdk-core' import React from 'react' import {browserAnalytics} from '../lib/browser-analytics' import type {Database} from '../supabase/supabase.gen' import type {AsyncStatus} from './viewer-context' -import {ViewerContext} from './viewer-context' export const SupabaseContext = React.createContext< | { - session: Session | null | undefined supabase: SupabaseClient + session: Session | null | undefined + status: AsyncStatus + error: unknown } | undefined >(undefined) export interface SupabaseProviderProps { supabase: SupabaseClient - initialViewer?: Viewer & {accessToken?: string | null} children: React.ReactNode } // TODO: Maybe separate out to SupabaseProvider and ViewerProvider? -export function SupabaseViewerProvider({ - supabase, - initialViewer = {role: 'anon'}, - children, -}: SupabaseProviderProps) { +export function SupabaseProvider({supabase, children}: SupabaseProviderProps) { const [{session, error, status}, setState] = React.useState<{ session: Session | null error: unknown @@ -76,19 +70,9 @@ export function SupabaseViewerProvider({ } }, [email, phone, userId]) - const accessToken = - status === 'initial' || status === 'loading' - ? initialViewer.accessToken - : session?.access_token - const viewer = - status === 'initial' || status === 'loading' - ? initialViewer - : zViewerFromUnverifiedJwtToken.parse(accessToken) return ( - - - {children} - + + {children} ) }