Fix data hydration issue for permissions and ownerships

app/admin/layout.tsx

@@ -1,4 +1,9 @@
-import { QueryClient } from '@tanstack/react-query'
+import {
+  QueryClient,
+  dehydrate,
+  HydrationBoundary,
+} from '@tanstack/react-query'
+import { Suspense } from 'react'
 import { headers } from 'next/headers'
 import { redirect } from 'next/navigation'
 import LayoutContainer from '@components/admin/layout-container'
@@ -29,8 +34,8 @@ export async function fetchPermissionsHydrate() {
     headers: headers(),
   })
   const data = await response.json()
-  const listingIds = data.permission?.listings.map((l) => l.id)
-  const webIds = data.permission?.webs.map((l) => l.id)
+  const listingIds = data.permission?.listings.map((l) => l.id) ?? []
+  const webIds = data.permission?.webs.map((l) => l.id) ?? []
   return { listingIds, webIds, fullPermissionData: data.permission }
 }
 
@@ -44,18 +49,22 @@ export default async function Layout({ children }) {
   const queryClient = new QueryClient()
   await queryClient.prefetchQuery({
     queryKey: ['permission'],
-    queryFn: () => fetchPermissionsHydrate(),
+    queryFn: fetchPermissionsHydrate,
   })
 
   await queryClient.prefetchQuery({
     queryKey: ['my-ownerships'],
-    queryFn: () => fetchMyOwnershipsHydrate(),
+    queryFn: fetchMyOwnershipsHydrate,
   })
 
   return (
     <Providers>
       <SessionProvider session={session}>
-        <LayoutContainer>{children}</LayoutContainer>
+        <LayoutContainer>
+          <HydrationBoundary state={dehydrate(queryClient)}>
+            <Suspense>{children}</Suspense>
+          </HydrationBoundary>
+        </LayoutContainer>
       </SessionProvider>
     </Providers>
   )

app/admin/page.tsx

@@ -1,9 +1,9 @@
 'use client'
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams, redirect } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import { useEffect, useMemo } from 'react'
 import posthog from 'posthog-js'
-import { Center, Spinner, Box } from '@chakra-ui/react'
+import { Center, Spinner } from '@chakra-ui/react'
 import { driver } from 'driver.js'
 import 'driver.js/dist/driver.css'
 
@@ -14,7 +14,6 @@ import useDeleteListing from '@hooks/listings/useDeleteListing'
 import usePermissions from '@hooks/permissions/usePermissions'
 import useIsOwnerOfCurrentWeb from '@hooks/ownership/useIsOwnerOfCurrentWeb'
 import { useAppContext } from '@store/hooks'
-import WebCreation from '@components/admin/web-creation'
 
 const driverObj = driver({
   showProgress: true,
@@ -120,20 +119,16 @@ export default function AdminPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [firstTime])
 
-  if (allowedListings === null) {
+  if (isLoadingWebs || allowedListings === null) {
     return (
       <Center height="50vh">
         <Spinner size="xl" />
       </Center>
     )
   }
 
-  if (!isLoadingWebs && allowedWebs.length === 0) {
-    return (
-      <Box px={{ base: '4', md: '10' }} py={4} maxWidth="2xl" mx="auto">
-        <WebCreation />
-      </Box>
-    )
+  if (allowedWebs.length === 0) {
+    redirect('/admin/welcome')
   }
 
   return (

app/admin/welcome/page.tsx

@@ -0,0 +1,11 @@
+'use client'
+import { Box } from '@chakra-ui/react'
+import WebCreation from '@components/admin/web-creation'
+
+export default function WelcomePage() {
+  return (
+    <Box px={{ base: '4', md: '10' }} py={4} maxWidth="2xl" mx="auto">
+      <WebCreation />
+    </Box>
+  )
+}

app/providers.tsx

@@ -29,7 +29,6 @@ function makeQueryClient() {
   })
 }
 
-// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 let browserQueryClient: QueryClient | undefined = undefined
 
 function getQueryClient() {

components/admin/web-creation/WebCreation.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import Image from 'next/image'
+import { useQueryClient } from '@tanstack/react-query'
 import posthog from 'posthog-js'
 import {
   chakra,
@@ -80,6 +81,7 @@ const SlugField = () => {
 }
 
 const WebCreation = () => {
+  const queryClient = useQueryClient()
   const { createWeb, isPending, isSuccess, isError, errorMessage } =
     useCreateWeb()
   const router = useRouter()
@@ -90,8 +92,9 @@ const WebCreation = () => {
 
   useEffect(() => {
     if (isSuccess) {
+      queryClient.invalidateQueries({ queryKey: ['webs'] })
+      queryClient.invalidateQueries({ queryKey: ['my-ownerships'] })
       router.push('/admin?firstTime=true')
-      router.refresh()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSuccess])

hooks/webs/useAllowedWebs.tsx

@@ -42,7 +42,7 @@ const useAllowedWebs = () => {
 
   return {
     allowedWebs: allAllowedWebs,
-    isLoadingWebs: isLoadingWebs,
+    isLoadingWebs: isLoadingWebs || isFetchingWebs,
     isLoading: isLoadingPermissions || isLoadingOwnerships || isFetchingWebs,
   }
 }

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.