#34: adapt rendering for relative-href <a> links and pure <img> tags

enonic · Sep 22, 2021 · 8f22ca1 · 8f22ca1
1 parent 2cdc91a
commit 8f22ca1
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 53 deletions.
diff --git a/src/components/BasePage.tsx b/src/components/BasePage.tsx
@@ -7,16 +7,16 @@ import CustomError from './errors/Error';
 import DefaultPage from "../components/pagetypes/_Default";
 import {pageSelector} from "../selectors/pageSelector";
 
+import {ResultMeta} from "../shared/data/fetchContent";
+
 
 export type BasePageProps = {
     error?: {
         code: string,
         message: string
     },
-    type?: string,
-    data?: {
-        type: string
-    }
+    meta?: ResultMeta,
+    data?: any
     fetching?: boolean
 }
 
@@ -26,7 +26,7 @@ const errorPageSelector = {
     '500': Custom500
 }
 
-const BasePage = ({type, data, error}: BasePageProps) => {
+const BasePage = ({meta, data, error}: BasePageProps) => {
     if (error) {
         // @ts-ignore
         const ErrorPage = errorPageSelector[error.code] || CustomError;
@@ -38,16 +38,17 @@ const BasePage = ({type, data, error}: BasePageProps) => {
         return null;
     }
 
-    if (!type) {
-        console.warn("BasePage props are missing 'type'. Falling back to default page type.");
+    if (!meta || !meta.type) {
+        console.warn("BasePage props are missing 'meta.type'. Falling back to default page type.");
 
-    } else if (type.startsWith('media:')) {
+    } else if (meta.type.startsWith('media:')) {
         return null;
     }
 
     // @ts-ignore
-    const SelectedPage = pageSelector[type] || DefaultPage;
+    const SelectedPage = pageSelector[meta.type] || DefaultPage;
     return <SelectedPage {...data} />;
 };
 
 export default BasePage;
+
diff --git a/src/enonic-connection-config.js b/src/enonic-connection-config.js
@@ -35,14 +35,13 @@ const getContentApiUrl = (branch, contentPathArray) => {
 
 /**
  *
- * @param contentPathArray
+ * @param contentPathString {string}
  * @return {string}
  */
-const getFullContentPath = (contentPathArray) => {
-    console.log(contentPathArray)
+const getFullContentPath = (contentPathString) => {
     return (CONNECTION_CONFIG.siteName)
-        ? `/${CONNECTION_CONFIG.siteName}/${contentPathArray.join("/")}`
-        : `/${contentPathArray.join("/")}`
+        ? `/${CONNECTION_CONFIG.siteName}/${contentPathString}`
+        : `/${contentPathString}`
 };
 
 module.exports = {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,16 +1,20 @@
 import '../styles/globals.css'
 import type {AppProps} from 'next/app'
-import Seo from '../components/blocks/seo'
-import Layout from '../components/blocks/layout'
+import Head from 'next/head';
 
 
 function MyApp({Component, pageProps}: AppProps) {
-    //console.log("pageProps: ", pageProps);
+    console.log("pageProps: ", pageProps);
     return (
-        <Layout siteTitle="Next.js PoC" random={pageProps.staticRandom}>
-            <Seo title="Poc" siteTitle="NextXP" />
+        <>
+            {
+                pageProps.meta &&
+                <Head>
+                    <base href={`/_${pageProps.meta.branch}/${pageProps.meta.path}/`} />
+                </Head>
+            }
             <Component {...pageProps} />
-        </Layout>
+        </>
     );
 }
 

diff --git a/src/pages/_draft/[[...contentPath]].tsx b/src/pages/_draft/[[...contentPath]].tsx
@@ -37,7 +37,6 @@ export const getServerSideProps = async (context: Context) => {
     return {
         props: {
             ...await fetchContent(context.params.contentPath, BRANCH),
-            staticRandom: await fetchRandom()
         }
     }
 };

diff --git a/src/shared/data/fetchContent.ts b/src/shared/data/fetchContent.ts
@@ -9,6 +9,12 @@ import { LOW_PERFORMING_DEFAULT_QUERY } from "./queries/_getDefaultData";
 import {QuerySelector, VariablesGetterFunc, VariablesGetterSelector} from "../../selectors/querySelector";
 
 
+export type Branch = 'master' | 'draft';
+
+export type ResultMeta = Meta & {
+    path: string,
+    branch: Branch
+}
 
 type Result = {
     error?: {
@@ -17,14 +23,40 @@ type Result = {
     }
 }
 export type ContentResult = Result & {
-    type?: string,
-    data?: any
+    data?: any,
+    meta: ResultMeta
 };
 type MetaResult = Result & {
     meta?: Meta
 };
 
-export type Branch = 'master' | 'draft';
+
+
+type FetcherConfig = {
+    querySelector?: QuerySelector,
+    variablesGetterSelector?: VariablesGetterSelector,
+    firstMethodKey?: boolean,
+    /*
+    apiConfig?: {
+        getGuillotineUrlDraft?: ApiGetterFunc,
+        getGuillotineUrlMaster?: ApiGetterFunc
+    },
+    */
+}
+// type ApiGetterFunc = (appName:string) => string;
+
+
+/**
+ * Sends one query to the guillotine API and asks for content type, then uses the type to select a second query and variables, which is sent to the API and fetches content data.
+ * @param contentPath string or string array: pre-split or slash-delimited _path to a content available on the API
+ * @param branch 'draft' or 'master'
+ * @returns ContentResult object: {data?: T, error?: {code, message}}
+ */
+export type ContentFetcher = (
+    contentPath: string | string[],
+    branch: Branch
+) => Promise<ContentResult>
+
 
 
 
@@ -111,31 +143,6 @@ const verifyBranchOrThrow400 = (branch: Branch) => {
 
 ///////////////////////////////////////////////////////////////////////////////// Entry:
 
-type FetcherConfig = {
-    querySelector?: QuerySelector,
-    variablesGetterSelector?: VariablesGetterSelector,
-    firstMethodKey?: boolean,
-    /*
-    apiConfig?: {
-        getGuillotineUrlDraft?: ApiGetterFunc,
-        getGuillotineUrlMaster?: ApiGetterFunc
-    },
-    */
-}
-// type ApiGetterFunc = (appName:string) => string;
-
-
-/**
- * Sends one query to the guillotine API and asks for content type, then uses the type to select a second query and variables, which is sent to the API and fetches content data.
- * @param contentPath string or string array: pre-split or slash-delimited _path to a content available on the API
- * @param branch 'draft' or 'master'
- * @returns ContentResult object: {data?: T, error?: {code, message}}
- */
-export type ContentFetcher = (
-    contentPath: string | string[],
-    branch: Branch
-) => Promise<ContentResult>
-
 
 
 /**
@@ -188,15 +195,15 @@ const buildContentFetcher = ({querySelector, variablesGetterSelector, firstMetho
             verifyBranchOrThrow400(branch);
 
             const contentPathArray = getCleanContentPathArrayOrThrow400(contentPath);
-
             const contentApiUrl = getContentApiUrl(branch, contentPathArray);
-            const fullContentPath = getFullContentPath(contentPathArray);
+            const contentPathString = contentPathArray.join("/");
+            const fullContentPath = getFullContentPath(contentPathString);
 
 
             const metaResult = await fetchMetaData(contentApiUrl, fullContentPath);
 
             if (metaResult.error) {
-                return {
+                return await {
                     error: metaResult.error
                 };
             }
@@ -230,7 +237,11 @@ const buildContentFetcher = ({querySelector, variablesGetterSelector, firstMetho
 
             return await {
                 ...await fetchContentFull(contentApiUrl, fullContentPath, query, methodKeyFromQuery, variables),
-                type
+                meta: {
+                    path: contentPathString,
+                    type,
+                    branch
+                }
             };
 
         } catch (e) {