feat: used sendDM method in contact form

src/pages/contact.tsx

@@ -1,5 +1,5 @@
 import { PageProps, Link, graphql } from 'gatsby'
-import React from 'react'
+import React, { useState } from 'react'
 
 import Layout from '../components/layout'
 import Seo from '../components/seo'
@@ -20,6 +20,7 @@ import {
 import contactBg from '../images/contact_bg.jpg'
 
 import '../styledComponents/contact.css'
+import { NostrController } from '../controllers'
 
 type DataProps = {
   site: {
@@ -32,6 +33,17 @@ type DataProps = {
 }
 
 const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
+  const nostrController = NostrController.getInstance()
+
+  const [name, setName] = useState<string>()
+  const [email, setEmail] = useState<string>()
+  const [subject, setSubject] = useState<string>()
+  const [message, setMessage] = useState<string>()
+  const [notification, setNotification] = useState<string>()
+
+  const getBorderStyle = (value: string | undefined) =>
+    value === undefined ? {} : value ? {} : { border: '1px solid red' }
+
   return (
     <Layout
       location={location}
@@ -52,8 +64,35 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
 
             <form
               className="kwes-form"
-              method="POST"
-              action="https://kwes.io/api/foreign/forms/mxKuyK4lxZWnG2WNH3ga"
+              onSubmit={async (evt) => {
+                evt.preventDefault()
+
+                if (name && email && subject && message) {
+                  const res = await nostrController
+                    .sendDM(
+                      'npub1dc0000002dtkw7et06sztc9nvk79r6yju8gk69sr88rgrg0e8cvsnptgyv',
+                      `Name: ${name}
+Email: ${email}
+Subject: ${subject}
+Message: ${message}`
+                    )
+                    .catch((err) => {
+                      setNotification(
+                        `Something went wrong. Please check the console for more information. Please try one more time.`
+                      )
+
+                      console.log(`Sending message error: `, err)
+                    })
+
+                  if (res && res.length) {
+                    setNotification(`Message sent. We'll contact you shortly.`)
+                  } else {
+                    setNotification(
+                      `Something went wrong. Please try one more time.`
+                    )
+                  }
+                }
+              }}
             >
               <div className="mb-3">
                 <StyledLabel htmlFor="name" className="form-label">
@@ -65,6 +104,11 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
                   id="name"
                   name="name"
                   rules="required|max:50"
+                  onChange={(evt) => {
+                    setName(evt.target.value)
+                    setNotification(undefined)
+                  }}
+                  style={getBorderStyle(name)}
                 />
               </div>
               <div className="mb-3">
@@ -78,6 +122,11 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
                   name="email"
                   rules="required|email"
                   aria-describedby="emailHelp"
+                  onChange={(evt) => {
+                    setEmail(evt.target.value)
+                    setNotification(undefined)
+                  }}
+                  style={getBorderStyle(email)}
                 />
                 <div id="emailHelp" className="form-text">
                   We'll never share your email with anyone else.
@@ -93,6 +142,11 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
                   id="subject"
                   name="subject"
                   rules="required|max:50"
+                  onChange={(evt) => {
+                    setSubject(evt.target.value)
+                    setNotification(undefined)
+                  }}
+                  style={getBorderStyle(subject)}
                 />
               </div>
               <div className="mb-3">
@@ -105,12 +159,18 @@ const Contact: React.FC<PageProps<DataProps>> = ({ data, location }) => {
                   name="message"
                   rows="5"
                   rules="required|max:200"
+                  onChange={(evt) => {
+                    setMessage(evt.target.value)
+                    setNotification(undefined)
+                  }}
+                  style={getBorderStyle(message)}
                 ></textarea>
               </div>
               <div className="mb-3">
                 <SolidButton theme="dark">Submit</SolidButton>
               </div>
             </form>
+            {notification && <span>{notification}</span>}
           </div>
           <div className="col-md-6">
             <ContactBackground src={contactBg} info="Book a Demo" />