From 0f0af391853f702946925be2605637a698c2e33f Mon Sep 17 00:00:00 2001
From: Johnny Wu <skydodle@gmail.com>
Date: Mon, 24 Jun 2024 18:25:56 -0700
Subject: [PATCH 1/4] feat: replace form with Google Form

---
 components/contact/ContactForm.jsx | 332 ++---------------------------
 1 file changed, 23 insertions(+), 309 deletions(-)

diff --git a/components/contact/ContactForm.jsx b/components/contact/ContactForm.jsx
index 981629b1c..524e42ccb 100644
--- a/components/contact/ContactForm.jsx
+++ b/components/contact/ContactForm.jsx
@@ -1,321 +1,35 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { toast } from 'react-toastify';
-import makeStyles from '@mui/styles/makeStyles'
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import InputLabel from '@mui/material/InputLabel';
-import CircularProgress from '@mui/material/CircularProgress';
-import { showFeedbackSuccess, setErrorModal } from '@reducers/ui';
-import { sendGitRequest } from '@reducers/data';
-import 'react-toastify/dist/ReactToastify.css';
-import colors from '@theme/colors'
-import fonts from '@theme/fonts';
-import typography from '@theme/typography';
-import borderRadius from '@theme/borderRadius';
+import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(theme => ({
-  form: {
-    marginBottom: theme.spacing(20)
+  formContainer: {
+    width: '100%',
+    height: 'auto',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  formLabel: {
-    fontSize: typography.h6.fontSize,
-    color: colors.primaryLight,
-    fontWeight: fonts.weight.medium,
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
-  },
-  formInput: {
-    backgroundColor: colors.formInput,
-    borderRadius: borderRadius.sm
-  },
-  noBorder: {
-    border: "none",
+  iframe: {
+    border: 'none',
+    width: '100%',
+    height: '1200px',
+    minHeight: '856px',
   },
 }));
 
-const initialFormValues = {
-  firstName: '',
-  lastName: '',
-  email: '',
-  association: '',
-  message: '',
-  errors: {
-    missingFirstName: false,
-    invalidFirstName: false,
-    missingLastName: false,
-    invalidLastName: false,
-    missingEmail: false,
-    invalidEmail: false,
-    missingMessage: false,
-    invalidMessage: false,
-  },
-  loading: false,
-};
-
-const toastEmitterSettings = {
-  position: 'bottom-right',
-  autoClose: 5000,
-  hideProgressBar: false,
-  closeOnClick: true,
-  pauseOnHover: true,
-  draggable: true,
-  progress: undefined,
-};
-
 function ContactForm() {
-  const dispatch = useDispatch();
-  const classes = useStyles()
-
-  // mapStateToProps equivalent.
-  const displayFeedbackSuccess = useSelector(state => state.ui.displayFeedbackSuccess);
-  const openErrorModal = useSelector(state => state.ui.error.isOpen);
-
-  const [formValues, setFormValues] = useState(initialFormValues);
-
-  function clearFields() {
-    setFormValues({
-      ...initialFormValues,
-    });
-  }
-
-  function setLoading(isLoading) {
-    setFormValues(prevState => ({
-      ...prevState,
-      ...{
-        loading: isLoading,
-      },
-    }));
-  }
-
-  // Initialize component.
-  useEffect(() => {
-    // componentDidMount code goes here...
-    if (displayFeedbackSuccess) {
-      toast.success('We received your message. Our team will contact you at the email address provided.', toastEmitterSettings);
-      clearFields();
-    }
-
-    if (openErrorModal) {
-      toast.error('We failed to process your message. Please try again later.', toastEmitterSettings);
-      setLoading(false);
-    }
-
-    return () => {
-      // componentWillUnmount code goes here...
-      dispatch(showFeedbackSuccess(false));
-      dispatch(setErrorModal(false));
-    };
-  }, [dispatch, displayFeedbackSuccess, openErrorModal]);
-
-  // Helper methods.
-  function validateEmail(emailAddress) {
-    // A regular expression checking for a valid email format.
-    const VALID_EMAIL_FORMAT_REGEX = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
-    return VALID_EMAIL_FORMAT_REGEX.test(emailAddress);
-  }
-
-  function validateName(name) {
-    // A regular expression checking for valid names (first and last).
-    const NAME_REGEX = /^[a-zA-Z]+$/;
-    return NAME_REGEX.test(name);
-  }
-
-  const clearErrors = useCallback(() => {
-    setFormValues(prevState => ({
-      ...prevState,
-      ...{
-        errors: {
-          missingFirstName: false,
-          invalidFirstName: false,
-          missingLastName: false,
-          invalidLastName: false,
-          missingEmail: false,
-          invalidEmail: false,
-          missingMessage: false,
-          invalidMessage: false,
-        },
-      },
-    }));
-  }, []);
-
-  const validateForm = useCallback(() => {
-    const noFirstName = formValues.firstName.trim().length === 0;
-    const notValidFirstName = !validateName(formValues.firstName.trim());
-    const noLastName = formValues.lastName.trim().length === 0;
-    const notValidLastName = !validateName(formValues.lastName.trim());
-    const noEmail = formValues.email.trim().length === 0;
-    const noMessage = formValues.message.trim().length === 0;
-    const incompleteEmail = (!noEmail && !validateEmail(formValues.email));
-    const invalidMessageLength = formValues.message.trim().length < 6
-      || formValues.message.trim().length > 1000;
-    if (!noFirstName && !noLastName && !notValidFirstName && !notValidLastName
-      && !noEmail && !incompleteEmail
-      && !noMessage && !invalidMessageLength) {
-      return true;
-    }
-
-    setFormValues(prevState => ({
-      ...prevState,
-      ...{
-        errors: {
-          missingFirstName: noFirstName,
-          invalidFirstName: notValidFirstName,
-          missingLastName: noLastName,
-          invalidLastName: notValidLastName,
-          missingEmail: noEmail,
-          invalidEmail: incompleteEmail,
-          missingMessage: noMessage,
-          invalidMessage: invalidMessageLength,
-        },
-      },
-    }));
-    return false;
-  }, [formValues]);
-
-  // Event handlers.
-  const onInputChange = useCallback(event => {
-    const { name, value } = event.target;
-    setFormValues(prevState => ({ ...prevState, [name]: value }));
-  }, []);
-
-  const handleSubmit = useCallback(event => {
-    event.preventDefault();
-
-    if (!validateForm()) {
-      return;
-    }
-
-    const body = [
-      `First name: ${formValues.firstName.trim()}`,
-      `Last name: ${formValues.lastName.trim()}`,
-      `Email: ${formValues.email.trim()}`,
-      `Association: ${formValues.association.trim() || 'Not provided'}`,
-      `Message: ${formValues.message.trim()}`,
-    ].join('\n');
-
-    setLoading(true);
-
-    // Dispatch action to redux with payload.
-    dispatch(sendGitRequest({ title: formValues.email, body }));
-  }, [dispatch,
-    formValues.association,
-    formValues.email,
-    formValues.firstName,
-    formValues.lastName,
-    formValues.message,
-    validateForm]);
+  const classes = useStyles();
 
   return (
-    <form className={classes.form} id="contact-form" onSubmit={handleSubmit}>
-      <Grid container alignItems="center" justifyContent="center" direction="column">
-        <Grid container alignItems="center" justifyContent="center" direction="row" spacing={2}>
-          <Grid item xs={6}>
-            <InputLabel variant='h1' htmlFor='contact-firstname' className={classes.formLabel}>First Name*</InputLabel>
-            <TextField
-              className={classes.formInput}
-              id="contact-firstname" 
-              name="firstName"
-              type="text"
-              autoComplete="off"
-              value={formValues.firstName}
-              onChange={onInputChange}
-              onFocus={clearErrors}
-              error={formValues.errors.missingFirstName || formValues.errors.invalidFirstName}
-              helperText={formValues.errors.missingFirstName || formValues.errors.invalidFirstName ? 'Please provide a first name.' : ''}
-              fullWidth
-              InputProps={{
-                classes:{notchedOutline:classes.noBorder}
-              }}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <InputLabel htmlFor='contact-lastname' className={classes.formLabel}>Last Name*</InputLabel>
-            <TextField
-              className={classes.formInput}
-              id="contact-lastname"
-              name="lastName"
-              type="text"
-              autoComplete="off"
-              value={formValues.lastName}
-              onChange={onInputChange}
-              onFocus={clearErrors}
-              error={formValues.errors.missingLastName || formValues.errors.invalidLastName}
-              helperText={formValues.errors.missingLastName || formValues.errors.invalidLastName ? 'Please provide a valid last name.' : ''}
-              fullWidth
-              InputProps={{
-                classes:{notchedOutline:classes.noBorder}
-              }}
-            />
-          </Grid>
-        </Grid>
-        <Grid container alignItems="center" justifyContent="center" direction="row">
-          <Grid item xs={12}>
-            <InputLabel htmlFor='contact-email' className={classes.formLabel}>Email*</InputLabel>
-            <TextField
-              className={classes.formInput}
-              id="contact-email"
-              name="email"
-              type="text"
-              autoComplete="off"
-              value={formValues.email}
-              onChange={onInputChange}
-              onFocus={clearErrors}
-              error={formValues.errors.missingEmail || formValues.errors.invalidEmail}
-              helperText={formValues.errors.missingEmail || formValues.errors.invalidEmail ? 'Please provide a valid email address.' : ''}
-              fullWidth
-              InputProps={{
-                classes:{notchedOutline:classes.noBorder}
-              }}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <InputLabel htmlFor='contact-association' className={classes.formLabel}>Association</InputLabel>
-            <TextField
-              className={classes.formInput}
-              id="contact-association"
-              name="association"
-              type="text"
-              autoComplete="off"
-              value={formValues.association}
-              onChange={onInputChange}
-              fullWidth
-              InputProps={{
-                classes:{notchedOutline:classes.noBorder}
-              }}
-            />
-          </Grid>
-          <Grid item xs={12} style={{ paddingTop: '12px' }}>
-            <InputLabel htmlFor='contact-association' className={classes.formLabel}>Message*</InputLabel>
-            <TextField
-              className={classes.formInput}
-              id="contact-message"
-              name="message"
-              type="text"
-              rows={8}
-              autoComplete="off"
-              value={formValues.message}
-              onChange={onInputChange}
-              onFocus={clearErrors}
-              error={formValues.errors.missingMessage || formValues.errors.invalidMessage}
-              helperText={formValues.errors.missingMessage || formValues.errors.invalidMessage ? 'Please provide a message (6-1000 characters).' : ''}
-              fullWidth
-              multiline
-              InputProps={{
-                classes:{notchedOutline:classes.noBorder}
-              }}
-            />
-          </Grid>
-        </Grid>
-        <Grid container direction="column" alignItems="center" justifyContent="center" style={{ paddingTop: '20px' }}>
-          <CircularProgress style={{ display: formValues.loading ? 'block' : 'none' }} />
-          <Button variant="contained" color="secondary" type="submit" style={{ display: formValues.loading ? 'none' : 'block' }}>
-            Submit
-          </Button>
-        </Grid>
-      </Grid>
-    </form>
+    <div className={classes.formContainer}>
+      <iframe
+        src="https://docs.google.com/forms/d/e/1FAIpQLScrhJY9ezqlKcpYermIImgGKYZ4bP2k1BRAOpuEay-tVXfvdQ/viewform?embedded=true"
+        className={classes.iframe}
+        title="Contact Form"
+      >
+        Loading…
+      </iframe>
+    </div>
   );
 }
 

From 781d7bf5673967a3a573603856e4fb4d8271a7c9 Mon Sep 17 00:00:00 2001
From: Johnny Wu <skydodle@gmail.com>
Date: Fri, 28 Jun 2024 21:30:57 -0700
Subject: [PATCH 2/4] remove unused theme

---
 components/contact/ContactForm.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/contact/ContactForm.jsx b/components/contact/ContactForm.jsx
index 524e42ccb..4217f5cba 100644
--- a/components/contact/ContactForm.jsx
+++ b/components/contact/ContactForm.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(({
   formContainer: {
     width: '100%',
     height: 'auto',

From c22c1f8288bf77c2049fb42b74574cb7d195fdac Mon Sep 17 00:00:00 2001
From: Johnny Wu <skydodle@gmail.com>
Date: Fri, 28 Jun 2024 21:33:37 -0700
Subject: [PATCH 3/4] add comment

---
 components/contact/ContactForm.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/contact/ContactForm.jsx b/components/contact/ContactForm.jsx
index 4217f5cba..77e296fa7 100644
--- a/components/contact/ContactForm.jsx
+++ b/components/contact/ContactForm.jsx
@@ -22,6 +22,7 @@ function ContactForm() {
 
   return (
     <div className={classes.formContainer}>
+      {/* Embed the Google Form */}
       <iframe
         src="https://docs.google.com/forms/d/e/1FAIpQLScrhJY9ezqlKcpYermIImgGKYZ4bP2k1BRAOpuEay-tVXfvdQ/viewform?embedded=true"
         className={classes.iframe}

From 0a03dbf7aa25de0279a795e9537d28859ec9a4c6 Mon Sep 17 00:00:00 2001
From: Johnny Wu <skydodle@gmail.com>
Date: Fri, 28 Jun 2024 22:29:05 -0700
Subject: [PATCH 4/4] add form script documentation

---
 components/contact/googleFormScript.js | 74 ++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 components/contact/googleFormScript.js

diff --git a/components/contact/googleFormScript.js b/components/contact/googleFormScript.js
new file mode 100644
index 000000000..a5d44c07d
--- /dev/null
+++ b/components/contact/googleFormScript.js
@@ -0,0 +1,74 @@
+/**
+ *
+ * This script is run in Google Apps Script for handling form submissions from the contact
+ * page Google Form.
+ * It is not run in this codebase but we are storing a copy here for documentation.
+ *
+ * This script automates the process of creating GitHub issues upon form submission.
+ * It includes the following key functions:
+ *
+ * Functions:
+ * - onFormSubmit: Triggered when the form is submitted. Extracts form
+ *   responses and creates a GitHub issue.
+ * - setUpTrigger: Sets up the form submit trigger for the Google Form.
+ *
+ * Usage:
+ * - Set up the trigger by running the setUpTrigger function.
+ * - This script should be copied and stored in the web app codebase for
+ *   reference and documentation purposes.
+ *
+ * GitHub Issue Creation:
+ * - Constructs the title and body of the issue using form responses.
+ * - Sends a POST request to the GitHub API to create the issue.
+ *
+ * Apps Script documenation on Form Service:
+ * - https://developers.google.com/apps-script/reference/forms
+ */
+
+function onFormSubmit(e) {
+  const formResponse = e.response; // Use the FormResponse object
+  const itemResponses = formResponse.getItemResponses(); // Get all item responses
+
+  // Extract responses from the form questions
+  const fullName = itemResponses[0].getResponse(); // Full Name
+  const email = itemResponses[1].getResponse(); // Email
+  const neighborhoodAssociation = itemResponses[2].getResponse() || 'Not provided'; // Neighborhood Association
+  const message = itemResponses[3].getResponse(); // Message
+
+  // Construct title and body for GitHub issue
+  const title = `Feedback from ${fullName} (${email})`;
+  const body = `**Full Name:** ${fullName}\n**Email:** ${email}\n**Neighborhood Association:** ${neighborhoodAssociation}\n**Message:**\n${message}`;
+
+  // GitHub API configuration
+  const GITHUB_ORG = 'hackforla';
+  const GITHUB_REPO = '311-data';
+  const GITHUB_TOKEN = PropertiesService.getScriptProperties().getProperty('GITHUB_TOKEN');
+
+  const url = `https://api.github.com/repos/${GITHUB_ORG}/${GITHUB_REPO}/issues`;
+  const payload = {
+    'title': title,
+    'body': body
+  };
+
+  const options = {
+    'method': 'post',
+    'contentType': 'application/json',
+    'headers': {
+      'Authorization': `token ${GITHUB_TOKEN}`
+    },
+    'payload': JSON.stringify(payload)
+  };
+
+  // Sending the request to create the GitHub issue
+  const response = UrlFetchApp.fetch(url, options);
+  Logger.log(response.getContentText());
+}
+
+function setUpTrigger() {
+  const form = FormApp.getActiveForm();
+  ScriptApp.newTrigger('onFormSubmit')
+           .forForm(form)
+           .onFormSubmit()
+           .create();
+}
+