Iterate join form config

components/slack/join-form.js

@@ -3,7 +3,7 @@ import useForm from '../../lib/use-form'
 import Submit from '../submit'
 
 const JoinForm = ({ sx = {} }) => {
-  const { status, formProps, useField } = useForm('https://v3-6arfu6pu5.hackclub.dev/api/som-join/')
+  const { status, formProps, useField } = useForm('/api/join/')
 
   return (
     <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>

lib/use-form.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'
 const useForm = (
   submitURL = '/',
   callback,
-  options = { clearOnSubmit: 5000, method: 'post' }
+  options = { clearOnSubmit: 5000, method: 'POST' }
 ) => {
   const [status, setStatus] = useState('default')
   const [data, setData] = useState({})
@@ -33,27 +33,24 @@ const useForm = (
     }
   }
 
-  const { method = 'post' } = options
+  const { method = 'POST' } = options
-
+  const action = submitURL
-  const action =
-    process.env.NODE_ENV === 'production'
-      ? `https://v3.hackclub.com${submitURL}/`
-      : submitURL
 
   const onSubmit = e => {
-    e.persist()
+    e.persist() // Remove in React 17
     e.preventDefault()
     setStatus('submitting')
     fetch(action, {
       method,
       headers: {
-        'content-type': 'application/json'
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
-      mode: 'no-cors',
       body: JSON.stringify(data)
     })
       .then(r => r.json())
       .then(r => {
+        console.log('Form success!')
         setStatus('success')
         if (callback) callback(r)
         setTimeout(() => setStatus('default'), 2000)

next.config.js

@@ -3,5 +3,20 @@ const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ })
 module.exports = withMDX({
   trailingSlash: true,
   pageExtensions: ['js', 'jsx', 'mdx'],
-  assetPrefix: isProd ? '/v3' : ''
+  assetPrefix: isProd ? '/v3' : '',
+  async headers() {
+    return [
+      {
+        source: '/api/(.+)',
+        headers: [
+          { key: 'Access-Control-Allow-Origin', value: '*' },
+          {
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, OPTIONS'
+          },
+          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }
+        ]
+      }
+    ]
+  }
 })

pages/api/join.js

@@ -9,6 +9,10 @@ const joinTable = new AirtablePlus({
 export default async (req, res) => {
   res.setHeader('Access-Control-Allow-Origin', '*')
   res.setHeader('Access-Control-Allow-Headers', '*')
+  if (req.method === 'OPTIONS') {
+    console.log('OPTIONS request made')
+    return res.status(201)
+  }
   if (req.method !== 'POST') {
     return res.status(405).json({ error: 'Method not allowed, use POST' })
   }
@@ -19,6 +23,7 @@ export default async (req, res) => {
   console.log('Exists:', exists)
 
   if (!exists) {
+    console.log('Posting to Airtable…')
     await joinTable.create({
       'Full Name': data.name,
       'Email Address': data.email,

vercel.json

@@ -8,15 +8,5 @@
       "source": "/v3/_next/:path*",
       "destination": "/_next/:path*"
     }
-  ],
-  "headers": [
-    {
-      "source": "/api/(.+)",
-      "headers": [
-        { "key": "Access-Control-Allow-Origin", "value": "*" },
-        { "key": "Access-Control-Allow-Methods", "value": "POST, OPTIONS" },
-        { "key": "Access-Control-Allow-Headers", "value": "Content-Type" }
-      ]
-    }
   ]
 }