Single component is not rendered #818

enonic · Jan 31, 2024 · 4a42e3a · 4a42e3a
1 parent 698d36c
commit 4a42e3a
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 15 deletions.
diff --git a/src/app/[locale]/[[...contentPath]]/layout.tsx b/src/app/[locale]/[[...contentPath]]/layout.tsx
@@ -0,0 +1,51 @@
+import {fetchContent, getAsset, I18n, LocaleContextProvider, RENDER_MODE, XP_REQUEST_TYPE} from '@enonic/nextjs-adapter';
+import StaticContent from '@enonic/nextjs-adapter/views/StaticContent';
+import {draftMode} from 'next/headers';
+import {ReactNode} from 'react';
+
+import '../../../styles/globals.css';
+import Footer from '../../../components/views/Footer';
+import Header from '../../../components/views/Header';
+
+import {PageProps} from './page';
+
+type LayoutProps = {
+ params: PageProps
+ children: ReactNode
+}
+
+export default async function PageLayout({params, children}: LayoutProps) {
+
+ const {isEnabled: draft} = draftMode();
+ const start = Date.now();
+ console.info(`Accessing layout ${draft ? ' (draft)' : ''}`, params);
+
+ const {meta} = await fetchContent(params);
+
+ const duration = Date.now() - start;
+ console.info(`Layout fetch took ${duration} ms`);
+
+ const isEdit = meta?.renderMode === RENDER_MODE.EDIT;
+
+ // Component rendering - for component updates in Content Studio without reloading page
+ if (meta.requestType === XP_REQUEST_TYPE.COMPONENT) {
+ return <StaticContent condition={isEdit}>
+ {
+ meta.renderMode === RENDER_MODE.NEXT ?
+ // don't wrap it in direct next access because we want to show 1 component on the page
+ children :
+ <details data-single-component-output="true">{children}</details>
+ }
+ </StaticContent>;
+ }
+
+ return (
+ <LocaleContextProvider locale={params.locale}>
+ <StaticContent condition={isEdit}>
+ <Header meta={meta} title={I18n.localize('title')} logoUrl={getAsset('/images/xp-shield.svg', meta)}/>
+ <main>{children}</main>
+ <Footer/>
+ </StaticContent>
+ </LocaleContextProvider>
+ )
+}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,40 +1,32 @@
-import {fetchContent, getAsset, I18n, LocaleContextProvider, PORTAL_COMPONENT_ATTRIBUTE} from '@enonic/nextjs-adapter';
+import {I18n, PORTAL_COMPONENT_ATTRIBUTE} from '@enonic/nextjs-adapter';
 import {Metadata} from 'next';
 import {ReactNode} from 'react';
 
 import '../../styles/globals.css';
 
 import {PageProps} from './[[...contentPath]]/page';
-import Header from '../../components/views/Header';
-import Footer from '../../components/views/Footer';
 
-export type LayoutProps = {
+type LayoutProps = {
  params: PageProps
  children: ReactNode
 }
 
-export default async function RootLayout({params, children}: LayoutProps) {
+export default async function LocaleLayout({params, children}: LayoutProps) {
 
+ // we only have locale in the params on the [locale] level
  await I18n.setLocale(params.locale);
 
  const bodyAttrs: { [key: string]: string } = {
  className: "edit",
  [PORTAL_COMPONENT_ATTRIBUTE]: "page"
  }
 
- const {meta} = await fetchContent(params);
-
- return (
- <html lang="en">
+ return (<html lang="en">
  <body {...bodyAttrs}>
- <LocaleContextProvider locale={params.locale}>
- <Header meta={meta} title={I18n.localize('title')} logoUrl={getAsset('/images/xp-shield.svg', meta)}/>
- <main>{children}</main>
- <Footer/>
- </LocaleContextProvider>
+ {children}
  </body>
  </html>
- )
+ );
 }
 
 export const metadata: Metadata = {

diff --git a/src/app/api/renderable/route.ts b/src/app/api/renderable/route.ts
@@ -1,6 +1,7 @@
 import {fetchContent, IS_DEV_MODE, RENDER_MODE} from '@enonic/nextjs-adapter';
 
 // Register component mappings
+import '../../../components/_mappings';
 import {NextRequest} from 'next/server';
 import {validatePath, validateToken} from '../../../utils';
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,20 @@
+import {Metadata} from 'next';
+import {ReactNode} from 'react';
+
+import '../styles/globals.css';
+
+
+type LayoutProps = {
+ children: ReactNode
+}
+
+/* RootLayout is required by Next.js */
+export default async function RootLayout({children}: LayoutProps) {
+
+ return (<>{children}</>);
+}
+
+export const metadata: Metadata = {
+ title: 'Next.XP',
+ description: 'The React Framework for Enonic XP',
+}