Example Webform usage

WEBFORMS.md

@@ -0,0 +1,22 @@
+How to set up Webform REST on ACMS
+
+1.Download the Webform and Webform REST modules
+
+2.Enable REST resources "Webform Submit", "Webform Elements", "Webform Submission" on `/admin/config/services/rest`
+
+3.Set permissions `/admin/people/permissions#module-rest` for RESTful Web Services and check Anonymous User for the Webform related permissions to avoid dealing with auth/headers for now.
+
+4.Create a new webform if you have not already `/admin/structure/webform`
+
+5.Code is currently hardcoded to render the basic email contact webform on the page which I think should already be pre-made as an example
+on `/admin/structure/types/manage/article/fields`. 
+In case it's not, create a webform where
+- webform_id should be 'contact'
+- there should be a name field, email field, subject field, and message field.
+
+6.Add a webform to one of the article nodes.
+
+7.Visit the article node on the headless site.
+
+8.Now you should be able to make requests to the API too. ex) GET`/webform_rest/{webform_id}/fields?_format=json`
+

starters/basic-starter/components/node--article.tsx

@@ -3,13 +3,81 @@ import Link from 'next/link';
 import { formatDate } from 'lib/format-date';
 import { MediaImage } from 'components/media--image';
 import { FormattedText } from 'components/formatted-text';
+import React, { useState } from 'react';
+import { drupal } from '../lib/drupal';
 
-export function NodeArticle({ node, ...props }) {
+const initialValues = {
+  name: '',
+  email: '',
+  subject: '',
+  message: '',
+};
+
+export function NodeArticle({ node, additionalContent, ...props }) {
+  const [values, setValues] = useState(initialValues);
+
+  function handleInputChange(
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>,
+  ) {
+    const { name, value } = e.target;
+    setValues({
+      ...values,
+      [name]: value,
+    });
+    console.log(e.target);
+  }
+
+  // Commenting this function out will make page render
+  async function submitForm() {
+    const baseUrl = await drupal.baseUrl;
+    const path = '/webform_rest/submit?_format=json';
+    const body = {
+      webform_id: 'contact',
+      name: values['name'],
+      email: values['email'],
+      subject: values['subject'],
+      message: values['message'],
+    };
+    const response = await drupal.fetch(`${baseUrl}${path}`, {
+      method: 'POST',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    console.log(response.json());
+  }
   return (
     <article className="max-w-2xl px-6 py-10 mx-auto" {...props}>
       <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
         {node.title}
       </h1>
+      <h2>Contact</h2>
+      <input
+        placeholder={additionalContent.webform.name['#title']}
+        name={additionalContent.webform.name['#webform_key']}
+        onChange={handleInputChange}
+      />
+      <input
+        placeholder={additionalContent.webform.email['#title']}
+        name={additionalContent.webform.email['#webform_key']}
+        onChange={handleInputChange}
+      />
+      <input
+        placeholder={additionalContent.webform.subject['#title']}
+        name={additionalContent.webform.subject['#webform_key']}
+        onChange={handleInputChange}
+      />
+      <textarea
+        placeholder={additionalContent.webform.message['#title']}
+        name={additionalContent.webform.message['#webform_key']}
+        onChange={handleInputChange}
+      />
+      <button type="submit" onClick={() => submitForm()}>
+        {additionalContent.webform.actions['#submit__label']}
+      </button>
       <p className="mb-4 text-gray-600">
         {node.field_display_author?.title ? (
           <span>

starters/basic-starter/pages/[...slug].tsx

@@ -2,7 +2,7 @@
 // It is the entry point for handling entity routes from Drupal.
 import * as React from 'react';
 import { GetStaticPathsResult, GetStaticPropsResult } from 'next';
-import { DrupalNode, DrupalTaxonomyTerm } from 'next-drupal';
+import { DrupalClient, DrupalNode, DrupalTaxonomyTerm } from 'next-drupal';
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
 
 import { getMenus } from 'lib/get-menus';
@@ -49,7 +49,10 @@ export default function EntityPage({
         <NodeBasicPage node={entity as DrupalNode} />
       )}
       {entity.type === 'node--article' && (
-        <NodeArticle node={entity as DrupalNode} />
+        <NodeArticle
+          node={entity as DrupalNode}
+          additionalContent={additionalContent as { webform: any }}
+        />
       )}
       {entity.type === 'node--event' && (
         <NodeEvent node={entity as DrupalNode} />
@@ -102,6 +105,7 @@ export async function getStaticPaths(): Promise<GetStaticPathsResult> {
 export async function getStaticProps(
   context,
 ): Promise<GetStaticPropsResult<EntityPageProps>> {
+  // console.log(await getForm());
   // Find a matching path from Drupal from context.
   const path = await drupal.translatePathFromContext(context);
 
@@ -142,7 +146,9 @@ export async function getStaticProps(
       'field_article_media.image',
       'field_article_image.image',
       'field_display_author',
+      'field_webform',
     ]);
+    additionalContent['webform'] = await getForm();
   }
 
   if (type === 'node--event') {
@@ -245,3 +251,12 @@ export async function getStaticProps(
     revalidate: 60,
   };
 }
+
+async function getForm() {
+  const baseUrl = drupal.baseUrl;
+  const path = '/webform_rest/contact/fields?_format=json';
+  const response = await drupal.fetch(`${baseUrl}${path}`, {
+    method: 'GET',
+  });
+  return response.json();
+}