96 lines
2.2 KiB
JavaScript
96 lines
2.2 KiB
JavaScript
import {
|
|
Form,
|
|
TextField,
|
|
TextAreaField,
|
|
Submit,
|
|
FieldError,
|
|
Label,
|
|
FormError,
|
|
} from '@redwoodjs/forms'
|
|
import { Flash,useFlash,useMutation } from '@redwoodjs/web'
|
|
import { useForm } from 'react-hook-form'
|
|
import BlogLayout from 'src/layouts/BlogLayout'
|
|
|
|
const CREATE_CONTACT = gql`
|
|
mutation CreateContactMutation($input: CreateContactInput!) {
|
|
createContact(input: $input) {
|
|
id
|
|
}
|
|
}
|
|
`
|
|
|
|
const ContactPage = () => {
|
|
const formMethods = useForm()
|
|
const { addMessage } = useFlash()
|
|
|
|
const [create,{ loading,error }] = useMutation(CREATE_CONTACT,{
|
|
onCompleted: () => {
|
|
addMessage('Thank you for your submission!',{
|
|
style: { backgroundColor: 'green',color: 'white',padding: '1rem' },
|
|
})
|
|
formMethods.reset()
|
|
},
|
|
})
|
|
|
|
const onSubmit = (data) => {
|
|
create({ variables: { input: data } })
|
|
console.log(data)
|
|
}
|
|
|
|
return (
|
|
<BlogLayout>
|
|
<Flash timeout={1000} />
|
|
<Form
|
|
onSubmit={onSubmit}
|
|
validation={{ mode: 'onBlur' }}
|
|
error={error}
|
|
formMethods={formMethods}
|
|
>
|
|
<FormError
|
|
error={error}
|
|
wrapperStyle={{ color: 'red',backgroundColor: 'lavenderblush' }}
|
|
/>
|
|
<Label name="name" errorClassName="error">
|
|
Name
|
|
</Label>
|
|
<TextField
|
|
name="name"
|
|
validation={{ required: true }}
|
|
errorClassName="error"
|
|
/>
|
|
<FieldError name="name" className="error" />
|
|
|
|
<Label name="name" errorClassName="error">
|
|
Email
|
|
</Label>
|
|
<TextField
|
|
name="email"
|
|
validation={{
|
|
required: true,
|
|
pattern: {
|
|
value: /[^@]+@[^.]+\..+/,
|
|
message: 'Please enter a valid email address',
|
|
},
|
|
}}
|
|
errorClassName="error"
|
|
/>
|
|
<FieldError name="email" className="error" />
|
|
|
|
<Label name="name" errorClassName="error">
|
|
Message
|
|
</Label>
|
|
<TextAreaField
|
|
name="message"
|
|
validation={{ required: true }}
|
|
errorClassName="error"
|
|
/>
|
|
<FieldError name="message" className="error" />
|
|
|
|
<Submit disabled={loading}>Save</Submit>
|
|
</Form>
|
|
</BlogLayout>
|
|
)
|
|
}
|
|
|
|
export default ContactPage
|