disable plusOne func. and store email addresses

react-ladies · May 2, 2021 · a1c8352 · a1c8352
1 parent d3113ca
commit a1c8352
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 24 deletions.
diff --git a/functions/register.js b/functions/register.js
@@ -3,9 +3,11 @@ const base = new Airtable({ apiKey: process.env.AIRTABLE_KEY }).base(process.env
 
 exports.handler = async function(event) {
   // ?name=Katherine Johnson&github=nasa&city=online-2021-may
-  const { name, github, city } = event.queryStringParameters
+  const { name, github = 'react-ladies', city, email } = event.queryStringParameters
 
-  if (!name || !city) {
+  console.log('email', decodeURI(email))
+
+  if (!name || !city || !email) {
     console.error(err)
     return {
       statusCode: 500,
@@ -18,18 +20,21 @@ exports.handler = async function(event) {
       .create({
         name: name,
         city: city,
-        ghLink: github
+        ghLink: github,
+        email: decodeURI(email)
       })
       .then(record => {
         return {
           statusCode: 200,
           body: `Successfully added ${event.queryStringParameters.name}. document ID is ${record.id}`
         }
       })
-  } catch {
+  } catch (err) {
+    const errorMsg = `Error. Something went wrong. Airtable returned: ${err}`
+    console.log(errorMsg)
     return {
       statusCode: 500,
-      body: `Something went wrong`
+      body: errorMsg
     }
   }
 }
diff --git a/src/components/Info/Form.js b/src/components/Info/Form.js
@@ -3,18 +3,24 @@ import { Button, Form } from './elements'
 
 export default ({ onSubmit, city }) => {
   const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
   const [gh, setGH] = useState('')
   const [plusOne, setPlusOne] = useState(false)
   const [plusOneName, setPlusOneName] = useState('')
   const [plusOneGH, setPlusOneGH] = useState('')
+  // TODO: use error to change the front end state, right now it just fails silently if there was an issue persisting the data to Airtable.
+  const [error, setError] = useState(false)
 
   const createUser = () => {
-    if (name && gh) {
+    if (name && email) {
       if (plusOne && !plusOneName) return
 
-      fetch(`/.netlify/functions/register?name=${name}&github=${gh || 'react-ladies'}&city=${city}`)
+      fetch(
+        `/.netlify/functions/register?name=${name}&github=${gh ||
+          'react-ladies'}&city=${city}&email=${encodeURI(email)}`
+      )
         .then(res => res.text())
-        .then(text => console.log(text))
+        .then(text => setError(text.includes('Error')))
 
       if (plusOne) {
         fetch(
@@ -67,25 +73,38 @@ export default ({ onSubmit, city }) => {
           onChange={e => setGH(e.target.value.trim())}
         />
       </label>
-      <label
-        htmlFor="plus-one"
-        css={`
-          display: flex;
-        `}
-      >
+      <label htmlFor="email">
+        E-Mail Address
         <input
-          id="plus-one"
-          type="checkbox"
-          pattern="[a-zA-Z0-9]+"
-          value={plusOne}
-          css={`
-            width: auto !important;
-            margin-right: 12px !important;
-          `}
-          onChange={e => setPlusOne(e.target.checked)}
+          required
+          id="email"
+          type="email"
+          pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
+          value={email}
+          onInvalid={e => e.target.setCustomValidity(`Please provide a valid e-mail address.`)}
+          onChange={e => setEmail(e.target.value.trim())}
         />
-        <span>I am taking a plus one</span>
       </label>
+      {/* TODO: PlusOne functionality should only be enabled for in-person events. */}
+      {/*     <label
+                                               htmlFor="plus-one"
+                                               css={`
+                                                 display: flex;
+                                               `}
+                                             >
+                                               <input
+                                                 id="plus-one"
+                                                 type="checkbox"
+                                                 pattern="[a-zA-Z0-9]+"
+                                                 value={plusOne}
+                                                 css={`
+                                                   width: auto !important;
+                                                   margin-right: 12px !important;
+                                                 `}
+                                                 onChange={e => setPlusOne(e.target.checked)}
+                                               />
+                                               <span>I am taking a plus one</span>
+                                        </label>*/}
       {plusOne && (
         <label htmlFor="plus-one-name">
           +1 Name