From 8ca6696b3f9daa0d461652bb97867106ffe149d2 Mon Sep 17 00:00:00 2001
From: GoogleGenius <81032623+GoogleGenius@users.noreply.github.com>
Date: Thu, 28 Jul 2022 14:46:45 -0500
Subject: [PATCH] Add contact form

---
 src/App.css                     | 156 +++++++++++++++++++++++++++++++-
 src/App.tsx                     |  54 ++++++++---
 src/components/Contact.tsx      | 109 ++++++++++++++++++++++
 src/{ => components}/Course.tsx |  10 +-
 src/components/index.ts         |   2 +
 src/config/formSubmit.ts        |   3 +
 src/config/index.ts             |   1 +
 src/index.tsx                   |   2 +-
 8 files changed, 313 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Contact.tsx
 rename src/{ => components}/Course.tsx (97%)
 create mode 100644 src/components/index.ts
 create mode 100644 src/config/formSubmit.ts

diff --git a/src/App.css b/src/App.css
index 8c539e9..d988dd9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -356,6 +356,143 @@ button ion-icon {
   margin-right: 5px;
 }
 
+.floating-button-container {
+  align-items: center;
+  bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  position: fixed;
+  right: 30px;
+  z-index: 9;
+}
+
+.modal {
+  align-content: center;
+  background-color: var(--white);
+  border: none;
+  border-radius: 25px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
+    rgba(0, 0, 0, 0.05) 0px 0px 0px 2px;
+  display: flex;
+  flex-direction: column;
+  font-size: smaller;
+  gap: clamp(15px, 5vw, 20px);
+  height: 100%;
+  margin: revert;
+  max-height: 500px;
+  max-width: 500px;
+  padding: clamp(15px, 5vw, 20px);
+  text-align: left;
+  width: 100%;
+}
+
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(15px, 5vw, 20px);
+  height: 100%;
+  width: 100%;
+}
+
+.modal-input {
+  border: none;
+  border-radius: 999px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
+    rgba(0, 0, 0, 0.05) 0px 0px 0px 2px;
+  outline: none;
+  padding: 15px;
+}
+
+.modal-message {
+  border: none;
+  border-radius: 25px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
+    rgba(0, 0, 0, 0.05) 0px 0px 0px 2px;
+  height: 100%;
+  outline: none;
+  padding: 15px;
+  resize: none;
+}
+
+.modal-button-container {
+  gap: clamp(15px, 5vw, 20px);
+}
+
+.modal-send {
+  align-items: center;
+  background-color: var(--blue);
+  border: none;
+  border-radius: 999px;
+  color: var(--white);
+  cursor: pointer;
+  display: flex;
+  flex: 1 1;
+  padding: 15px;
+  text-decoration: none;
+  transition: all 0.5s ease 0s;
+  vertical-align: middle;
+}
+
+.modal-send:hover {
+  background-color: var(--bluer);
+  color: var(--white);
+  transition: all 0.5s ease 0s;
+}
+
+.modal-cancel {
+  align-items: center;
+  background-color: var(--blueish);
+  border: none;
+  border-radius: 999px;
+  color: var(--bluer);
+  cursor: pointer;
+  display: flex;
+  flex: 1 1;
+  padding: 15px;
+  text-decoration: none;
+  transition: all 0.5s ease 0s;
+  vertical-align: middle;
+}
+
+.modal-cancel:hover {
+  background-color: var(--blue);
+  color: var(--white);
+  transition: all 0.5s ease 0s;
+}
+
+.contact-modal-button {
+  align-items: center;
+  background-color: var(--blueish);
+  border: none;
+  border-radius: 999px;
+  /* bottom: 30px; */
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px;
+  color: var(--bluer);
+  cursor: pointer;
+  display: none;
+  height: 45.5px;
+  justify-content: center;
+  /* left: 110px; */
+  padding: 10px;
+  /* position: fixed; */
+  transition: all 0.5s ease 0s;
+  width: 45.5px;
+}
+
+@media only screen and (min-width: 525px) {
+  .contact-modal-button {
+    display: flex;
+  }
+}
+
+.contact-modal-button:hover {
+  background-color: var(--blue);
+  color: var(--white);
+  transition: all 0.5s ease 0s;
+}
+
 .hide {
   display: none;
 }
@@ -365,18 +502,20 @@ button ion-icon {
   background-color: var(--blueish);
   border: none;
   border-radius: 999px;
-  bottom: 30px;
+  /* bottom: 30px; */
   box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px;
   color: var(--bluer);
   cursor: pointer;
   display: flex;
+  height: 45.5px;
   justify-content: center;
   opacity: 0;
   padding: 10px;
-  position: fixed;
-  right: 30px;
+  /* position: fixed; */
+  /* right: 30px; */
   transition: all 0.5s ease 0s;
   visibility: hidden;
+  width: 45.5px;
 }
 
 .jump-to-top:hover {
@@ -429,7 +568,6 @@ button ion-icon {
 a.mobile-navigation-button {
   background-color: var(--blue);
   color: var(--white);
-  gap: 10px;
 }
 
 a.mobile-navigation-button:hover {
@@ -437,6 +575,16 @@ a.mobile-navigation-button:hover {
   color: var(--white);
 }
 
+.mobile-contact-modal-button {
+  background-color: var(--blue);
+  color: var(--white);
+}
+
+.mobile-contact-modal-button:hover {
+  background-color: var(--bluer);
+  color: var(--white);
+}
+
 @media only screen and (min-width: 525px) {
   .mobile-navigation {
     display: none;
diff --git a/src/App.tsx b/src/App.tsx
index 5aefaf8..9f3d434 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import './App.css';
+import { Contact } from './components';
 import { links } from './data';
 import { scrollToTop } from './utils';
 import firebase from 'firebase/compat/app';
@@ -28,6 +29,14 @@ const App: FC<AppProps> = ({ user, classItems }): JSX.Element => {
     }
   }, []);
 
+  const openContact = useCallback(() => {
+    const contactModal = document.getElementById(
+      'contact-modal'
+    ) as HTMLDialogElement;
+    contactModal?.parentElement?.classList.remove('hide');
+    contactModal?.showModal();
+  }, []);
+
   let userElement: JSX.Element;
   if (user && user.photoURL) {
     userElement = (
@@ -41,6 +50,7 @@ const App: FC<AppProps> = ({ user, classItems }): JSX.Element => {
 
   return (
     <div className="App">
+      <Contact />
       <div className="container">
         <div className="navigation">
           <ul>
@@ -84,15 +94,15 @@ const App: FC<AppProps> = ({ user, classItems }): JSX.Element => {
                 href={links.github}
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Magnify GitHub"
-                title="Magnify GitHub"
+                aria-label="GitHub"
+                title="GitHub"
               >
                 <span className="icon">
                   {/* @ts-expect-error ts(2339) */}
                   <ion-icon
                     name="logo-github"
-                    aria-label="Magnify GitHub"
-                    title="Magnify GitHub"
+                    aria-label="GitHub"
+                    title="GitHub"
                   />
                 </span>
                 <span className="title">GitHub</span>
@@ -263,15 +273,26 @@ const App: FC<AppProps> = ({ user, classItems }): JSX.Element => {
         </div>
         <div id="course-container">{classItems}</div>
       </div>
-      <button
-        type="button"
-        onClick={scrollToTop}
-        id="to-top"
-        className="jump-to-top"
-      >
-        {/* @ts-expect-error ts(2339) */}
-        <ion-icon name="chevron-up-outline" size="larger" />
-      </button>
+      <div className="floating-button-container">
+        <button
+          type="button"
+          onClick={scrollToTop}
+          id="to-top"
+          className="jump-to-top"
+        >
+          {/* @ts-expect-error ts(2339) */}
+          <ion-icon name="chevron-up-outline" size="larger" />
+        </button>
+        <button
+          type="button"
+          onClick={openContact}
+          id="contact-modal-open"
+          className="contact-modal-button"
+        >
+          {/* @ts-expect-error ts(2339) */}
+          <ion-icon name="mail-outline" size="larger" />
+        </button>
+      </div>
       <div id="mobile-nav" className="mobile-navigation">
         <a
           href={links.programOfStudiesPDF}
@@ -289,6 +310,13 @@ const App: FC<AppProps> = ({ user, classItems }): JSX.Element => {
         >
           GitHub
         </a>
+        <button
+          type="button"
+          onClick={openContact}
+          className="mobile-navigation-button mobile-contact-modal-button"
+        >
+          Contact
+        </button>
         <button
           type="button"
           onClick={scrollToTop}
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
new file mode 100644
index 0000000..1f8f3b0
--- /dev/null
+++ b/src/components/Contact.tsx
@@ -0,0 +1,109 @@
+import '../App.css';
+import { formSubmit } from '../config';
+import { FC, useCallback, useState } from 'react';
+
+export const Contact: FC = (): JSX.Element => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      if (email === '' || message === '') return;
+      event.preventDefault();
+      fetch(formSubmit.link, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          name: name,
+          email: email,
+          message: message,
+        }),
+      })
+        .then((response) => response.json())
+        .then((data: { message: string; success: string }) => {
+          if (data.success !== 'true') {
+            alert('An error occurred while sending the form!');
+            throw new Error(data.message);
+          }
+          const modal = document.getElementById(
+            'contact-modal'
+          ) as HTMLDialogElement;
+          modal.close();
+          setEmail('');
+          setMessage('');
+          setTimeout(() => {
+            alert('The contact form was sent successfully!');
+          }, 20);
+        });
+    },
+    [name, email, message]
+  );
+
+  const cancel = useCallback(() => {
+    const modal = document.getElementById('contact-modal') as HTMLDialogElement;
+    modal.close();
+  }, []);
+
+  return (
+    <div className="Contact hide">
+      <dialog id="contact-modal" className="modal">
+        <h1>Contact</h1>
+        <form className="modal-form" onSubmit={handleSubmit}>
+          <input
+            type="text"
+            name="name"
+            placeholder="Name"
+            className="modal-input"
+            onChange={useCallback(
+              (event: React.ChangeEvent<HTMLInputElement>) => {
+                setName(event.target.value);
+              },
+              []
+            )}
+            value={name}
+            required
+          />
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            className="modal-input"
+            onChange={useCallback(
+              (event: React.ChangeEvent<HTMLInputElement>) => {
+                setEmail(event.target.value);
+              },
+              []
+            )}
+            value={email}
+            required
+          />
+          <textarea
+            name="message"
+            placeholder="Message"
+            className="modal-message"
+            onChange={useCallback(
+              (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+                setMessage(event.target.value);
+              },
+              []
+            )}
+            value={message}
+            required
+          />
+          <div className="flex-container modal-button-container">
+            <button type="button" onClick={cancel} className="modal-cancel">
+              Cancel
+            </button>
+            <button type="submit" className="modal-send">
+              Send
+            </button>
+          </div>
+        </form>
+      </dialog>
+    </div>
+  );
+};
diff --git a/src/Course.tsx b/src/components/Course.tsx
similarity index 97%
rename from src/Course.tsx
rename to src/components/Course.tsx
index 5924fb5..31fc26c 100644
--- a/src/Course.tsx
+++ b/src/components/Course.tsx
@@ -1,6 +1,6 @@
-import './App.css';
-import { firebaseConfig } from './config';
-import { CourseType } from './types';
+import '../App.css';
+import { firebaseConfig } from '../config';
+import { CourseType } from '../types';
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/database';
 import { FC, useCallback, useRef, useState, useMemo } from 'react';
@@ -13,7 +13,7 @@ interface CourseProps {
   authLevel: number;
 }
 
-const Course: FC<CourseProps> = ({ course, authLevel }): JSX.Element => {
+export const Course: FC<CourseProps> = ({ course, authLevel }): JSX.Element => {
   const [isEditing, setIsEditing] = useState(false);
 
   const credits = useRef<HTMLParagraphElement>(null);
@@ -256,5 +256,3 @@ const Course: FC<CourseProps> = ({ course, authLevel }): JSX.Element => {
     </div>
   );
 };
-
-export default Course;
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..8ef1ac4
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './Course';
+export * from './Contact';
diff --git a/src/config/formSubmit.ts b/src/config/formSubmit.ts
new file mode 100644
index 0000000..3c26cbb
--- /dev/null
+++ b/src/config/formSubmit.ts
@@ -0,0 +1,3 @@
+export const formSubmit = {
+  link: 'https://formsubmit.co/ajax/e32713b6f08f8bdbb6c22560b3de6b62',
+};
diff --git a/src/config/index.ts b/src/config/index.ts
index 5588511..7260b8e 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1 +1,2 @@
 export * from './firebase';
+export * from './formSubmit';
diff --git a/src/index.tsx b/src/index.tsx
index 10cf95d..0683def 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
 import App from './App';
-import Course from './Course';
+import { Course } from './components';
 import { firebaseConfig } from './config';
 import localCourseData from './data/coursedata.json';
 import './index.css';