1 files changed, 2 insertions, 74 deletions
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 1c144c2..6af8ad1 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,56 +1,7 @@
-'use client'
-import { useState, useRef, FormEvent } from 'react'
 import InfoBar from "~/components/InfoBar/"
-
-import styles from '~/styles/form.module.css'
-
-const submitUrl = 'https://contact.tempest.dev/api/contact/me'
+import ContactForm from "~/components/ContactForm"
 
 export default function Contact() {
-  const [submitting, setSubmitting] = useState(false)
-  const [status, setStatus] = useState('')
-
-  const nameRef = useRef<HTMLInputElement>()
-  const emailRef = useRef<HTMLInputElement>()
-  const messageRef = useRef<HTMLTextAreaElement>()
-
-  const submit = async (ev: FormEvent<HTMLFormElement>) => {
-    ev.preventDefault()
-
-    setStatus('')
-
-    const name = nameRef.current.value
-    const email = emailRef.current.value
-    const message = messageRef.current.value
-
-    if (!name) setStatus(s => s + ' Name required.')
-    if (!email) setStatus(s => s + ' Email required.')
-    if (!message) setStatus(s => s + ' Message required.')
-
-    if (!name || !email || !message)
-      return
-
-    setSubmitting(true)
-
-    try {
-
-      await fetch(submitUrl, {
-        method: 'post',
-        headers: {
-          'content-type': 'application/json'
-        },
-        body: JSON.stringify({
-          name, email, message
-        })
-      })
-
-      setStatus('Message sent successfully')
-    } catch {
-      setStatus('Error submitting message, please try again')
-    } finally {
-      setSubmitting(false)
-    }
-  }
 
   return (
     <>
@@ -61,30 +12,7 @@ export default function Contact() {
         <InfoBar>
           Be nice.  Please don't make us regret putting this here
         </InfoBar>
-        <form className={styles.form} onSubmit={submit}>
-          <label htmlFor="name">Name:</label>
-          <input disabled={submitting} name="name" ref={nameRef} />
-
-          <label htmlFor="email">Email:</label>
-          <input disabled={submitting} name="email" ref={emailRef} />
-
-          <label htmlFor="message">Message:</label>
-          <textarea disabled={submitting} name="message" ref={messageRef} />
-
-          <button disabled={submitting} type="submit">Submit</button>
-          {status && <span className={styles.status}>{status}</span>}
-          {/*<FormController
-          url="https://kae.tempest.dev/api/contact/tempest"
-          afterSubmit={() => setStatus('Message sent successfully!')}
-          onError={() => setStatus('Error submitting message, please try again.')}
-        >
-          <Input name="name" validate={v => !!v} />
-          <Input name="email" validate={v => !!v && v.includes('@')} />
-          <TextArea name="message" validate={v => !!v && v.length < 1000} />
-          <Button onClick={() => setStatus(null)} type="submit">submit</Button>
-          {status && <p>{status}</p>}
-        </FormController>*/}
-        </form>
+        <ContactForm/>
       </main>
     </>
   )