-
Notifications
You must be signed in to change notification settings - Fork 0
/
ContactMeSection.js
122 lines (117 loc) · 4.05 KB
/
ContactMeSection.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React, {useEffect} from "react";
import { useFormik } from "formik";
import {
Box,
Button,
FormControl,
FormErrorMessage,
FormLabel,
Heading,
Input,
Select,
Textarea,
VStack,
} from "@chakra-ui/react";
import * as Yup from 'yup';
import FullScreenSection from "./FullScreenSection";
import useSubmit from "../hooks/useSubmit";
import {useAlertContext} from "../context/alertContext";
const LandingSection = () => {
const {isLoading, response, submit} = useSubmit();
const { onOpen } = useAlertContext();
useEffect(() => {
if (response !== null && response.type === "success") {
onOpen(response.type, response.message)
formik.resetForm()
}
else if (response !== null && response.type === "error") {
onOpen(response.type, response.message)
}
}, [response])
const formik = useFormik({
initialValues: {
firstName: "",
email: "",
type: "hireMe",
comment: "",
},
onSubmit: (values) => {
submit("", values)
},
validationSchema: Yup.object({
firstName: Yup.string().required("Required"),
email: Yup.string().email("Invalid email address").required("Required"),
type: Yup.string().required("Required"),
comment: Yup.string().min(25, "Must be at least 25 characters").required("Required"),
}),
});
return (
<FullScreenSection
isDarkBackground
backgroundColor="#512DA8"
py={16}
spacing={8}
>
<VStack w="1024px" p={32} alignItems="flex-start">
<Heading as="h1" id="contactme-section">
Contact me
</Heading>
<Box p={6} rounded="md" w="100%">
<form onSubmit={(e) => {
e.preventDefault()
formik.handleSubmit(e)
}}>
<VStack spacing={4}>
<FormControl isInvalid={formik.touched.firstName && formik.errors.firstName !== undefined}>
<FormLabel htmlFor="firstName">Name</FormLabel>
<Input
id="firstName"
name="firstName"
value={formik.values.firstName}
{...formik.getFieldProps("firstName")}
/>
<FormErrorMessage>{formik.errors.firstName}</FormErrorMessage>
</FormControl>
<FormControl isInvalid={formik.touched.email && formik.errors.email !== undefined}>
<FormLabel htmlFor="email">Email Address</FormLabel>
<Input
id="email"
name="email"
type="email"
value={formik.values.email}
{...formik.getFieldProps("email")}
/>
<FormErrorMessage>{formik.errors.email}</FormErrorMessage>
</FormControl>
<FormControl>
<FormLabel htmlFor="type">Type of enquiry</FormLabel>
<Select id="type" name="type" value={formik.values.type} {...formik.getFieldProps("type")}>
<option value="hireMe">Freelance project proposal</option>
<option value="openSource">
Open source consultancy session
</option>
<option value="other">Other</option>
</Select>
</FormControl>
<FormControl isInvalid={formik.touched.comment && formik.errors.comment !== undefined}>
<FormLabel htmlFor="comment">Your message</FormLabel>
<Textarea
id="comment"
name="comment"
height={250}
value={formik.values.comment}
{...formik.getFieldProps("comment")}
/>
<FormErrorMessage>{formik.errors.comment}</FormErrorMessage>
</FormControl>
<Button isLoading={isLoading} loadingText="Submitting" type="submit" colorScheme="purple" width="full">
Submit
</Button>
</VStack>
</form>
</Box>
</VStack>
</FullScreenSection>
);
};
export default LandingSection;