feat(forms): Add support for rendering form pages (#518)

* add form route

* add nvmrc file

* handle 404 when form is not available

* isolate bootstrap for forms

* add cacheKeys

* add support for closed forms

Co-authored-by: Sinu john <[email protected]>

.nvmrc

@@ -0,0 +1 @@
+10.13.0

app/isomorphic/component-bundles/list.js

@@ -2,5 +2,6 @@ export { HomePage, HomePagePreview } from "../components/pages/home";
 export { SectionPage } from "../components/pages/section";
 export { TagPage } from "../components/pages/tag";
 export { SearchPage } from "../components/pages/search";
+export { FormPage } from "../components/pages/form";
 export { CatalogPage } from "../components/pages/catalog";
 export { NotFoundPage } from "../components/pages/not-found";

app/isomorphic/components/form/index.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+import { string, bool } from "prop-types";
+
+import styles from "./styles.m.css";
+
+const Form = ({ formioUrl, disabled }) => {
+  const [Formio, setFormComponent] = useState({});
+  useEffect(() => {
+    // SSR is not supported by react-formio
+    import(/* webpackChunkName: "qtc-react-formio" */ "react-formio")
+      .then(Formio => {
+        setFormComponent({ component: Formio.Form });
+      })
+      .catch(error => console.error("Error loading formio component", error));
+  }, []);
+
+  return (
+    <div className={`bootstrap ${styles["form-container"]}`}>
+      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+      <link
+        rel="stylesheet"
+        href="https://toert.github.io/Isolated-Bootstrap/versions/4.0.0-beta/iso_bootstrap4.0.0min.css"
+      />
+      <link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css" />
+      {Formio.component && <Formio.component src={formioUrl} options={{ readOnly: disabled }} />}
+    </div>
+  );
+};
+
+Form.propTypes = {
+  formioUrl: string,
+  disabled: bool
+};
+
+export { Form };

app/isomorphic/components/form/styles.m.css

@@ -0,0 +1,3 @@
+:global(.bootstrap).form-container {
+  background-color: unset;
+}

app/isomorphic/components/pages/form.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { shape, string } from "prop-types";
+
+import { Form } from "../form";
+
+const FormPage = props => {
+  const { headline, subheadline, status, "formio-url": formioUrl } = props.data.form;
+  const isClosed = status === "closed";
+  return (
+    <div>
+      <h1>{headline}</h1>
+      <h2>{subheadline}</h2>
+      {isClosed && <p>The form is closed for submissions.</p>}
+      <Form formioUrl={formioUrl} disabled={isClosed} />
+    </div>
+  );
+};
+
+FormPage.propTypes = {
+  data: shape({
+    form: {
+      "formio-url": string,
+      headline: string,
+      subheadline: string,
+      status: string
+    }
+  })
+};
+
+export { FormPage };

app/isomorphic/constants.js

@@ -8,6 +8,7 @@ export const PAGE_TYPE = Object.freeze({
   STORY_PUBLIC_PREVIEW_PAGE: "story-public-preview-page",
   STORY_PREVIEW: "story-preview",
   HOME_PREVIEW: "home-preview",
-  STATIC_PAGE: "static-page"
+  STATIC_PAGE: "static-page",
+  FORM_PAGE: "form-page"
 });
 export const TAG_PAGE_URL_PREFIX = "/topic/";

app/isomorphic/pick-component.js

@@ -7,6 +7,7 @@ const { pickComponent, getChunkName } = pickComponentHelper(
     [PAGE_TYPE.SECTION_PAGE]: { chunk: "list", component: "SectionPage" },
     [PAGE_TYPE.TAG_PAGE]: { chunk: "list", component: "TagPage" },
     [PAGE_TYPE.SEARCH_PAGE]: { chunk: "list", component: "SearchPage" },
+    [PAGE_TYPE.FORM_PAGE]: { chunk: "list", component: "FormPage" },
     [PAGE_TYPE.STORY_PAGE]: { chunk: "story", component: "StoryPage" },
     [PAGE_TYPE.CATALOG_PAGE]: { chunk: "list", component: "CatalogPage" },
     [PAGE_TYPE.STORY_PREVIEW]: { chunk: "story", component: "StoryPagePreview" },

app/server/data-loaders/form-page-data.js

@@ -0,0 +1,8 @@
+export function loadFormPageData(client, formSlug, next) {
+  return client
+    .request(`/api/v1/forms/${formSlug}`)
+    .then(result => ({ form: result.data, cacheKeys: result.cacheKeys }))
+    .catch(response => {
+      return response.statusCode === 404 ? next() : Promise.reject(response);
+    });
+}

app/server/load-data.js

@@ -6,6 +6,7 @@ import { loadStoryPageData, loadStoryPublicPreviewPageData } from "./data-loader
 import { loadSectionPageData } from "./data-loaders/section-page-data";
 import { loadTagPageData } from "./data-loaders/tag-page-data";
 import { loadSearchPageData } from "./data-loaders/search-page-data";
+import { loadFormPageData } from "./data-loaders/form-page-data";
 import { catalogDataLoader } from "@quintype/framework/server/data-loader-helpers";
 import { getNavigationMenuArray } from "./data-loaders/menu-data";
 import { PAGE_TYPE } from "../isomorphic/constants";
@@ -46,6 +47,8 @@ export function loadData(pageType, params, config, client, { host, next, domainS
         return Promise.resolve({ cacheKeys: ["static"] });
       case PAGE_TYPE.SEARCH_PAGE:
         return loadSearchPageData(client, params.q, config);
+      case PAGE_TYPE.FORM_PAGE:
+        return loadFormPageData(client, params.formSlug, next);
       default:
         return Promise.resolve({ error: { message: "No Loader" } });
     }

app/server/routes.js

@@ -42,7 +42,12 @@ const ISOMORPHIC_ROUTES = [
     pageType: PAGE_TYPE.TAG_PAGE,
     exact: true
   },
-  { path: "/search", pageType: PAGE_TYPE.SEARCH_PAGE, exact: true }
+  { path: "/search", pageType: PAGE_TYPE.SEARCH_PAGE, exact: true },
+  {
+    path: "/forms/:formSlug",
+    pageType: PAGE_TYPE.FORM_PAGE,
+    exact: true
+  }
 ];
 
 export function generateRoutes(config, domainSlug = undefined) {