diff --git a/components/slack/join-form.js b/components/slack/join-form.js index e89fd6ff..f846f6e3 100644 --- a/components/slack/join-form.js +++ b/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 ( diff --git a/lib/use-form.js b/lib/use-form.js index da948e5b..1a98731d 100644 --- a/lib/use-form.js +++ b/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 action = - process.env.NODE_ENV === 'production' - ? `https://v3.hackclub.com${submitURL}/` - : submitURL + const { method = 'POST' } = options + const action = 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) diff --git a/next.config.js b/next.config.js index 3e7f47fc..a3e977ef 100755 --- a/next.config.js +++ b/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' } + ] + } + ] + } }) diff --git a/pages/api/join.js b/pages/api/join.js index 40201059..446a7112 100644 --- a/pages/api/join.js +++ b/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, diff --git a/vercel.json b/vercel.json index 9deb45d1..820fe328 100644 --- a/vercel.json +++ b/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" } - ] - } ] }