Form.tsx 4.2 KB
Newer Older
Valerius's avatar
Valerius committed
1
import React, { FC, useEffect } from 'react';
Valerius's avatar
Valerius committed
2
import { Box, Button, Stack, Radio } from "@chakra-ui/react";
Valerius's avatar
Valerius committed
3
import { useRouter } from 'next/router';
Valerius's avatar
Valerius committed
4
import { Formik } from 'formik';
Valerius's avatar
Valerius committed
5
6
import { CheckboxControl, CheckboxContainer, RadioGroupControl } from "formik-chakra-ui";
import * as Yup from 'yup'
Valerius's avatar
Valerius committed
7
import { useTranslation } from 'react-i18next';
Valerius Mattfeld's avatar
Valerius Mattfeld committed
8
import { config } from 'config';
Valerius's avatar
Valerius committed
9
10
11
12
13

const validateSchema = Yup.object({
	sensitivity: Yup.string().required(),
	targetDemographic: Yup.array().min(1),
});
Valerius's avatar
Valerius committed
14
15
16
interface FormProps {
	pageNumber: number;
	uid: string;
Valerius's avatar
Valerius committed
17
	imageID: number;
Valerius's avatar
Valerius committed
18
19
}

20
const Form: FC<FormProps> = ({ pageNumber, uid, imageID }) => {
Valerius's avatar
Valerius committed
21
22
	const nextPage = `/${uid}/${pageNumber + 1}`
	const router = useRouter()
Valerius's avatar
Valerius committed
23
	const { t } = useTranslation()
Valerius's avatar
Valerius committed
24

Valerius's avatar
Valerius committed
25
	// prefetching the next page
Valerius's avatar
Valerius committed
26
27
	useEffect(() => {
		const { number } = router.query
Valerius's avatar
Valerius committed
28
29
30
		let pNo = parseInt(number as string)
		if (pNo > 100) {
			// redirect to done after 100 submits
Valerius's avatar
Valerius committed
31
32
33
34
35
36
37
			router.push('/done')
			return
		}
		router.prefetch(nextPage);
	}, [nextPage, router])

	return (
Valerius's avatar
Valerius committed
38
39
40
		<Formik
			initialValues={{
				sensitivity: "",
Valerius's avatar
Valerius committed
41
				targetDemographic: [''],
Valerius's avatar
Valerius committed
42
43
44
			}}

			onSubmit={(values, { resetForm }) => {
Valerius's avatar
Valerius committed
45
46
				const myHeaders = new Headers();
				myHeaders.append("Content-Type", "application/json");
Valerius Mattfeld's avatar
bug fix    
Valerius Mattfeld committed
47
				let tms = values.targetDemographic.filter(x => x !== '')
48

49
				let tdv = {
Valerius Mattfeld's avatar
bug fix    
Valerius Mattfeld committed
50
51
52
53
54
55
					acquaintance: tms.includes("Aquaintance"),
					colleagues: tms.includes("Colleagues"),
					family: tms.includes("Family"),
					friends: tms.includes("Friends"),
					everybody: tms.includes("Everybody"),
					nobody: tms.includes("Nobody"),
56
57
				}

58
				let payload = {
59
					sensitivity: values.sensitivity,
60
					id: imageID,
61
					uid: uid,
Valerius Mattfeld's avatar
Valerius Mattfeld committed
62
					...tdv
63
64
65
66
				}

				const raw = JSON.stringify(payload)

Valerius's avatar
Valerius committed
67
68
69
70
71
72
73
				const requestOptions: any = {
					method: 'POST',
					headers: myHeaders,
					body: raw,
					redirect: 'follow'
				};

74
				fetch(`${config.API_URL}/submit`, requestOptions)
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
					.then(response => {
						if (response.status === 400) {
							throw new Error(t('verficationError'));
						}
						response.text()
					})
					.then(() => {
						resetForm()
						router.push(nextPage)
					})
					.catch(error => {
						console.error('error', error, values)
						alert(error)
						resetForm()
					});
Valerius's avatar
Valerius committed
90
91
92
			}}
			validationSchema={validateSchema}
		>
93
			{({ handleSubmit, handleReset, isSubmitting, values }) => (
Valerius's avatar
Valerius committed
94
95
96
97
				<Box
					as="form"
					px={5}
					onSubmit={handleSubmit as any}
Valerius's avatar
Valerius committed
98
				>
Valerius's avatar
Valerius committed
99
					<RadioGroupControl mt={4} name="sensitivity" label={t('questionOne')}>
Valerius's avatar
Valerius committed
100
						<Stack spacing="1">
Valerius's avatar
Valerius committed
101
102
103
							<Radio value="1">{t('a11')}</Radio>
							<Radio value="2">{t('a12')}</Radio>
							<Radio value="3">{t('a13')}</Radio>
Valerius Mattfeld's avatar
Valerius Mattfeld committed
104
105
106
							<Radio value="4">{t('a14')}</Radio>
							<Radio value="5">{t('a15')}</Radio>
							<Radio value="6">{t('a16')}</Radio>
Valerius's avatar
Valerius committed
107
108
						</Stack>
					</RadioGroupControl>
Valerius's avatar
Valerius committed
109
					<CheckboxContainer mt={4} name="targetDemographic" label={t('questionTwo')}>
Valerius's avatar
Valerius committed
110
						<Stack spacing="1">
111
112
113
114
							<CheckboxControl isDisabled={values.targetDemographic.indexOf('Nobody') !== -1} name="targetDemographic" value="Friends">{t('a21')}</CheckboxControl>
							<CheckboxControl isDisabled={values.targetDemographic.indexOf('Nobody') !== -1} name="targetDemographic" value="Aquaintance">{t('a24')}</CheckboxControl>
							<CheckboxControl isDisabled={values.targetDemographic.indexOf('Nobody') !== -1} name="targetDemographic" value="Colleagues">{t('a23')}</CheckboxControl>
							<CheckboxControl isDisabled={values.targetDemographic.indexOf('Nobody') !== -1} name="targetDemographic" value="Family">{t('a22')}</CheckboxControl>
Valerius's avatar
Valerius committed
115
							<hr />
116
							<CheckboxControl isDisabled={values.targetDemographic.indexOf('Nobody') !== -1} name="targetDemographic" value="Everybody">{t('a26')}</CheckboxControl>
Valerius's avatar
Valerius committed
117
118
							<hr />
							<CheckboxControl name="targetDemographic" value="Nobody">{t('a25')}</CheckboxControl>
Valerius's avatar
Valerius committed
119
120
121
122
123
124
125
126
127
128
129
130
						</Stack>
					</CheckboxContainer>
					<Stack my={5} spacing={20} direction="row">
						<Button
							size="md"
							rounded="full"
							color="white"
							bg="red.400"
							_hover={{ bg: 'red.300' }}
							type="submit"
							isLoading={isSubmitting}
						>
Valerius's avatar
Valerius committed
131
							{t('submit')}
Valerius's avatar
Valerius committed
132
133
134
135
136
137
						</Button>
						<Button onClick={handleReset}>Reset</Button>
					</Stack>
				</Box>
			)}
		</Formik>
Valerius's avatar
Valerius committed
138
139
140
141
	);
}

export default Form