refactor: ♻️ ヘッダーを認証済みかどうかで切り替えるようにした (#7)

apps/website/src/app/(with-auth)/@routeIndicator/dashboard/page.tsx

@@ -0,0 +1,48 @@
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
+import type { NextPage } from 'next';
+import { cookies } from 'next/headers';
+import { InAppHeaderRouteIndicatorDivider, InAppHeaderRouteIndicatorIcon, InAppHeaderRouteIndicatorLabel } from '#website/layout/global/header';
+import { findUserUseCase } from '#website/use-case/find-user';
+import { findUserLostItemsUseCase } from '~website/src/use-case/find-user-lost-items';
+
+const RouteIndicator: NextPage = async () => {
+  const cookieStore = cookies();
+
+  const supabase = createServerComponentClient({ cookies: () => cookieStore });
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    return null;
+  }
+
+  const foundUser = await findUserUseCase(user.id);
+  if (!foundUser) {
+    return null;
+  }
+
+  const userLostItem = await findUserLostItemsUseCase(foundUser.authId);
+  if (!userLostItem) {
+    return null;
+  }
+
+  return userLostItem.currentTargetLostItem && foundUser.lostAndFoundState !== 'NONE' ? (
+    <>
+      <InAppHeaderRouteIndicatorDivider />
+      {!!userLostItem.currentTargetLostItem.lostItem.imageUrls[0] && (
+        <InAppHeaderRouteIndicatorIcon
+          src={userLostItem.currentTargetLostItem.lostItem.imageUrls[0]}
+          alt={`An image of ${userLostItem.currentTargetLostItem.lostItem.title}`}
+        />
+      )}
+      <InAppHeaderRouteIndicatorLabel>{userLostItem.currentTargetLostItem.lostItem.title}</InAppHeaderRouteIndicatorLabel>
+    </>
+  ) : (
+    <>
+      <InAppHeaderRouteIndicatorDivider />
+      <InAppHeaderRouteIndicatorLabel>Overview</InAppHeaderRouteIndicatorLabel>
+    </>
+  );
+};
+
+export default RouteIndicator;

apps/website/src/app/(with-auth)/@routeIndicator/default.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+const RouteIndicatorPage = (): ReactNode => null;
+
+export default RouteIndicatorPage;

apps/website/src/app/(with-auth)/@routeIndicator/report/page.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+const RouteIndicatorPage = (): ReactNode => null;
+
+export default RouteIndicatorPage;

apps/website/src/app/(with-auth)/@routeIndicator/search/page.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+const RouteIndicatorPage = (): ReactNode => null;
+
+export default RouteIndicatorPage;

apps/website/src/app/(with-auth)/layout.tsx

@@ -1,16 +1,35 @@
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
 import type { NextPage } from 'next';
+import { cookies } from 'next/headers';
 import type { ReactNode } from 'react';
+import { InAppHeader } from '#website/layout/global/header';
 import { AuthGuardProvider } from '#website/layout/with-auth/auth-guard-provider';
+import { findUserUseCase } from '#website/use-case/find-user';
 
 type WithAuthLayoutProps = {
   children: ReactNode;
+  routeIndicator: ReactNode;
 };
 
-const WithAuthLayout: NextPage<WithAuthLayoutProps> = ({ children }) => (
-  <>
-    <AuthGuardProvider />
-    {children}
-  </>
-);
+const WithAuthLayout: NextPage<WithAuthLayoutProps> = async ({ children, routeIndicator }) => {
+  // HACK: To avoid next build errors, functions that depend on async contexts need to be called outside the function that creates the new execution context.
+  // ref: https://nextjs.org/docs/messages/dynamic-server-error
+  const cookieStore = cookies();
+
+  const supabase = createServerComponentClient({ cookies: () => cookieStore });
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  const foundUser = user && (await findUserUseCase(user.id));
+
+  return (
+    <>
+      <InAppHeader user={foundUser}>{routeIndicator}</InAppHeader>
+      <AuthGuardProvider />
+      {children}
+    </>
+  );
+};
 
 export default WithAuthLayout;

apps/website/src/app/(with-no-auth)/layout.tsx

@@ -0,0 +1,32 @@
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
+import type { NextPage } from 'next';
+import { cookies } from 'next/headers';
+import type { ReactNode } from 'react';
+import { Header } from '#website/layout/global/header';
+import { findUserUseCase } from '#website/use-case/find-user';
+
+type WithNoAuthLayoutProps = {
+  children: ReactNode;
+};
+
+const WithNoAuthLayout: NextPage<WithNoAuthLayoutProps> = async ({ children }) => {
+  // HACK: To avoid next build errors, functions that depend on async contexts need to be called outside the function that creates the new execution context.
+  // ref: https://nextjs.org/docs/messages/dynamic-server-error
+  const cookieStore = cookies();
+
+  const supabase = createServerComponentClient({ cookies: () => cookieStore });
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  const foundUser = user && (await findUserUseCase(user.id));
+
+  return (
+    <>
+      <Header user={foundUser} />
+      {children}
+    </>
+  );
+};
+
+export default WithNoAuthLayout;

apps/website/src/app/layout.tsx

@@ -4,55 +4,37 @@ import { firaCode, getFontVariables, notoSans } from '@lockerai/core/font/family
 import { getBaseUrl } from '@lockerai/core/util/get-base-url';
 import { colors } from '@lockerai/design-token';
 import { cn } from '@lockerai/tailwind';
-import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
 import type { Metadata, NextPage, Viewport } from 'next';
-import { cookies } from 'next/headers';
 import type { ReactNode } from 'react';
 import { UrqlProvider } from '#website/infra/urql/ssr';
 import { Footer } from '#website/layout/global/footer';
-import { Header } from '#website/layout/global/header';
-import { findUserUseCase } from '#website/use-case/find-user';
 import '#website/style/global.css';
 
 type RootLayoutProps = {
   children: ReactNode;
 };
 
-const RootLayout: NextPage<RootLayoutProps> = async ({ children }) => {
-  // HACK: To avoid next build errors, functions that depend on async contexts need to be called outside the function that creates the new execution context.
-  // ref: https://nextjs.org/docs/messages/dynamic-server-error
-  const cookieStore = cookies();
-
-  const supabase = createServerComponentClient({ cookies: () => cookieStore });
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-
-  const foundUser = user && (await findUserUseCase(user.id));
-
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head />
-      <body className={cn(getFontVariables([firaCode, notoSans]), 'relative bg-sage-1 font-sans')}>
-        <div
-          aria-hidden
-          className={cn(
-            'absolute -z-20 h-full w-full bg-grid-light-green-7/50 dark:bg-grid-dark-green-7/50',
-            'from-pure to-[70%] [-webkit-mask-image:linear-gradient(to_bottom,var(--tw-gradient-stops))] [mask-image:linear-gradient(to_bottom,var(--tw-gradient-stops))]',
-          )}
-        />
-        <UrqlProvider>
-          <ThemeProvider attribute="data-theme" enableSystem defaultTheme="system">
-            <Header user={foundUser} />
-            {children}
-            <Footer />
-            <Sonner />
-          </ThemeProvider>
-        </UrqlProvider>
-      </body>
-    </html>
-  );
-};
+const RootLayout: NextPage<RootLayoutProps> = async ({ children }) => (
+  <html lang="en" suppressHydrationWarning>
+    <head />
+    <body className={cn(getFontVariables([firaCode, notoSans]), 'relative bg-sage-1 font-sans')}>
+      <div
+        aria-hidden
+        className={cn(
+          'absolute -z-20 h-full w-full bg-grid-light-green-7/50 dark:bg-grid-dark-green-7/50',
+          'from-pure to-[70%] [-webkit-mask-image:linear-gradient(to_bottom,var(--tw-gradient-stops))] [mask-image:linear-gradient(to_bottom,var(--tw-gradient-stops))]',
+        )}
+      />
+      <UrqlProvider>
+        <ThemeProvider attribute="data-theme" enableSystem defaultTheme="system">
+          {children}
+          <Footer />
+          <Sonner />
+        </ThemeProvider>
+      </UrqlProvider>
+    </body>
+  </html>
+);
 
 export default RootLayout;