clients/web/docs: fix user menu not loading on static pages

polarsource · Jul 8, 2024 · f2c5901 · f2c5901
1 parent 60ba4fc
commit f2c5901
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 90 deletions.
diff --git a/clients/apps/web/src/app/[organization]/(sidebar)/LayoutPolarMenu.tsx b/clients/apps/web/src/app/[organization]/(sidebar)/LayoutPolarMenu.tsx
@@ -38,28 +38,26 @@ export const PolarMenu = ({
   const loginLink = `${CONFIG.FRONTEND_BASE_URL}/login?return_to=${loginReturnTo}`
 
   return (
-    <div className="flex flex-row items-center gap-x-6">
+    <div className="flex h-9 flex-row items-center gap-x-6">
       {authenticatedUser ? (
-        <div>
-          <div className="relative flex w-max flex-shrink-0 flex-row items-center justify-between gap-x-6">
-            {hasAdminOrgs && (
-              <Link href={creatorPath}>
-                <Button>
-                  <div className="flex flex-row items-center gap-x-2">
-                    <span className="whitespace-nowrap text-xs">
-                      Creator Dashboard
-                    </span>
-                    <ArrowForwardOutlined fontSize="inherit" />
-                  </div>
-                </Button>
-              </Link>
-            )}
-            <PublicProfileDropdown
-              authenticatedUser={authenticatedUser}
-              className="flex-shrink-0"
-              showAllBackerRoutes
-            />
-          </div>
+        <div className="relative flex w-max flex-shrink-0 flex-row items-center justify-between gap-x-6">
+          {hasAdminOrgs && (
+            <Link href={creatorPath}>
+              <Button>
+                <div className="flex flex-row items-center gap-x-2">
+                  <span className="whitespace-nowrap text-xs">
+                    Creator Dashboard
+                  </span>
+                  <ArrowForwardOutlined fontSize="inherit" />
+                </div>
+              </Button>
+            </Link>
+          )}
+          <PublicProfileDropdown
+            authenticatedUser={authenticatedUser}
+            className="flex-shrink-0"
+            showAllBackerRoutes
+          />
         </div>
       ) : (
         <>

diff --git a/clients/apps/web/src/app/docs/layout.tsx b/clients/apps/web/src/app/docs/layout.tsx
@@ -1,18 +1,34 @@
+import UserMenu from '@/components/Documentation/UserMenu'
 import { BrandingMenu } from '@/components/Layout/Public/BrandingMenu'
 import Footer from '@/components/Organization/Footer'
-import { getServerSideAPI } from '@/utils/api/serverside'
-import { ListResourceOrganization, UserRead } from '@polar-sh/sdk'
-import { notFound } from 'next/navigation'
 import { PropsWithChildren } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { PolarMenu } from '../[organization]/(sidebar)/LayoutPolarMenu'
 
 export default async function Layout({ children }: PropsWithChildren) {
+  const centerClsx =
+    'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
   return (
     <div className="dark:bg-polar-950 flex w-full flex-col items-center gap-y-12 bg-white">
       <div className="flex h-fit w-full max-w-[100vw] flex-row justify-stretch">
         <div className="flex w-full flex-grow flex-col gap-y-12 pt-12 md:pt-0">
-          <DocumentationPageTopbar />
+          <div className="dark:bg-polar-950 dark:border-polar-700 relative hidden flex-row items-center justify-between border-b border-gray-100 bg-white px-4 py-8 md:flex md:px-12">
+            <h1 className="text-xl font-medium">Documentation</h1>
+
+            <BrandingMenu
+              className={twMerge('hidden md:block', centerClsx)}
+              logoClassName="dark:text-white"
+              size={50}
+            />
+            <BrandingMenu
+              className={twMerge('md:hidden', centerClsx)}
+              logoClassName="dark:text-white"
+              size={50}
+            />
+
+            <div className="flex flex-row items-center gap-x-6">
+              <UserMenu />
+            </div>
+          </div>
           <div className="flex flex-col gap-x-16 gap-y-16 px-4 pb-24 pt-16 md:flex-row md:items-start md:justify-between md:px-12 md:pt-0">
             {children}
           </div>
@@ -22,57 +38,3 @@ export default async function Layout({ children }: PropsWithChildren) {
     </div>
   )
 }
-
-const DocumentationPageTopbar = async () => {
-  const api = getServerSideAPI()
-  let authenticatedUser: UserRead | undefined
-  let userAdminOrganizations: ListResourceOrganization | undefined
-
-  try {
-    const [loadAuthenticatedUser, loadUserAdminOrganizations] =
-      await Promise.all([
-        api.users.getAuthenticated({ cache: 'no-store' }).catch(() => {
-          // Handle unauthenticated
-          return undefined
-        }),
-        // No caching, as we're expecting immediate updates to the response if the user converts to a maintainer
-        api.organizations
-          .list({ isAdminOnly: true }, { cache: 'no-store' })
-          .catch(() => {
-            // Handle unauthenticated
-            return undefined
-          }),
-      ])
-    authenticatedUser = loadAuthenticatedUser
-    userAdminOrganizations = loadUserAdminOrganizations
-  } catch (e) {
-    notFound()
-  }
-
-  const centerClsx =
-    'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
-
-  return (
-    <div className="dark:bg-polar-950 dark:border-polar-700 relative hidden flex-row items-center justify-between border-b border-gray-100 bg-white px-4 py-8 md:flex md:px-12">
-      <h1 className="text-xl font-medium">Documentation</h1>
-
-      <BrandingMenu
-        className={twMerge('hidden md:block', centerClsx)}
-        logoClassName="dark:text-white"
-        size={50}
-      />
-      <BrandingMenu
-        className={twMerge('md:hidden', centerClsx)}
-        logoClassName="dark:text-white"
-        size={50}
-      />
-
-      <div className="flex flex-row items-center gap-x-6">
-        <PolarMenu
-          authenticatedUser={authenticatedUser}
-          userAdminOrganizations={userAdminOrganizations?.items ?? []}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/clients/apps/web/src/components/Documentation/UserMenu.tsx b/clients/apps/web/src/components/Documentation/UserMenu.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { PolarMenu } from '@/app/[organization]/(sidebar)/LayoutPolarMenu'
+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])
+
+  if (!loaded) {
+    return (
+      <div className="flex h-9 flex-row items-center gap-x-6">
+        <div className="relative flex w-max flex-shrink-0 flex-row items-center justify-between gap-x-6">
+          <Skeleton className="h-8 w-40 rounded-full" />
+          <Skeleton className="h-10 w-10 rounded-full" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <PolarMenu
+      authenticatedUser={currentUser}
+      userAdminOrganizations={organizations?.items ?? []}
+    />
+  )
+}
+
+export default UserMenu
diff --git a/clients/apps/web/src/hooks/queries/org.ts b/clients/apps/web/src/hooks/queries/org.ts
@@ -14,16 +14,16 @@ import {
 } from '@tanstack/react-query'
 import { defaultRetry, serverErrorRetry } from './retry'
 
-export const useListAdminOrganizations: () => UseQueryResult<ListResourceOrganization> =
-  () =>
-    useQuery({
-      queryKey: ['user', 'adminOrganizations'],
-      queryFn: () =>
-        api.organizations.list({
-          isAdminOnly: true,
-        }),
-      retry: defaultRetry,
-    })
+export const useListAdminOrganizations = (enabled: boolean = true) =>
+  useQuery({
+    queryKey: ['user', 'adminOrganizations'],
+    queryFn: () =>
+      api.organizations.list({
+        isAdminOnly: true,
+      }),
+    retry: defaultRetry,
+    enabled,
+  })
 
 export const useOrganizationLookup: (
   name: string,