Invites on the slack form create multi-channel guests (#23)

* Invites on the slack form create multi-channel guests

* Use CORS only in production

* Open this boi UP

* Remove cors-anywhere

* Remove JSON parse

* Attempt boolean logic for teens

* Attempt to fix som form

* Attempt to fix form routing error

* Don't include post URL in form html

* Remove method from HTML

* Try persisting event

* Remove fetch imports

* Edit submitted button copy

* Add logging

* Fix teen field

Co-authored-by: Lachlan Campbell <lachlan@hackclub.com>

.gitignore

@@ -1,5 +1,8 @@
 .now
+.env
 .next
 node_modules
 .DS_Store
 public/home
+
+.vercel

components/home/join-form.js

@@ -3,16 +3,10 @@ import useForm from '../../lib/use-form'
 import Submit from '../submit'
 
 const JoinForm = ({ sx = {} }) => {
-  const { status, formProps, useField } = useForm('/api/join')
+  const { status, formProps, useField } = useForm('/api/som-join')
 
   return (
-    <Card
-      sx={{
-        maxWidth: 'narrow',
-        mx: 'auto',
-        ...sx
-      }}
-    >
+    <Card sx={{ maxWidth: 'narrow', mx: 'auto', ...sx }}>
       <form {...formProps}>
         <Label>
           Full name

components/submit.js

@@ -33,7 +33,7 @@ const Submit = ({
   labels = {
     default: 'Submit',
     error: 'Error!',
-    success: 'Submitted!'
+    success: 'Check your email!'
   },
   width = '100%',
   sx,

lib/use-form.js

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react'
-import fetch from 'isomorphic-unfetch'
 
 const useForm = (
   submitURL = '/',
@@ -35,16 +34,19 @@ const useForm = (
   }
 
   const { method = 'post' } = options
-  const action =
-    submitURL?.startsWith('/') && process.env.NODE_ENV !== 'development'
-      ? `https://cors-anywhere.herokuapp.com/https://v3.hackclub.com${submitURL}`
-      : submitURL
+
+  // Workaround for Vercel trailingSlash behavior
+  const action = process.env.NODE_ENV !== 'development' && submitURL.startsWith('/') ? submitURL + '/' : submitURL
 
   const onSubmit = (e) => {
+    e.persist()
     e.preventDefault()
     setStatus('submitting')
     fetch(action, {
       method,
+      headers: {
+        'content-type': 'application/json'
+      },
       mode: 'cors',
       body: JSON.stringify(data)
     })
@@ -63,7 +65,7 @@ const useForm = (
       })
   }
 
-  const formProps = { method, action, onSubmit }
+  const formProps = { onSubmit }
 
   return { status, data, touched, useField, formProps }
 }

pages/api/join.js

@@ -1,5 +1,4 @@
 import AirtablePlus from 'airtable-plus'
-import fetch from 'isomorphic-unfetch'
 
 const joinTable = new AirtablePlus({
   apiKey: process.env.AIRTABLE_API_KEY,

pages/api/som-join.js

@@ -0,0 +1,50 @@
+import AirtablePlus from 'airtable-plus'
+
+const joinTable = new AirtablePlus({
+  apiKey: process.env.AIRTABLE_API_KEY,
+  baseID: 'appaqcJtn33vb59Au',
+  tableName: 'Join Requests'
+})
+
+export default async (req, res) => {
+  if (req.method == 'GET') {
+    return res.status(405).json({ error: '*GET outta here!* (Method not allowed, use POST)' })
+  }
+  if (req.method == 'PUT') {
+    return res.status(405).json({ error: '*PUT that request away!* (Method not allowed, use POST)' })
+  }
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed, use POST' })
+  }
+
+  const data = req.body || {}
+
+  console.log(data)
+
+  await joinTable.create({
+    'Full Name': data.name,
+    'Email Address': data.email,
+    Student: data.teen,
+    Reason: data.reason,
+    Invited: true,
+    Notes: 'Added by the som-apply flow in the v3 codebase'
+  })
+
+  // This is a private api method found in https://github.com/ErikKalkoken/slackApiDoc/blob/master/users.admin.invite.md
+  // I only got a successful response by putting all the args in URL params
+  // Giving JSON body DID NOT WORK when testing locally
+  // —@MaxWofford
+
+  const params = [
+    `email=${data.email}`,
+    `token=${process.env.SLACK_LEGACY_TOKEN}`,
+    `real_name=${data.name}`,
+    'channels=C015ZDB0GRF,C015LQDP2Q2,C01504DCLVD',
+    'restricted=true',
+    'resend=true'
+  ].join('&')
+  const url = `https://slack.com/api/users.admin.invite?${params}`
+  await fetch(url, { method: 'POST', }).then(r => r.json()).then(r => console.log('Slack response', r))
+
+  res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
+}

pages/api/stickers.js

@@ -1,4 +1,3 @@
-import fetch from 'isomorphic-unfetch'
 const AirtablePlus = require('airtable-plus')
 
 const mailScenariosTable = new AirtablePlus({
@@ -62,4 +61,4 @@ export default async (req, res) => {
       .then(r => r.json())
       .then(r => res.json({ status: r.status }))
   }
-}
+}

vercel.json

@@ -1,5 +1,4 @@
 {
-  "public": true,
   "trailingSlash": true,
   "github": { "silent": true },
   "env": {
@@ -7,10 +6,8 @@
   },
   "headers": [
     {
-      "source": "/api/join",
-      "headers": [
-        { "key": "Access-Control-Allow-Origin", "value": "*" }
-      ]
+      "source": "/api/(.+)",
+      "headers": [{ "key": "Access-Control-Allow-Origin", "value": "*" }]
     }
   ]
 }