#31: media not rendered. Logging missing data (when not fetching).

enonic · Sep 9, 2021 · da4b632 · da4b632
1 parent 1ded6b4
commit da4b632
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/src/components/BasePage.tsx b/src/components/BasePage.tsx
@@ -5,9 +5,8 @@ import Custom404 from './errors/404';
 import CustomError from './errors/Error';
 
 import DefaultPage from "../components/pagetypes/_Default";
-import { pageSelector} from "../selectors/pageSelector";
+import {pageSelector} from "../selectors/pageSelector";
 
-const selectPage = (contentType) => pageSelector[contentType] || DefaultPage;
 
 export type BasePageProps = {
     error?: {
@@ -20,27 +19,41 @@ export type BasePageProps = {
     fetching?: boolean
 }
 
+
+const errorPageSelector = {
+    404: Custom404,
+    500: Custom500
+}
+
 const BasePage = ({error, data, fetching}: BasePageProps) => {
     if (error) {
-        switch (error.code) {
-            case 404:
-                return <Custom404/>
-            case 500:
-                return <Custom500 message={error.message}/>;
-        }
-        return <CustomError code={error.code} message={error.message}/>;
+        const ErrorPage = errorPageSelector[error.code] || CustomError;
+        return <ErrorPage code={error.code} message={error.message}/>;
     }
 
     if (fetching) {
         return <p className="spinner">Fetching data...</p>
     }
 
-    if (data) {
-        const SelectedPage = selectPage(data.type);
-        return <SelectedPage {...data} />
+    if (!data) {
+        if (!fetching) {
+            console.warn("No 'data' in props");
+        }
+        return null;
+    }
+
+    if (!data.type) {
+        // TODO: enforce at querySelector level?
+        console.warn("A 'type' attribute is missing from the data. Most likely, a query is added without a type attribute at the content top level.");
+        /// ...but still render the SelectedPage, which will dump the data.
+
+    } else if (data.type.startsWith('media:')) {
+        return null;
     }
 
-    return null;
+// TODO: Only use the data-dumping DefaultPage in dev mode / draft?
+    const SelectedPage = pageSelector[data.type] || DefaultPage;
+    return <SelectedPage {...data} />;
 };
 
 export default BasePage;
diff --git a/src/components/ClientSideBasePage.tsx b/src/components/ClientSideBasePage.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 const ClientSideBasePage = ({branch, fetchContent}: Props) => {
 
-    const [props, setProps] = useState({error: null, content: null, fetching: false});
+    const [props, setProps] = useState({error: null, content: {}, fetching: true});
 
     const router = useRouter();
     const contentPath = router.query.contentPath;

diff --git a/src/enonic-connection-config.js b/src/enonic-connection-config.js
@@ -1,5 +1,5 @@
-const project = 'hmdb';                                                  // <-- project identifier in path, e.g. 'default' in the URL <domain>/site/default/master
-const appKey = "com.example.myproject";                                // <-- full app key = appName in hmdb/gradle.properties
+const project = 'hmdb';                                                     // <-- project identifier in path, e.g. 'default' in the URL <domain>/site/default/master
+const appKey = "com.example.myproject";                                     // <-- full app key = appName in hmdb/gradle.properties
 
 const appKeyUnderscored = appKey.replace(/\./g, '_');
 const appKeyDashed = appKey.replace(/\./g, '-');
@@ -9,7 +9,6 @@ const apiDomain = "http://localhost:8080";
 const siteRootUrlMaster = `${apiDomain}/site/${project}/master`;
 const siteRootUrlDraft = `${apiDomain}/site/${project}/draft`;
 
-
 // appName is the content _name of the root site content-item:
 const getGuillotineUrlMaster = (appName) => `${siteRootUrlMaster}/${appName}/api`;
 const getGuillotineUrlDraft = (appName) => `${siteRootUrlDraft}/${appName}/api`;