Adapt to newest changes

src/main/resources/react4xp/componentRegistry.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ComponentRegistry } from '@enonic/react-components';
+import { BaseShortcut } from './contentTypes/BaseShortcut';
 import { PortalSite } from './contentTypes/PortalSite';
 import { DefaultPage } from './pages/DefaultPage';
 import { TwoColumnsLayout } from './layouts/TwoColumnsLayout';
@@ -15,10 +16,15 @@ import {
 export const componentRegistry = new ComponentRegistry;
 // componentRegistry.addUrlPath(/\/fisk\//, { View: FiskPage });
 
+componentRegistry.addContentType('base:shortcut', { View: BaseShortcut });
 componentRegistry.addContentType('portal:site', { View: PortalSite });
+
 componentRegistry.addPage('com.enonic.app.react4xp:default', { View: DefaultPage });
+
 componentRegistry.addLayout('com.enonic.app.react4xp:twoColumns', { View: TwoColumnsLayout });
+
 componentRegistry.addPart('com.enonic.app.react4xp:example', { View: ExamplePart });
+
 componentRegistry.addMacro('panel', { View: DefaultPanel });
 componentRegistry.addMacro('error', { View: ErrorPanel });
 componentRegistry.addMacro('info', { View: InfoPanel });

src/main/resources/react4xp/contentTypes/BaseShortcut.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import type { BaseShortcutProps } from '/types/BaseShortcutProps';
+
+export const BaseShortcut = (props: BaseShortcutProps) => {
+	console.debug('BaseShortcut props:', props);
+	const {
+		error,
+		warning,
+	} = props;
+	return (
+		<div>
+			<h1>{error ? 'Error' : 'Warning'}</h1>
+			<p>{error || warning}</p>
+		</div>
+	);
+};

src/main/resources/react4xp/contentTypes/PortalSite.tsx

@@ -1,4 +1,8 @@
-export const PortalSite = ({ title, text }) => {
+import type { PortalSiteProps } from '/types/PortalSiteProps';
+
+import * as React from 'react';
+
+export const PortalSite = ({ title, text }: PortalSiteProps) => {
 	return (
 		<div>
 			<h1>{title}</h1>

src/main/resources/site/content-types/baseShortcutProcessor.ts

@@ -0,0 +1,126 @@
+import type { Content } from '@enonic-types/core';
+import type { ContentTypeProcessorFunction } from '/lib/enonic/react4xp/DataFetcher';
+import type { BaseShortcutProps } from '/types/BaseShortcutProps';
+
+// import { toStr } from '@enonic/js-utils/value/toStr';
+import {
+	exists,
+	get as getContentByKey
+} from '/lib/xp/content';
+import { pageUrl } from '/lib/xp/portal';
+
+type BaseShortcutContent = Content<{
+	parameters: {
+		name: string;
+		value: string;
+	}[];
+	target: string;
+}, 'base:shortcut'>;
+
+// declare global {
+// 	interface XpContent {
+// 		'base:shortcut': BaseShortcutContent;
+// 	}
+// }
+
+export const baseShortcutProcessorWrapper = (dataFetcher): ContentTypeProcessorFunction<BaseShortcutContent> => (params) => {
+	// log.info('baseShortcutProcessor params:%s', toStr(params));
+	const {
+		content,
+		component, // CAUTION: Important so it doesn't end up in passAlong.
+		request,
+		...passAlong
+	} = params;
+	const { type: contentType } = content;
+
+	if ( contentType === 'base:shortcut' ) {
+		const { data } = content;
+		const {
+			parameters = [],
+			target: targetContentId,
+		} = data;
+		const { mode } = request;
+		// When ok
+		//  In live and preview redirect
+		//  In edit and inline render the target content?
+		// When not ok
+		//  In live show 404
+		//  In edit show warning
+		//  In inline and preview show error
+		if (targetContentId && exists({ key: targetContentId })) {
+			if (mode === 'live' || mode === 'preview') {
+				return {
+					response: {
+						redirect: `${pageUrl({ id: targetContentId })}${
+							parameters.length
+								? `?${
+									parameters.map(({
+										name,
+										value
+									}) => `${name}=${value}`).join('&')
+								}`
+								: ''
+						}`
+					}
+				};
+			} else {
+				const targetContent = getContentByKey({ key: targetContentId });
+				const {
+					component,
+					response,
+				} = dataFetcher.process({
+					...passAlong,
+					content: targetContent,
+					// component, // Gotten from content inside DataFetcher :)
+					request,
+				});
+				if (response) {
+					return {
+						response
+					};
+				}
+				// TODO Does this work?
+				return {
+					props: component['props']
+				};
+			}
+		}
+
+		if (mode === 'live') {
+			return {
+				response:  {
+					status: 404
+				}
+			};
+		}
+
+		if (!targetContentId) {
+			if (mode === 'edit') {
+				return {
+					props: <BaseShortcutProps>{
+						warning: `Please select a target content for this shortcut.`
+					}
+				};
+			}
+			// mode === 'inline' || mode === 'preview'
+			return {
+				props: <BaseShortcutProps>{
+					error: `Target content NOT selected for this shortcut!`
+				}
+			};
+		} else if (!exists({ key: targetContentId })) {
+			return {
+				props: <BaseShortcutProps>{
+					error: `Shortcut target content NOT found: ${targetContentId}!`
+				}
+			};
+		}
+	} // base:shortcut
+
+	const {
+		data,
+	} = content;
+	return {
+		props: data
+	};
+};

src/main/resources/site/content-types/portalSiteProcessor.ts

@@ -0,0 +1,17 @@
+import type { Site } from '@enonic-types/lib-content';
+import type { ContentTypeProcessorFunction } from '/lib/enonic/react4xp/DataFetcher';
+// import type { PortalSiteProps } from '/types/PortalSiteProps';
+
+// import { toStr } from '@enonic/js-utils/value/toStr';
+
+export const portalSiteProcessor: ContentTypeProcessorFunction<
+	Site<Record<string, unknown>>
+> = (params) => {
+	// log.info('portalSiteProcessor params:%s', toStr(params));
+	return {
+		props: /*<PortalSiteProps>*/{
+			title: 'React4XP Starter',
+			text: 'Welcome to the React4XP starter!',
+		}
+	};
+};

src/main/resources/site/controllers/app.ts

@@ -1,26 +1,39 @@
-import type { Request } from '@enonic-types/core';
+import type { Request, Response } from '@enonic-types/core';
 import type { AppProps } from '/types/AppProps';
 
-// import { toStr } from '@enonic/js-utils/value/toStr';
-import { getContent } from '/lib/xp/portal';
+import { toStr } from '@enonic/js-utils/value/toStr';
+import { getContent, url } from '/lib/xp/portal';
 import { render } from '/lib/enonic/react4xp';
 import { dataFetcher } from '/site/controllers/dataFetcher';
 
-export function get(request: Request) {
+export function get(request: Request): Response {
 	// log.info('app controller request:%s', toStr(request));
+	log.info('app controller request:%s', toStr({
+		method: request.method,
+		mode: request.mode,
+		params: request.params,
+		url: request.url,
+	}));
 
 	const content = getContent();
 	// log.info('app controller content:%s', toStr(content));
 
-	const renderableComponent = dataFetcher.process({
+	const {
+		component,
+		response
+	} = dataFetcher.process({
 		// component, // gotten from content inside DataFetcher
 		content, // Since it's already gotten, pass it along, so DataFetcher doesn't have to get it again.
 		request
 	});
-	// log.info('app controller renderableComponent:%s', toStr(renderableComponent));
+	if (response) {
+		// log.info('app controller response:%s', toStr(response));
+		return response; // This also handles the special case when ContentStudio needs 418.
+	}
+	// log.info('app controller component:%s', toStr(component));
 
 	const props: AppProps = {
-		component: renderableComponent
+		component
 	}
 	// log.info('app controller props:%s', toStr(props));
 

src/main/resources/site/controllers/component.ts

@@ -51,6 +51,12 @@ const getComponent = ({
 
 export function get(request: Request) {
 	// log.info('ComponentUrl request:%s', toStr(request));
+	log.info('ComponentUrl request:%s', toStr({
+		method: request.method,
+		mode: request.mode,
+		params: request.params,
+		url: request.url,
+	}));
 	const {
 		branch,
 		// contextPath,
@@ -77,19 +83,26 @@ export function get(request: Request) {
 	// log.info('ComponentUrl content:%s', toStr(content));
 
 	// const component = getComponent(); // ERROR: Doesn't work with site mapped component service!
-	const component = getComponent({
+	const origComponent = getComponent({
 		content,
 		request,
 	});
-	log.info('ComponentUrl component:%s', toStr(component));
+	log.info('ComponentUrl origComponent:%s', toStr(origComponent));
 	// const {type} = component;
 
-	const renderableComponent = dataFetcher.process({
+	const {
 		component,
+		response
+	} = dataFetcher.process({
+		component: origComponent,
 		content,
 		request
 	});
-	log.info('ComponentUrl renderableComponent:%s', toStr(renderableComponent));
+	if (response) {
+		// log.info('app controller response:%s', toStr(response));
+		return response;
+	}
+	log.info('ComponentUrl component:%s', toStr(component));
 
 	// Props for XpComponent
 	const props: Record<string, unknown> = {};
@@ -100,7 +113,7 @@ export function get(request: Request) {
 	// 		data: renderableComponent
 	// 	}
 	// } else {
-		props.component = renderableComponent;
+		props.component = component;
 	// }
 	log.info('ComponentUrl props:%s', toStr(props));
 

src/main/resources/site/controllers/dataFetcher.ts

@@ -1,13 +1,17 @@
 import { DataFetcher } from '/lib/enonic/react4xp';
-import { portalSiteProps } from '../content-types/portalSiteProps';
-import { defaultPageProps } from '../pages/default/defaultProps';
-import { twoColumnsProps } from '../layouts/twoColumns/twoColumnsProps';
-import { exampleProps } from '../parts/example/exampleProps';
+import { portalSiteProcessor } from '../content-types/portalSiteProcessor';
+import { baseShortcutProcessorWrapper } from '../content-types/baseShortcutProcessor';
+import { defaultPageProcessor } from '../pages/default/defaultPageProcessor';
+import { twoColumnsProcessor } from '../layouts/twoColumns/twoColumnsProcessor';
+import { exampleProcessor } from '../parts/example/exampleProcessor';
 
 export const dataFetcher = new DataFetcher();
-// dataFetcher.addUrlPath(/\/fisk\//, { toProps});
+// dataFetcher.addUrlPath(/\/fisk\//, { processor});
 
-dataFetcher.addContentType('portal:site', { toProps: portalSiteProps });
-dataFetcher.addPage('com.enonic.app.react4xp:default', { toProps: defaultPageProps });
-dataFetcher.addLayout('com.enonic.app.react4xp:twoColumns', { toProps: twoColumnsProps });
-// dataFetcher.addPart('com.enonic.app.react4xp:example', { toProps: exampleProps });
+// dataFetcher.addContentType('base:folder', { processor: portalSiteProps });
+dataFetcher.addContentType('base:shortcut', { processor: baseShortcutProcessorWrapper(dataFetcher) });
+// TODO dataFetcher.addContentType('portal:template-folder')
+dataFetcher.addContentType('portal:site', { processor: portalSiteProcessor });
+dataFetcher.addPage('com.enonic.app.react4xp:default', { processor: defaultPageProcessor });
+dataFetcher.addLayout('com.enonic.app.react4xp:twoColumns', { processor: twoColumnsProcessor });
+dataFetcher.addPart('com.enonic.app.react4xp:example', { processor: exampleProcessor });

src/main/resources/site/layouts/twoColumns/twoColumnsProcessor.ts

@@ -0,0 +1,26 @@
+import type { LayoutComponentProcessorFunction } from '/lib/enonic/react4xp/DataFetcher';
+
+export const twoColumnsProcessor: LayoutComponentProcessorFunction = ({
+	component,
+}) => {
+	const {regions} = component;
+	// const {mode} = request;
+	// log.info('mode:%s', mode);
+	if (!regions.left) {
+		regions.left = {
+			components: [],
+			name: 'left',
+		};
+	}
+	if (!regions.right) {
+		regions.right = {
+			components: [],
+			name: 'right',
+		};
+	}
+	return {
+		props: {
+			regions
+		}
+	};
+}