✨ feat: Add webform resolver (#154)

Author: enZane

starters/react-router/app/integration/forms/ContactForm/ContactForm.tsx

@@ -7,13 +7,13 @@ import { Button } from '~/components/ui/button'
 import { Label } from '~/components/ui/label'
 import { contactFormSchema } from '~/integration/forms/ContactForm/schema'
 import { useFetcher } from 'react-router'
-import { action } from '~/routes/contact_form'
+import { action } from '~/routes/forms/contact_form'
 
-export const ContactForm = () => {
+export const ContactForm = ({ id }: { id: string }) => {
   const fetcher = useFetcher<typeof action>()
 
   const [form, fields] = useForm({
-    id: 'contact-form',
+    id,
     lastResult: fetcher.data?.reply,
     constraint: getZodConstraint(contactFormSchema),
     onValidate({ formData }) {
@@ -46,7 +46,7 @@ export const ContactForm = () => {
           <fetcher.Form
             {...getFormProps(form)}
             method="post"
-            action="/contact_form"
+            action="/form/contact_form"
             className="space-y-4"
           >
             {form.errors && (

starters/react-router/app/integration/node/NodeArticle.tsx

@@ -28,7 +28,6 @@ export default function NodeArticleComponent({
 
   return (
     <>
-      {}
       <Article
         title={title}
         content={body.processed.toString()}

starters/react-router/app/integration/resolvers/ParagraphWebformResolver.tsx

@@ -1,37 +1,42 @@
 import { FragmentOf, readFragment } from 'gql.tada'
 import { ContactForm } from '~/integration/forms/ContactForm/ContactForm'
-
-import { WebformFragment } from '~/graphql/fragments/webform'
 import { graphql } from '~/graphql/gql.tada'
 
 interface ParagraphWebformProps {
   paragraph: FragmentOf<typeof ParagraphWebformFragment>
 }
 
-export const ParagraphWebformFragment = graphql(
-  `
-    fragment ParagraphWebformFragment on ParagraphWebform {
-      __typename
+export const ParagraphWebformFragment = graphql(`
+  fragment ParagraphWebformFragment on ParagraphWebform {
+    __typename
+    id
+    heading
+    subheadingOptional: subheading
+    descriptionOptional: description
+    form {
       id
-      heading
-      subheadingOptional: subheading
-      descriptionOptional: description
-      form {
-        id
-        __typename
-        ...WebformFragment
-      }
+      __typename
     }
-  `,
-  [WebformFragment]
-)
+  }
+`)
+
+type FormComponents = React.FC<{ id: string }>
+
+const WebformComponentResolver: Record<string, FormComponents> = {
+  contact_form: ContactForm,
+}
 
 export const ParagraphWebformResolver = ({
   paragraph,
 }: ParagraphWebformProps) => {
   const { heading, subheadingOptional, descriptionOptional, form } =
     readFragment(ParagraphWebformFragment, paragraph)
 
+  if (!form || !form.id) {
+    return null
+  }
+
+  const Webform = WebformComponentResolver[form.id]
   return (
     <div className="container mx-auto py-8 md:py-16 lg:py-24">
       <div>
@@ -47,11 +52,9 @@ export const ParagraphWebformResolver = ({
             dangerouslySetInnerHTML={{ __html: descriptionOptional }}
           />
         )}
-        {form && (
-          <div className="py-8 md:py-16 lg:py-24">
-            <ContactForm />
-          </div>
-        )}
+        <div className="py-8 md:py-16 lg:py-24">
+          <Webform id={form.id} />
+        </div>
       </div>
     </div>
   )

starters/react-router/app/routes.ts

@@ -3,5 +3,5 @@ import { type RouteConfig, index, route } from '@react-router/dev/routes'
 export default [
   index('routes/$.tsx', { id: 'index' }),
   route('*', 'routes/$.tsx'),
-  route('contact_form', 'routes/contact_form.ts')
+  route('form/contact_form', 'routes/forms/contact_form.ts')
 ] satisfies RouteConfig