fix: add onboarding check to appDir pages (#1098)

src/app/(default)/components/PageFooter.tsx

@@ -4,7 +4,7 @@ import { Logo, LogoSize } from '../header'
  */
 export const PageFooter: React.FC = () => {
   return (
-    <footer className='relative footer p-10 bg-base-200 bg-base-content text-base-100'>
+    <footer className='relative footer p-10 bg-base-content text-base-100'>
       <aside>
         <div className='border-2 border-accent py-3 pl-2 pr-4 rounded-full'><Logo size={LogoSize.md} className='fill-accent' /></div>
         <p><span className='font-semibold text-lg'>OpenBeta</span><br /><span className='tracking-tight font-sm'>Free climbing database built & run by climbers.</span></p>

src/app/(default)/layout.tsx

@@ -6,6 +6,7 @@ import { PageFooter } from './components/PageFooter'
 import { NextAuthProvider } from '@/components/auth/NextAuthProvider'
 import { ReactToastifyProvider } from './components/ReactToastifyProvider'
 import { BlockingAlertUploadingInProgress } from './components/ui/GlobalAlerts'
+import { OnboardingCheck } from '@/components/auth/OnboardingCheck'
 
 export const metadata: Metadata = {
   title: 'OpenBeta',
@@ -33,6 +34,7 @@ export default function RootLayout ({
           <div>
             {children}
           </div>
+          <OnboardingCheck />
         </NextAuthProvider>
         <PageFooter />
         <ReactToastifyProvider />

src/app/(maps)/components/ProfileMenu.tsx

@@ -2,6 +2,7 @@
 import { SessionProvider } from 'next-auth/react'
 import { House } from '@phosphor-icons/react/dist/ssr'
 import AuthenticatedProfileNavButton from '@/components/AuthenticatedProfileNavButton'
+import { OnboardingCheck } from '@/components/auth/OnboardingCheck'
 
 export const ProfileMenu: React.FC = () => {
   return (
@@ -12,6 +13,7 @@ export const ProfileMenu: React.FC = () => {
           <AuthenticatedProfileNavButton isMobile={false} />
         </nav>
       </div>
+      <OnboardingCheck />
     </SessionProvider>
   )
 }

src/components/auth/OnboardingCheck.tsx

@@ -0,0 +1,14 @@
+'use client'
+import useUsernameCheck, { useUsernameCheckAppDir } from '@/js/hooks/useUsernameCheck'
+
+/**
+ * A wrapper component to imperatively check if the user has completed onboarding.
+ */
+export const OnboardingCheck: React.FC<{ isAppDir?: boolean }> = ({ isAppDir = true }) => {
+  if (isAppDir) {
+    useUsernameCheckAppDir()
+  } else {
+    useUsernameCheck()
+  }
+  return null
+}

src/js/hooks/useUsernameCheck.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { useRouter as useRouterAppDir, usePathname } from 'next/navigation'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 import useUserProfileCmd from './useUserProfileCmd'
@@ -25,3 +26,27 @@ export default function useUsernameCheck (): void {
     }
   }, [status])
 }
+
+/**
+ * A global hook that forces new users to go to the user name screen.  Use this version for pages in the `/app` directory (Next v13).
+ */
+export function useUsernameCheckAppDir (): void {
+  const router = useRouterAppDir()
+  const pathname = usePathname()
+  const { data, status } = useSession()
+  const { getUsernameById } = useUserProfileCmd({ accessToken: data?.accessToken as string })
+
+  useEffect(() => {
+    const uuid = data?.user.metadata.uuid
+    if (pathname.startsWith('/auth/')) {
+      return
+    }
+    if (status === 'authenticated' && uuid != null) {
+      void getUsernameById({ userUuid: uuid }).then(usernameInfo => {
+        if (usernameInfo === null) {
+          void router.push('/account/changeUsername')
+        }
+      })
+    }
+  }, [status])
+}

src/pages/_app.tsx

@@ -10,10 +10,10 @@ import 'react-toastify/dist/ReactToastify.min.css'
 
 import '../styles/global.css'
 import '../../public/fonts/fonts.css'
-import useUsernameCheck from '../js/hooks/useUsernameCheck'
 import { useUserGalleryStore } from '../js/stores/useUserGalleryStore'
 import { BlockingAlert } from '../components/ui/micro/AlertDialogue'
 import { XMarkIcon } from '@heroicons/react/24/outline'
+import { OnboardingCheck } from '@/components/auth/OnboardingCheck'
 
 Router.events.on('routeChangeStart', () => NProgress.start())
 Router.events.on('routeChangeComplete', () => NProgress.done())
@@ -42,7 +42,7 @@ export default function MyApp ({ Component, pageProps: { session, ...pageProps }
                 </>
                 )
           }
-        <NewUserCheck />
+        <OnboardingCheck isAppDir={false} />
       </SessionProvider>
       <ToastContainer
         position='bottom-right'
@@ -83,15 +83,6 @@ const Auth: React.FC<any> = ({ children }) => {
   return children
 }
 
-/**
- * A wrapper component so that we can call the username check hook
- * inside SessionProvider.
- */
-const NewUserCheck: React.FC = () => {
-  useUsernameCheck()
-  return null
-}
-
 const ToastCloseButton: React.FC<any> = ({ closeToast }) => (
   <button className='self-center btn btn-square btn-outline' onClick={closeToast}>
     <XMarkIcon