Restructure for dependency insertion and separation between data fetc…

…hing and rendering (#49). Foundation for later extraction of the data fetching to a separate (NPM?) render-agnostic module.

package.json

@@ -9,7 +9,7 @@
     "lint": "next/node_modules/.bin/next lint"
   },
   "dependencies": {
-    "next": "11.0.1",
+    "next": "^11.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

src/components/BasePage.tsx

@@ -1,15 +1,24 @@
-import React, {useEffect, useState} from "react";
-import {useRouter} from "next/router";
-
-import {fetchContent} from "../shared/data/fetchContent";
-import {getTemplate} from "./templateSelector";
-
 import Custom500 from './errors/500';
 import Custom404 from './errors/404';
 import CustomError from './errors/Error';
-import {g} from "../enonic-connection-config";
 
-const BasePage = ({error, content, fetching}) => {
+import DefaultPage from "../components/templates/Default";
+import { pageSelector} from "../shared/pageSelector";
+
+const selectPage = (contentType) => pageSelector[contentType] || DefaultPage;
+
+export type BasePageProps = {
+    error?: {
+        code: string,
+        message: string
+    },
+    data?: {
+        type: string
+    }
+    fetching?: boolean
+}
+
+const BasePage = ({error, data, fetching}: BasePageProps) => {
     if (error) {
         switch (error.code) {
             case 404:
@@ -24,56 +33,12 @@ const BasePage = ({error, content, fetching}) => {
         return <p className="spinner">Fetching data...</p>
     }
 
-    if (content) {
-        const TemplatePage = getTemplate(content.type);
-        return <TemplatePage {...content} />
+    if (data) {
+        const SelectedPage = selectPage(data.type);
+        return <SelectedPage {...data} />
     }
 
     return null;
 };
 
 export default BasePage;
-
-
-
-
-////////////////////////////////////////////////////////////////////////
-
-export const buildClientSideBasePage = (branch: string) => {
-    const ClientSideFetchingBasePage = () => {
-
-        const [props, setProps] = useState({error: null, content: null, fetching: false});
-
-        const router = useRouter();
-        const contentPath = router.query.contentPath;
-
-        useEffect(
-            () => {
-
-                const refresh = async (contentPath: string|string[]) => {
-                    setProps(props => ({...props, fetching: true}));
-
-                    const contentResult = await fetchContent(contentPath, branch);
-
-                    // @ts-ignore
-                    setProps(() => contentResult);
-
-                    // Simulate server delay: comment out the setProps line above, and activate this:
-                    /*setTimeout(() => {
-                            // @ts-ignore
-                            setProps(() => contentResult);
-                        },
-                        750);*/
-                };
-
-                if (contentPath !== undefined) {
-                    refresh(contentPath);
-                }
-            },
-            [contentPath]
-        );
-
-        return <BasePage error={props.error} content={props.content} fetching={props.fetching}/>;
-    };
-    return ClientSideFetchingBasePage;
-};

src/pages/_app.tsx

@@ -1,16 +1,8 @@
 import '../styles/globals.css'
 import type {AppProps} from 'next/app'
-import Layout from '../components/blocks/layout'
-import SEO from '../components/blocks/Seo'
-
 function MyApp({Component, pageProps}: AppProps) {
     return (
-        <>
-            <Layout siteTitle="Enonic ❤ Next.js">
-                <SEO title={pageProps.displayName} siteTitle="NextXP Poc"/>
-                <Component {...pageProps} />
-            </Layout>
-        </>
+        <Component {...pageProps} />
     );
 }
 

src/pages/_draft/[[...contentPath]].tsx

@@ -1,8 +1,17 @@
 import React from 'react';
 
-import {fetchContent} from "../../shared/data/fetchContent";
+import buildContentFetcher from "../../shared/data/fetchContent";
+import { querySelector, variablesGetterSelector} from "../../shared/querySelector";
 
-import BasePage, {buildClientSideBasePage} from "../../components/BasePage";
+const fetchContent = buildContentFetcher({
+    querySelector,
+    variablesGetterSelector,
+    firstMethodKey: true
+});
+
+
+import BasePage from "../../components/BasePage";
+import {buildClientSideBasePage} from "../../shared/clientSideBasePage";
 
 const BRANCH = 'draft';
 
@@ -30,6 +39,6 @@ export default BasePage;
 
 ////////////////////////////////////////////////////////////////////////////////////////////// CLIENT: uncomment this instead of SSR above
 
-const ClientSideFetchBasePage = buildClientSideBasePage(BRANCH);
+const ClientSideFetchBasePage = buildClientSideBasePage(BRANCH, fetchContent);
 
 export default ClientSideFetchBasePage;

src/pages/_master/[[...contentPath]].tsx

@@ -1,8 +1,17 @@
 import React from 'react';
 
-import {fetchContent} from "../../shared/data/fetchContent";
+import buildContentFetcher from "../../shared/data/fetchContent";
+import { querySelector, variablesGetterSelector} from "../../shared/querySelector";
 
-import BasePage, { buildClientSideBasePage } from "../../components/BasePage";
+const fetchContent = buildContentFetcher({
+    querySelector,
+    variablesGetterSelector,
+    firstMethodKey: true
+});
+
+
+import BasePage from "../../components/BasePage";
+import {buildClientSideBasePage} from "../../shared/clientSideBasePage";
 
 const BRANCH = 'master';
 
@@ -26,7 +35,7 @@ export default BasePage;
 ////////////////////////////////////////////////////////////////////////////////////////////// CLIENT: uncomment this instead of SSR above
 /*
 
-const ClientSideFetchBasePage = buildClientSideBasePage(BRANCH);
+const ClientSideFetchBasePage = buildClientSideBasePage(BRANCH, fetchContent);
 
 export default ClientSideFetchBasePage;
 */

src/shared/clientSideBasePage.ts

@@ -0,0 +1,44 @@
+import React, {useEffect, useState} from "react";
+import {useRouter} from "next/router";
+
+import {Branch} from "./data/fetchContent";
+import BasePage, {BasePageProps} from "../components/BasePage";
+
+export const buildClientSideBasePage = (branch: Branch, fetchContent) => {
+    const ClientSideFetchingBasePage = () => {
+
+        const [props, setProps] = useState({error: null, content: null, fetching: false});
+
+        const router = useRouter();
+        const contentPath = router.query.contentPath;
+
+        useEffect(
+            () => {
+
+                const refresh = async (contentPath: string | string[]) => {
+                    setProps(props => ({...props, fetching: true}));
+
+                    const contentResult = await fetchContent(contentPath, branch);
+
+                    // @ts-ignore
+                    setProps(() => contentResult);
+
+                    // Simulate server delay: comment out the setProps line above, and activate this:
+                    /*setTimeout(() => {
+                            // @ts-ignore
+                            setProps(() => contentResult);
+                        },
+                        750);*/
+                };
+
+                if (contentPath !== undefined) {
+                    refresh(contentPath);
+                }
+            },
+            [contentPath]
+        );
+
+        return <BasePage error={props.error} content = {props.content} fetching = {props.fetching} />;
+    };
+    return ClientSideFetchingBasePage;
+};