feat: require emails in contact forms; autofill emails based on user auth

Author: thecodingwizard

src/components/ContactUsSlideover/ContactUsSlideover.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { ModuleInfo } from '../../models/module';
 import { SECTION_LABELS } from '../../../content/ordering';
 import SlideoverForm from './SlideoverForm';
-import { useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import useStickyState from '../../hooks/useStickyState';
+import UserDataContext from '../../context/UserDataContext/UserDataContext';
 
 // Warning: this file is insanely messy. This should be rewritten soon :)
 
@@ -67,8 +68,8 @@ export default function ContactUsSlideover({
   onClose: any;
   activeModule?: ModuleInfo;
 }) {
-  const [name, setName] = useStickyState('', 'contact_form_name');
-  const [email, setEmail] = useStickyState('', 'contact_form_email');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
   const [location, setLocation] = useState('');
   const [topic, setTopic] = useStickyState('', 'contact_form_topic');
   const topics = [
@@ -94,6 +95,17 @@ export default function ContactUsSlideover({
     else setLocation('');
   }, [activeModule]);
 
+  const { firebaseUser } = useContext(UserDataContext);
+  useEffect(() => {
+    if (!firebaseUser) return;
+    if (email === '') {
+      setEmail(firebaseUser.email);
+    }
+    if (name === '') {
+      setName(firebaseUser.displayName);
+    }
+  }, [firebaseUser]);
+
   React.useEffect(() => {
     if (isOpen) {
       setShowSuccess(false);

src/components/MarkdownLayout/ModuleFeedback.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { SolutionInfo } from '../../models/solution';
 import { ModuleInfo } from '../../models/module';
 import useStickyState from '../../hooks/useStickyState';
-import { useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { validateEmail } from '../ContactUsSlideover/ContactUsSlideover';
+import UserDataContext from '../../context/UserDataContext/UserDataContext';
 
 export default function ModuleFeedback({
   markdownData,
@@ -16,22 +17,31 @@ export default function ModuleFeedback({
     '',
     'module_contact_form_message'
   );
-  const [email, setEmail] = useStickyState('', 'contact_form_email');
+  const [email, setEmail] = useState('');
   const [showSuccess, setShowSuccess] = useState(false);
 
-  const emailErrorMsg =
-    showErrors && email !== '' && !validateEmail(email)
+  const { firebaseUser } = useContext(UserDataContext);
+  useEffect(() => {
+    if (email === '' && firebaseUser?.email) setEmail(firebaseUser.email);
+  }, [firebaseUser?.email]);
+
+  const emailErrorMsg = showErrors
+    ? email === ''
+      ? 'This field is required.'
+      : !validateEmail(email)
       ? 'Please enter a valid email address.'
-      : null;
+      : null
+    : null;
 
   const handleSubmit = async e => {
     e.preventDefault();
 
     setShowErrors(true);
     if (message === '') return;
+    if (email === '' || !validateEmail(email)) return;
 
     let data = new FormData();
-    data.append('email', email || 'Not Given');
+    data.append('email', email);
     data.append('location', markdownData.title);
     data.append('url', window.location.href);
     data.append('topic', 'Module Feedback Form');
@@ -109,7 +119,7 @@ export default function ModuleFeedback({
                 value={email}
                 formNoValidate={true}
                 onChange={e => setEmail(e.target.value)}
-                placeholder="Email Address (Optional)"
+                placeholder="Email Address"
               />
               {emailErrorMsg && (
                 <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">