Custom forms

.env.EXAMPLE

@@ -7,6 +7,6 @@
 #
 # Check the “show API key” box at the top-right, then look for yours in the
 # code sample displayed next to the “Authentication” docs. Paste that here:
-AIRTABLE_API_KEY=
+GATSBY_AIRTABLE_API_KEY=
 # The AIRTABLE_BASE_ID below refers to the DUMMY DATABASE. Access to the production database must be requested.
-AIRTABLE_BASE_ID=appkenjGlBB01wr3i
+GATSBY_AIRTABLE_BASE_ID=appkenjGlBB01wr3i 

README.md

@@ -93,14 +93,14 @@ _Note:_ If you don't see this checkbox, make sure you're logged in to Airtable,
 Once you have your API key, create a file called `.env` and add your API key:
 
 ```bash
-AIRTABLE_API_KEY=YOUR_API_KEY
+GATSBY_AIRTABLE_API_KEY=YOUR_API_KEY
 ```
 
 > **NOTE:** See `.env.EXAMPLE` for a copy-pasteable template to get set up!
 
 ### Airtable Base ID
 
-Additionally, the `.env.EXAMPLE` file has the `AIRTABLE_BASE_ID` pre-defined for you. This ID references the dummy database mentioned above. Copy and paste that directly into your newly created `.env` file as well.
+Additionally, the `.env.EXAMPLE` file has the `GATSBY_AIRTABLE_BASE_ID` pre-defined for you. This ID references the dummy database mentioned above. Copy and paste that directly into your newly created `.env` file as well.
 
 If you ever lose the base ID for the dummy database, it is `appkenjGlBB01wr3i`.
 

gatsby-config.js

@@ -138,10 +138,10 @@ module.exports = {
     {
       resolve: `gatsby-source-airtable`,
       options: {
-        apiKey: process.env.AIRTABLE_API_KEY, // pulls in from your .env file
+        apiKey: process.env.GATSBY_AIRTABLE_API_KEY, // pulls in from your .env file
         tables: [
           {
-            baseId: process.env.AIRTABLE_BASE_ID, // note that this is not a secret, just an id
+            baseId: process.env.GATSBY_AIRTABLE_BASE_ID, // note that this is not a secret, just an id
             tableName: `Businesses`,
             tableView: `Approved`, // optional
             queryName: `Businesses`,
@@ -153,7 +153,7 @@ module.exports = {
             },
           },
           {
-            baseId: process.env.AIRTABLE_BASE_ID, // note that this is not a secret, just an id
+            baseId: process.env.GATSBY_AIRTABLE_BASE_ID, // note that this is not a secret, just an id
             tableName: `Allies`,
             tableView: `Approved`, // optional
             queryName: `Allies`,

package.json

@@ -95,4 +95,4 @@
     "*.{js,jsx,ts,tsx,d.ts,css,md}": "prettier --write",
     "*.{js,jsx,ts,tsx}": "eslint"
   }
-}
+}

src/components/Cards/NoResultsCard.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Heading, Text, useTheme } from '@chakra-ui/core';
-import SubmitAlly from '../Forms/SubmitAlly';
-import SubmitBusiness from '../Forms/SubmitBusiness';
+import BusinessSignUpForm from '../Forms/BusinessSignUpForm';
+import AllySignUpForm from '../Forms/AllySignUpForm';
 
 const NoResultsCard = ({ type }) => {
   const theme = useTheme();
@@ -33,7 +33,7 @@ const NoResultsCard = ({ type }) => {
             We’d love to have Allies in your area. If you’ve got skills to
             assist Black-owned businesses, sign up to be added.
           </Text>
-          <SubmitAlly />
+          <AllySignUpForm />
         </>
       )}
 
@@ -51,7 +51,7 @@ const NoResultsCard = ({ type }) => {
             need, include a donation link.
           </Text>
 
-          <SubmitBusiness />
+          <BusinessSignUpForm />
         </>
       )}
     </Box>

src/components/Feeds/AllyFeed.js

@@ -18,17 +18,16 @@ import NoResultsCard from '../Cards/NoResultsCard';
 import { CardWrapper, CardHeading, CardText, CardContent } from '../Card';
 import Button from '../Button';
 import Image from '../Image';
-import SubmitAlly from '../Forms/SubmitAlly';
+import AllySignUpForm from '../Forms/AllySignUpForm';
 
-// @TODO :: Add proper content to this modal. Probably pull this out into its own file seeing as its going to be a form
 const ModalForm = ({ isOpen, onClose, title }) => (
-  <Modal isOpen={isOpen} onClose={onClose}>
+  <Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
     <ModalOverlay />
     <ModalContent>
       <ModalHeader>{title}</ModalHeader>
       <ModalCloseButton />
       <ModalBody>
-        <SubmitAlly />
+        <AllySignUpForm />
       </ModalBody>
     </ModalContent>
   </Modal>

src/components/Forms/AllySignUpForm.js

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import {
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+  Select,
+  useTheme,
+  Text,
+} from '@chakra-ui/core';
+
+import PrimaryButton from '../Buttons/PrimaryButton';
+import { submitAlly } from '../../services/AirtableServices';
+
+const allySpecialities = ['Outreach', 'Tech', 'Business', 'Marketing'];
+
+const AllySignUpForm = () => {
+  const [email, setEmail] = useState(null);
+  const [firstName, setFirstName] = useState(null);
+  const [lastName, setLastName] = useState(null);
+  const [zipcode, setZipcode] = useState(null);
+  const [speciality, setSpeciality] = useState(null);
+  const [validationMessage, setValidationMessage] = useState(null);
+  const [submitted, setSubmitted] = useState(false);
+  const theme = useTheme();
+
+  const handleSubmit = event => {
+    event.preventDefault();
+    const infoToSubmit = {
+      email,
+      firstName,
+      lastName,
+      speciality,
+      zipcode,
+    };
+
+    //Custom Validation
+    const valuesToValidate = Object.values(infoToSubmit);
+    //Validates all fields are filled
+    if (valuesToValidate.includes(null)) {
+      setValidationMessage('All fields with * are required.');
+      return;
+    }
+
+    submitAlly(infoToSubmit);
+
+    setSubmitted(true);
+  };
+
+  //renders in place of form once it has been submitted
+  if (submitted) return <Text fontSize="2xl">Thank you for signing up!</Text>;
+
+  return (
+    <FormControl
+      isRequired
+      width="100%"
+      maxWidth="1000px"
+      margin="0 auto 3rem"
+      padding="0 24px"
+      onKeyPress={event => {
+        if (event.key === 'Enter') {
+          handleSubmit(event);
+        }
+      }}
+    >
+      {/* renders when form is submitted with validation errors */}
+      {validationMessage && <Text>{validationMessage}</Text>}
+
+      <Flex width="100%" direction="column">
+        <Flex direction="column" margin={theme.spacing.base}>
+          <FormLabel htmlFor="firstName">First name</FormLabel>
+          <Input
+            value={firstName}
+            id="firstName"
+            type="text"
+            placeholder="First name"
+            onChange={event => setFirstName(event.currentTarget.value)}
+          />
+        </Flex>
+        <Flex direction="column" margin={theme.spacing.base}>
+          <FormLabel htmlFor="lastName">Last name</FormLabel>
+          <Input
+            value={lastName}
+            id="lastName"
+            type="text"
+            placeholder="Last name"
+            onChange={event => setLastName(event.currentTarget.value)}
+          />
+        </Flex>
+        <Flex direction="column" margin={theme.spacing.base}>
+          <FormLabel htmlFor="email">Email</FormLabel>
+          <Input
+            value={email}
+            id="email"
+            type="text"
+            placeholder="Email"
+            onChange={event => setEmail(event.currentTarget.value)}
+          />
+        </Flex>
+        <Flex direction="column" margin={theme.spacing.base}>
+          <FormLabel htmlFor="speciality">Speciality</FormLabel>
+          <Select
+            id="speciality"
+            placeholder="Specialty"
+            value={speciality}
+            onChange={event => setSpeciality(event.currentTarget.value)}
+          >
+            {allySpecialities.map(speciality => {
+              return (
+                <option key={speciality} value={speciality}>
+                  {speciality}
+                </option>
+              );
+            })}
+          </Select>
+        </Flex>
+        <Flex direction="column" margin={theme.spacing.base}>
+          <FormLabel htmlFor="zipcode">Zipcode</FormLabel>
+          <Input
+            value={zipcode}
+            id="zipcode"
+            type="text"
+            placeholder="Zipcode"
+            onChange={event => setZipcode(event.currentTarget.value)}
+          />
+        </Flex>
+      </Flex>
+      <Flex width="100%" justify="center">
+        <PrimaryButton onClick={handleSubmit}>Register</PrimaryButton>
+      </Flex>
+    </FormControl>
+  );
+};
+
+export default AllySignUpForm;