Merge pull request #88 from enonic/#29/clean_code_for_guide

Boilerplate code from the guide

.eslintrc

@@ -1,3 +1,8 @@
 {
-  "extends": ["next", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals"],
+    "rules": {
+        // Other rules
+        "@next/next/no-img-element": "off"
+    }
 }
+

next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -1,22 +1,24 @@
 {
   "name": "next-hmdb",
   "version": "0.1.0",
+  "license": "Apache-2.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "npx next dev",
+    "build": "npx next build",
+    "start": "npx next start",
+    "lint": "npx next lint"
   },
   "dependencies": {
-    "next": "11.0.1",
+    "next": "^11.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@types/react": "17.0.15",
     "eslint": "7.31.0",
     "eslint-config-next": "11.0.1",
+    "prettier": "^2.4.1",
     "typescript": "4.3.5"
   }
 }

src/components/BasePage.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import typeSelector from "../selectors/typeSelector";
+
+
+
+
+/////////// Inline styles
+
+const defaultStyle = { padding: "10px" };
+const errorStyle = { padding: "10px", color: "#611" };
+const codeDumpStyle = { width: "100%", whiteSpace: "pre-wrap", wordWrap: "break-word" };
+
+
+
+/////////// Default view: dump props data to screen
+
+const DefaultPage = (props) => {
+    return (
+        <div style={defaultStyle}>
+            <h1>{props.displayName}</h1>
+            <h5>Props:</h5>
+            <pre style={codeDumpStyle}>
+                {JSON.stringify(props, null, 2)}
+            </pre>
+        </div>
+    )
+}
+
+
+
+////////////// Error view
+
+const ErrorPage = (errorProps) => {
+    return (
+        <div style={errorStyle}>
+            <h1>Error</h1>
+            <pre style={codeDumpStyle}>
+                {JSON.stringify(errorProps, null, 2)}
+            </pre>
+        </div>
+    )
+}
+
+
+////////////// Main entry: select view by error state / content type
+
+const BasePage = ({content, meta={}, error}) => {
+    if (error) {
+        return <ErrorPage {...error}/>;
+    }
+
+    if (!content) {
+        console.warn("No 'content' data in BasePage props");
+        return null;
+    }
+
+    const {type} = meta;
+    if (!type) {
+        console.debug("BasePage props are missing 'meta.type'. Falling back to DefaultPage component.");
+    }
+
+    const typeSelection = typeSelector[type]
+    const SelectedPage = typeSelection?.page || DefaultPage;
+
+    return <SelectedPage {...content} />;
+};
+
+export default BasePage;

src/enonic-connection-config.js

@@ -0,0 +1,28 @@
+// XP server domain, incl. <protocol>:// and :<port>. Eg. 'http://localhost:8080' in http://localhost:8080/site/default/draft/mysite/api
+const apiDomain = "http://localhost:8080";
+
+// Which site this server communicates with: content item _name for the root site item
+const siteName = 'hmdb';
+
+/** URL to the guillotine API */
+const contentApiUrl = `${apiDomain}/site/hmdb/draft/${siteName}/api`;
+
+// full app key = appName in gradle.properties in the XP app
+const appName = "com.example.myproject";
+
+module.exports = {
+    apiDomain,
+    siteName,
+    contentApiUrl,
+    appName,
+
+    // makes appName variations used in different contexts, eg. queries:
+    appNameUnderscored: appName.replace(/\./g, '_'),
+    appNameDashed: appName.replace(/\./g, '-'),
+
+    /**
+     * Prefix the site-relative content path with the XP site _name and returns a full XP _path string.
+     * @param siteRelativeContentPath {string} The contentPath slug array from [[...contentPath]].tsx, stringified and slash-delimited
+     * @returns {string} Fully qualified XP content path */
+    getXpPath: (siteRelativeContentPath) => `/${siteName}/${siteRelativeContentPath}`,
+};