fix: contact form submit verbage
This commit is contained in:
parent
5214290a72
commit
fdbcce0dcd
@ -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."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -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
|
Loading…
x
Reference in New Issue
Block a user