refactor: Replace mailto hrefs with /contact

Author: oluwatobiss

components/ContactUs/ContactUsForm/index.js

@@ -4,7 +4,7 @@ import RevealContentContainer from '@/components/containers/RevealContentContain
 import { SubmitButton } from '@/components/buttons/SubmitButton';
 import styles from './ContactUsForm.module.scss';
 
-function ContactUsForm({ setResponseMessage, getReCaptchaToken }) {
+function ContactUsForm({ subject, setResponseMessage, getReCaptchaToken }) {
   const {
     register,
     handleSubmit,
@@ -14,7 +14,7 @@ function ContactUsForm({ setResponseMessage, getReCaptchaToken }) {
     defaultValues: {
       Name: '',
       Email: '',
-      Subject: '',
+      Subject: subject || '',
       Message: '',
     },
   });

components/ContactUs/index.js

@@ -2,9 +2,11 @@ import React from 'react';
 import ReCapchaWrapper from '../Recapcha';
 import ContactUsForm from '@/components/ContactUs/ContactUsForm';
 
-const ContactUs = ({ setMsg }) => {
+const ContactUs = ({ subject, setMsg }) => {
   return (
-    <ReCapchaWrapper children={<ContactUsForm setResponseMessage={setMsg} />} />
+    <ReCapchaWrapper
+      children={<ContactUsForm subject={subject} setResponseMessage={setMsg} />}
+    />
   );
 };
 

components/layout/Nav/index.js

@@ -101,16 +101,16 @@ export default function Nav() {
                 );
               })}
               <li className={styles.item}>
-                <a
-                  href='mailto:hello@webdevpath.co?subject=Project collaborator application'
+                <Link
+                  href='/contact?subject=Project collaborator application'
                   className={`
                     ${active ? styles.active : ''} 
                     ${isSticky ? styles.buttonSticky : styles.button}
                   `}
                   title='Join us'
                 >
                   Join us
-                </a>
+                </Link>
               </li>
             </ul>
             <button

pages/about.js

@@ -207,7 +207,7 @@ export default function AboutUs() {
           image='/images/svg/slash.svg'
           altTag=''
           customInnerClass='get-started'
-          link='mailto:hello@webdevpath.co'
+          link='/contact'
           linkText='Ping us'
           customBtnClass='inverted-grey'
         />

pages/contact.js

@@ -1,19 +1,23 @@
 import { useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import ContactUsFormSubscribe from '@/components/ContactUs';
 import ContactUsCards from '@/components/ContactUs/ContactUsCards';
 import styles from '@/styles/pages/contact.module.scss';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
 export default function ContactUs() {
   const [message, setMessage] = useState([]);
-
+  const searchParams = useSearchParams();
   return (
     <>
       <div className={styles.contactUsContainer}>
         <div className={styles.formWrapper}>
           <div className={styles.formAndDecorations}>
             <Bracket className={bracketStyles.yellowBracket} />
-            <ContactUsFormSubscribe setMsg={setMessage} />
+            <ContactUsFormSubscribe
+              subject={searchParams.get('subject')}
+              setMsg={setMessage}
+            />
             <img
               className={styles.yellowColon}
               src='/images/svg/yellow-colon.svg'