clients/web/docs: revamp UserContextProvider to allow set the user fr…

…om the client

clients/apps/web/src/app/[organization]/[repo]/issues/[number]/(create)/PledgePage.stories.tsx

@@ -32,7 +32,7 @@ export const Default: Story = {
 
   render: (args) => {
     return (
-      <UserContextProvider user={{}}>
+      <UserContextProvider user={undefined}>
         <PolarQueryClientProvider>
           <PublicLayout showUpsellFooter={true}>
             <ClientPage {...args} />

clients/apps/web/src/app/layout.tsx

@@ -76,7 +76,7 @@ export default async function RootLayout({
           inter.className,
         )}
       >
-        <UserContextProvider user={{ user: authenticatedUser }}>
+        <UserContextProvider user={authenticatedUser}>
           <PolarPostHogProvider>
             <PolarThemeProvider>
               <PolarToploaderProvider>

clients/apps/web/src/components/Documentation/UserMenu.tsx

@@ -1,31 +1,15 @@
 'use client'
 
 import { PolarMenu } from '@/app/[organization]/(sidebar)/LayoutPolarMenu'
+import { useClientSideLoadedUser } from '@/hooks/docs'
 import { useListAdminOrganizations } from '@/hooks/queries'
-import { api } from '@/utils/api'
-import { UserRead } from '@polar-sh/sdk'
 import { Skeleton } from 'polarkit/components/ui/skeleton'
-import { useCallback, useEffect, useState } from 'react'
 
 const UserMenu = () => {
-  const [loaded, setLoaded] = useState(false)
-  const [currentUser, setCurrentUser] = useState<UserRead | undefined>()
-  const { data: organizations, refetch } = useListAdminOrganizations(false)
-
-  const reload = useCallback(async (): Promise<undefined> => {
-    try {
-      const user = await api.users.getAuthenticated()
-      setCurrentUser(user)
-      await refetch()
-    } catch {
-    } finally {
-      setLoaded(true)
-    }
-  }, [refetch])
-
-  useEffect(() => {
-    reload()
-  }, [reload])
+  const { user, loaded } = useClientSideLoadedUser()
+  const { data: organizations } = useListAdminOrganizations(
+    loaded && user !== undefined,
+  )
 
   if (!loaded) {
     return (
@@ -40,7 +24,7 @@ const UserMenu = () => {
 
   return (
     <PolarMenu
-      authenticatedUser={currentUser}
+      authenticatedUser={user}
       userAdminOrganizations={organizations?.items ?? []}
     />
   )

clients/apps/web/src/components/Layout/DashboardLayout.stories.tsx

@@ -29,7 +29,7 @@ export const Default: Story = {
     padding: 'p-0 m-0',
   },
   render: (args) => (
-    <UserContextProvider user={{}}>
+    <UserContextProvider user={undefined}>
       <PolarQueryClientProvider>
         <DashboardLayout {...args}>
           <DashboardBody>
@@ -60,7 +60,7 @@ export const Header: Story = {
   },
   render: (args) => {
     return (
-      <UserContextProvider user={{}}>
+      <UserContextProvider user={undefined}>
         <PolarQueryClientProvider>
           <DashboardLayout {...args}>
             <DashboardHeader>
@@ -84,7 +84,7 @@ export const RepoPicker: Story = {
   },
   render: (args) => {
     return (
-      <UserContextProvider user={{}}>
+      <UserContextProvider user={undefined}>
         <PolarQueryClientProvider>
           <DashboardLayout {...args}>
             <DashboardHeader>

clients/apps/web/src/components/Layout/Public/Topbar.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
     chromatic: { viewports: [390, 1200] },
   },
   render: (args) => (
-    <UserContextProvider user={{}}>
+    <UserContextProvider user={undefined}>
       <PolarQueryClientProvider>
         <Topbar {...args} />
       </PolarQueryClientProvider>

clients/apps/web/src/components/Pledge/PledgeCheckoutFundOnCompletion.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof PledgeCheckoutFundOnCompletion> = {
     },
   },
   render: (args) => (
-    <UserContextProvider user={{}}>
+    <UserContextProvider user={undefined}>
       <div className="max-w-[400px]">
         <PledgeCheckoutFundOnCompletion {...args} />
       </div>

clients/apps/web/src/hooks/auth.ts

@@ -13,10 +13,6 @@ export const useAuth = (): {
 } => {
   const authCtx = useContext(AuthContext)
 
-  if (!authCtx) {
-    throw new Error('can not use useAuth outside of AuthContext')
-  }
-
   const [currentUser, setCurrentUser] = useState(authCtx.user)
 
   const reloadUser = async (): Promise<undefined> => {

clients/apps/web/src/hooks/docs.ts

@@ -0,0 +1,36 @@
+import { AuthContext } from '@/providers/auth'
+import { api } from '@/utils/api'
+import { UserRead } from '@polar-sh/sdk'
+import { useCallback, useContext, useEffect, useState } from 'react'
+
+export const useClientSideLoadedUser = (): {
+  user: UserRead | undefined
+  loaded: boolean
+} => {
+  const { user: contextUser, setUser: setContextUser } = useContext(AuthContext)
+  const [loaded, setLoaded] = useState(false)
+
+  const loadUser = useCallback(async (): Promise<undefined> => {
+    if (contextUser) {
+      setLoaded(true)
+      return
+    }
+
+    try {
+      const user = await api.users.getAuthenticated()
+      setContextUser(user)
+    } catch {
+    } finally {
+      setLoaded(true)
+    }
+  }, [contextUser, setContextUser])
+
+  useEffect(() => {
+    loadUser()
+  }, [loadUser])
+
+  return {
+    user: contextUser,
+    loaded,
+  }
+}

clients/apps/web/src/providers/auth.tsx

@@ -5,18 +5,29 @@ import React from 'react'
 
 export type AuthContextValue = {
   user?: UserRead
+  setUser: (user: UserRead) => void
 }
 
-export const AuthContext = React.createContext<AuthContextValue | undefined>(
-  undefined,
+const stub = (): never => {
+  throw new Error('You forgot to wrap your component in <UserContextProvider>.')
+}
+
+export const AuthContext = React.createContext<AuthContextValue>(
+  // @ts-ignore
+  stub,
 )
 
 export const UserContextProvider = ({
-  user,
+  user: _user,
   children,
 }: {
-  user: AuthContextValue
+  user: UserRead | undefined
   children: React.ReactNode
 }) => {
-  return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>
+  const [user, setUser] = React.useState<UserRead | undefined>(_user)
+  return (
+    <AuthContext.Provider value={{ user, setUser }}>
+      {children}
+    </AuthContext.Provider>
+  )
 }

clients/apps/web/src/stories/CheckoutSuccess.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof CheckoutSuccess> = {
   },
   render: (args) => {
     return (
-      <UserContextProvider user={{}}>
+      <UserContextProvider user={undefined}>
         <PolarQueryClientProvider>
           <CheckoutSuccess {...args} />
         </PolarQueryClientProvider>