Merge pull request #44 from queerjs/allow-plus-one-gh-handle

feat: clean up defaults and allow +1 gh handle

Author: SaraVieira

src/components/Info/Form.js

@@ -3,26 +3,27 @@ import createRecord from '../../helpers/airtable'
 import { Button, Form } from './elements'
 
 export default ({ onSubmit, city }) => {
-  const [plus, setPlus] = useState(false)
-  const [plusOneName, setPlusOneName] = useState('')
   const [name, setName] = useState('')
   const [gh, setGH] = useState('')
+  const [plusOne, setPlusOne] = useState(false)
+  const [plusOneName, setPlusOneName] = useState('')
+  const [plusOneGH, setPlusOneGH] = useState('')
 
   const createUser = () => {
     if (name && gh) {
-      if (plus && !plusOneName) return
+      if (plusOne && !plusOneName) return
 
       createRecord({
         city: city,
         name: name,
-        ghLink: gh
+        ghLink: gh || 'QueerJS'
       })
 
-      if (plus) {
+      if (plusOne) {
         createRecord({
           city: city,
           name: plusOneName,
-          ghLink: 'queerjs'
+          ghLink: plusOneGH || 'QueerJS'
         })
       }
     }
@@ -37,8 +38,8 @@ export default ({ onSubmit, city }) => {
       }}
     >
       <p>
-        If you're not comfortable showing your photo and link please put `QueerJS` in the `Github
-        Username` input field.
+        If you're not comfortable showing your photo and link, you may leave the `GitHub Handle` field blank and it will default
+        to `QueerJS`.
       </p>
       <label htmlFor="name">
         Your Name
@@ -53,15 +54,14 @@ export default ({ onSubmit, city }) => {
         />
       </label>
       <label htmlFor="gh">
-        Github Username
+        Github Handle
         <input
-          required
           id="gh"
           type="text"
           placeholder="QueerJS"
           pattern="[A-Za-z0-9-]{1,30}"
           value={gh}
-          onInvalid={e => e.target.setCustomValidity(`Your username, e.g. 'QueerJS' for 'https://github.com/queerjs'`)}
+          onInvalid={e => e.target.setCustomValidity(`A GitHub handle, e.g. 'QueerJS' for 'https://github.com/queerjs'`)}
           onChange={e => setGH(e.target.value.trim())}
         />
       </label>
@@ -75,16 +75,16 @@ export default ({ onSubmit, city }) => {
           id="plus-one"
           type="checkbox"
           pattern="[a-zA-Z0-9]+"
-          value={plus}
+          value={plusOne}
           css={`
             width: auto !important;
             margin-right: 12px !important;
           `}
-          onChange={e => setPlus(e.target.checked)}
+          onChange={e => setPlusOne(e.target.checked)}
         />
         <span>I am taking a plus one</span>
       </label>
-      {plus && (
+      {plusOne && (
         <label htmlFor="plus-one-name">
           +1 Name
           <input
@@ -96,6 +96,20 @@ export default ({ onSubmit, city }) => {
           />
         </label>
       )}
+      {plusOne && (
+        <label htmlFor="plus-one-gh">
+          +1 Github Handle
+          <input
+            id="plus-one-gh"
+            type="text"
+            placeholder="QueerJS"
+            pattern="[A-Za-z0-9-]{1,30}"
+            value={plusOneGH}
+            onInvalid={e => e.target.setCustomValidity(`A GitHub handle, e.g. 'QueerJS' for 'https://github.com/queerjs'`)}
+            onChange={e => setPlusOneGH(e.target.value.trim())}
+          />
+        </label>
+      )}
 
       <Button>
         I AM IN{' '}