реквест на бэк create

package.json

@@ -20,6 +20,7 @@
     "framer-motion": "^6.3.3",
     "moment": "^2.29.3",
     "notistack": "^2.0.5",
+    "puppeteer": "^14.2.1",
     "react": "^18.1.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.1.0",
@@ -56,7 +57,13 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
     "@types/react-datepicker": "^4.4.1",
-    "@types/react-time-picker": "^4.0.2"
+    "@types/react-time-picker": "^4.0.2",
+    "babel-jest": "^28.1.0",
+    "jest": "^28.1.0",
+    "jest-puppeteer": "^6.1.0",
+    "react-test-renderer": "^18.1.0"
   }
 }

src/create.tsx

@@ -1,15 +1,38 @@
 import React from 'react';
 import moment from 'moment';
-import {Input, Select, Stack, Checkbox, Box, Text, Divider, Button} from '@chakra-ui/react'
+import {
+    Input, Select, Stack, Checkbox, Box, Text, Divider, Button,  NumberInput,
+    NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper,} from '@chakra-ui/react'
 import { Formik, Field, Form } from 'formik';
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import TimePicker from 'react-time-picker';
+import {create} from "./API/quiz";
+
+interface a {
+    name?: string,
+    description?: string,
+    config?: string,
+    status?: string,
+    fingerprinting?: boolean,
+    repeatable?: boolean,
+    note_prevented?: boolean,
+    mail_notifications?: boolean,
+    unique_answers?: boolean,
+    pausable?: boolean,
+    time_of_passing?: number,
+    due_to?: number,
+    limit?: number,
+    question_cnt?: number
+}
 
 const statusValues: any = ['draft', 'template', 'stop', 'start']
 
 export default () => {
 
+    const [isSaved, setSaved] = React.useState(false)
+    const [isSend, setSend] = React.useState(false)
+
     const Options = React.useMemo(() => () => (
         statusValues.map((e:string,i:number)=> {
             return <option key={i} value={e}>{e}</option>
@@ -26,17 +49,53 @@ export default () => {
                     description: "",
                     config: "",
                     status: "draft",
-                    save: true,
+                    fingerprinting: false,
-                    resquiz: true,
+                    repeatable: false,
-                    incomplete: true,
+                    note_prevented: false,
-                    notification: true,
+                    mail_notifications: false,
-                    unique: true,
+                    unique_answers: false,
-                    time: "",
+                    time_of_passing: "",
-                    pause: false,
+                    pausable: false,
-                    date: null
+                    due_to: null,
+                    limit: 0
                 }}
                 onSubmit={(values) => {
-                    console.log(values)
+                    setSend(true)
+                    let inputBody:a = {
+                        "status": values.status,
+                        "question_cnt": 0,
+
+                    };
+                    if (values.name.length !== 0) {inputBody.name = values.name}
+                    if (values.description.length !== 0) {inputBody.description = values.description}
+                    if (values.due_to !== null) {inputBody.due_to = Number(moment(values.due_to).format("x"))}
+                    if (values.due_to !== null) {console.log(moment(values.due_to).format("x"))}
+                    if (values.time_of_passing.length !== 0) {inputBody.time_of_passing = moment.duration(values.time_of_passing).asSeconds()}
+                    if (values.time_of_passing.length !== 0) {console.log(moment.duration(values.time_of_passing).asSeconds())}
+                    if (values.limit !== 0) {inputBody.limit = values.limit}
+
+                    if (values.fingerprinting) {inputBody.fingerprinting = true}
+                    if (values.repeatable) {inputBody.repeatable = true}
+                    if (values.note_prevented) {inputBody.note_prevented = true}
+                    if (values.mail_notifications) {inputBody.mail_notifications = true}
+                    if (values.unique_answers) {inputBody.unique_answers = true}
+                    if (values.pausable) {inputBody.pausable = true}
+
+                    console.log(inputBody)
+
+                    create.request({body: inputBody})
+                        .then((e: any) => {
+                            console.log(e)
+                            console.log(e.message)
+                            setSaved(true)
+                            setSend(false)
+                        })
+                        .catch((e: any) => {
+                            console.log(e)
+                            console.log(e.message)
+                            setSaved(false)
+                            setSend(false)
+                        })
                 }}
             >
                 {({ values, setFieldValue }) => {
@@ -59,22 +118,34 @@ export default () => {
                                        <Options/>
                                     }
                                 </Field>
+                                <Text>Количество перепрохождений</Text>
+                                <Field
+                                    as={NumberInput}
+                                    name="limit"
+                                >
+                                    <NumberInputField />
+                                    <NumberInputStepper>
+                                        <NumberIncrementStepper />
+                                        <NumberDecrementStepper />
+                                    </NumberInputStepper>
+                                </Field>
+
                             </Stack>
                             <Stack padding="20px">
                                 <Text>Сохранить устройство</Text>
-                                <Field as={Checkbox} name="save" isChecked={values.save}/>
+                                <Field as={Checkbox} name="fingerprinting" isChecked={values.fingerprinting}/>
                                 <Divider/>
                                 <Text>Разрешить пользователям перепроходить опрос</Text>
-                                <Field as={Checkbox} name="resquiz" isChecked={values.resquiz}/>
+                                <Field as={Checkbox} name="repeatable" isChecked={values.repeatable}/>
                                 <Divider/>
                                 <Text>Сохранять статистику неполных прохождений</Text>
-                                <Field as={Checkbox} name="incomplete" isChecked={values.incomplete}/>
+                                <Field as={Checkbox} name="note_prevented" isChecked={values.note_prevented}/>
                                 <Divider/>
                                 <Text>Уведомлять по почте при каждом прохождении опроса</Text>
-                                <Field as={Checkbox} name="notification" isChecked={values.notification}/>
+                                <Field as={Checkbox} name="mail_notifications" isChecked={values.mail_notifications}/>
                                 <Divider/>
                                 <Text>Сохранять статистику только для уникального прохождения опроса</Text>
-                                <Field as={Checkbox} name="unique" isChecked={values.unique}/>
+                                <Field as={Checkbox} name="unique_answers" isChecked={values.unique_answers}/>
                                 <Divider/>
                             </Stack>
                             <Stack
@@ -84,7 +155,7 @@ export default () => {
                                 <Text>Время прохождения опроса</Text>
                                 <Field
                                     as={TimePicker}
-                                    name="time"
+                                    name="time_of_passing"
                                     format="HH : mm"
                                     disableClock={true}
                                     amPmAriaLabel={"am"}
@@ -93,26 +164,33 @@ export default () => {
                                             setFieldValue("time", e)
                                         } else {
                                             //При стирании значения пользователем затирается и последнее значение
-                                            setFieldValue("time", "")
+                                            setFieldValue("time_of_passing", "")
                                         }
                                     }}
-                                    value={values.time}
+                                    value={values.time_of_passing}
                                 />
                                 <Text>Разрешить ставить на паузу</Text>
-                                <Field as={Checkbox} name="pause" isDisabled={values.time.length === 0 ? true : false}/>
+                                <Field as={Checkbox} name="pausable" isDisabled={values.time_of_passing.length === 0 ? true : false}/>
                                 <Text>Дата проведения опроса</Text>
                                 <Field
                                     as={DatePicker}
-                                    name="date"
+                                    name="due_to"
-                                    selected={values.date}
+                                    selected={values.due_to}
                                     dateFormat="MM/dd/yyyy"
                                     onChange={(e:any) => {
-                                        setFieldValue("date", e)
+                                        setFieldValue("due_to", e)
                                     }}
                                     minDate={new Date()}
                                 />
                             </Stack>
-                            <Button type="submit">Сохранить</Button>
+                            <Button
+                                type="submit"
+                                isLoading={isSend}
+                                isDisabled={isSaved}
+                                loadingText='запрос в процессе обработки'
+                            >
+                                {isSaved ? "Сохранено" : "Сохранить"}
+                            </Button>
                         </Form>
                     )
                 }}

src/tests/.env.development

@@ -1 +0,0 @@
-URL = "localhost:1488"