fix: contact form submit verbage

This commit is contained in:
Yehoshua Sandler 2025-05-09 18:15:04 -05:00
parent 5214290a72
commit fdbcce0dcd
2 changed files with 2 additions and 112 deletions

View File

@ -35,16 +35,12 @@ export const ContactForm = (props: Props) => {
const formData = new FormData(e.currentTarget)
console.log('...', [...formData.entries()])
console.log('not spread', Object.entries(formData))
const dataToSend = [...formData.entries()].map(([name, value]) => {
return {
field: name,
value,
}
})
console.log('datatosend', dataToSend)
try {
const submitResponse = await fetch('/api/form-submissions', {
@ -57,13 +53,11 @@ export const ContactForm = (props: Props) => {
submissionData: dataToSend,
}),
})
console.log(submitResponse)
if (submitResponse.status !== 201) {
setFormState('idle')
toast('There was an issue with your submission. Please try again.')
} else setFormState('success')
} catch (err) {
console.log(err)
setFormState('idle')
toast('There was an issue with your submission. Please try again.')
}
@ -136,8 +130,8 @@ export const ContactForm = (props: Props) => {
}
successChild={
<PopoverFormSuccess
title="Feedback Received"
description="Thank you for supporting our project!"
title="Message Received"
description="Thank you for that! I'll get back with you shortly."
/>
}
/>

View File

@ -1,104 +0,0 @@
'use client'
import { useEffect, useState } from 'react'
import {
PopoverForm,
PopoverFormButton,
PopoverFormCutOutLeftIcon,
PopoverFormCutOutRightIcon,
PopoverFormSeparator,
PopoverFormSuccess,
} from './popover-form'
type FormState = 'idle' | 'loading' | 'success'
const ContactForm = () => {
const [formState, setFormState] = useState<FormState>('idle')
const [open, setOpen] = useState(false)
const [feedback, setFeedback] = useState('')
function submit() {
setFormState('loading')
setTimeout(() => {
setFormState('success')
}, 1500)
setTimeout(() => {
setOpen(false)
setFormState('idle')
setFeedback('')
}, 3300)
}
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setOpen(false)
}
if (
(event.ctrlKey || event.metaKey) &&
event.key === 'Enter' &&
open &&
formState === 'idle'
) {
submit()
}
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [open, formState])
return (
<div className="flex w-full items-center justify-center">
<PopoverForm
title="Feedback"
open={open}
setOpen={setOpen}
width="364px"
height="192px"
showCloseButton={formState !== 'success'}
showSuccess={formState === 'success'}
openChild={
<form
onSubmit={(e) => {
e.preventDefault()
if (!feedback) return
submit()
}}
>
<div className="relative">
<textarea
autoFocus
placeholder="Feedback"
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
className="h-32 w-full resize-none rounded-t-lg p-3 text-sm outline-none"
required
/>
</div>
<div className="relative flex h-12 items-center px-[10px]">
<PopoverFormSeparator />
<div className="absolute left-0 top-0 -translate-x-[1.5px] -translate-y-1/2">
<PopoverFormCutOutLeftIcon />
</div>
<div className="absolute right-0 top-0 translate-x-[1.5px] -translate-y-1/2 rotate-180">
<PopoverFormCutOutRightIcon />
</div>
<PopoverFormButton loading={formState === 'loading'} text="" />
</div>
</form>
}
successChild={
<PopoverFormSuccess
title="Feedback Received"
description="Thank you for supporting our project!"
/>
}
/>
</div>
)
}
export default ContactForm