feat(landing): contact form #1636
Conversation
purusott
commented
Sep 5, 2024
•
purusott
commented
tavla/app/components/ContactForm.tsx
Outdated
| } else { | ||
| formRef.current?.reset() | ||
| setIsOpen(false) | ||
| addToast('Takk for din tilbakemelding!') |
There was a problem hiding this comment.
Burde denne heller bli kalt når submit trykkes på?
const submit = async (data: FormData) => {
action(data)
setIsOpen(false)
addToast('Tavle slettet!')
}
tavla/app/components/ContactForm.tsx
Outdated
| import { Expandable } from './Expandable' | ||
|
|
||
| export function ContactForm() { | ||
| const formRef = useRef<HTMLFormElement>(null) |
There was a problem hiding this comment.
Jeg antar vi setter en ref fordi vi vil klare å nullstille formen, men i følge react kan vi heller gjøre det via en key: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
There was a problem hiding this comment.
fjernet ref, prøvde med key men fant ikke noen lur måte å oppdatere verdien på fra parent. Skal funke nå med usestate pga formerror, men lmk om det er en bedre måte 👍
purusott
force-pushed
the
contact-form
branch
from
265f6d6
to
4660f7c
Compare
|
Er den litt bred? På min skjerm overskygger den litt tavlekarusellen. Blir mer en designting da. |
| } | ||
| case 'form/reset': { | ||
| return | ||
| } |
There was a problem hiding this comment.
Synes det virker litt rart å legge til en error-handling for å resette en form. Vi burde finne en annen løsning. Jeg tittet litt rundt, kanskje vi kan legge til et ekstra felt som heter "success"? Litt som de gjør her: https://react.dev/reference/react/useActionState#display-information-after-submitting-a-form
Vi kan sette oss ned å gjøre denne sammen tenker jeg:)
| if (isEmptyOrSpaces(message)) | ||
| return setFormError( | ||
| getFormFeedbackForError('contact/message-missing'), | ||
| ) |
There was a problem hiding this comment.
Kan man flytte all denne valideringen til server-siden?
const validEmail = new RegExp(/^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/g)
if (!validEmail.test(email))
return getFormFeedbackForError('auth/missing-email')
if (isEmptyOrSpaces(message))
return getFormFeedbackForError('contact/message-missing')
Da tror jeg kanskje vi kan eliminere setFormError helt
There was a problem hiding this comment.
Det skjer i server også, så kan i prinsippet fjerne det helt. Tenkte bare det blir dårlig UX å validere bare i server (selv om det er viktigere der) mtp nettverkskall og latency.
Et alternativ er å bruke html sin innebygde validering. Da blir feilmeldingene på engelsk med mindre vi overstyrer med userefs
Men hvis vi kun ønsker server validering kan jeg fjerne usestate greiene :)
