Untitled

import React, {useState} from 'react';

import clsx from 'clsx';

import { makeStyles } from '@material-ui/core/styles';

import TextField from '@material-ui/core/TextField';

import FormControlLabel from '@material-ui/core/FormControlLabel';

import FormControl from '@material-ui/core/FormControl';

import Radio from '@material-ui/core/Radio';

import RadioGroup from '@material-ui/core/RadioGroup';

import "./NewCaseForm.css"

import Button from '@material-ui/core/Button';

import Snackbar from '@material-ui/core/Snackbar';

import Slide from '@material-ui/core/Slide';

import {animated, useSpring} from "react-spring";

import Alert from '@material-ui/lab/Alert';

​

​

const useStyles = makeStyles((theme) => ({

    root: {

        display: 'flex',

        flexWrap: 'wrap',

        borderRadius:0,

    },

    icon: {

        width: 24,

        height: 24,

        backgroundColor: '#00000029',

    },

    checkedIcon: {

        backgroundColor: '#9b97a28f',

        backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',

    },

    container: {

        display: 'flex',

        flexWrap: 'wrap',

        color: "white"

    },

    textField: {

        marginLeft: theme.spacing(1),

        marginRight: theme.spacing(1),

        width: 150,

        color: "white"

    },

})) ;

​

​

function StyledRadio(props) {

    const classes = useStyles();

    return (

        <Radio

            className={classes.root}

            disableRipple

            color="default"

            checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}

            icon={<span className={classes.icon} />}

            {...props}

        />

    );

}

​

export default function Form(props) {

    const [open, setOpen] = React.useState(false);

    const [transition, setTransition] = React.useState(undefined);

​

    const [age, setAge] = useState('');

    const [gender, setGender] = useState('Male');

    const [status, setStatus] = useState('Confirmed');

    const [Arrival, setArrival] = useState('');

    const [Depart, setDepart] = useState('');

    const [transport, setTransport] = useState('Plane');

    const [source, setSource] = useState('');

    const [announced_date, setAnnounced_date] = React.useState('');

    const classes = useStyles();

    const propsAnim = useSpring({opacity: 1, from: {opacity: 0}});

    console.log(announced_date)

​

    const handleClick = (Transition) => () => {

        setTransition(() => Transition);

        setOpen(true);

    };

​

    const handleClose = () => {

        setOpen(false);

    };

​

    function TransitionUp(props) {

        return <Slide {...props} direction="up" />;

    }

​

    async  function sendForm() {

        try {

​

            const response = await fetch("https://api.codataset.com/new", {

                method: 'POST',

                body: JSON.stringify(data),

                headers: {

                    'Content-Type': 'application/json'

                }

            });

            const json = await response.json();

            console.log('Успех:', JSON.stringify(json));

            handleClick();

            TransitionUp();

​

        } catch (error) {

            handleClick();

            TransitionUp();

            console.error('Где-то ошибка:', error );

        }

    }

​

    const data = {

        'age': age,

        'gender': gender,

        'status':status,

        'arrival': Arrival,

        'depart': Depart,

        'transport': transport,

        'announced_date':announced_date,

        'source':source

    };

​

​

    return (

​

        <div className="formContainer">

​

            <div>

               {/* <Button onClick={handleClick(TransitionUp)}>Up</Button>*/}

                <Snackbar autoHideDuration={5000}

                    open={open}

                    onClose={handleClose}

                    TransitionComponent={transition}

                    message="I love snacks"

                />

            </div>

​

            <div className="form">

                <div>

                    <animated.div className="formTitle" style={propsAnim}>

                        <h1>Reporting</h1>

                    </animated.div>

                    <animated.div className="About" style={propsAnim}>

                        <h3>About</h3>

                         <TextField  onChange={(e) => setAge(e.target.value)}

                                   value={props.age}

                                   label="Age"

                                   id="margin-normal"

                                   defaultValue=""

                                   className={classes.textField}

                                   margin="normal"

                                   variant="filled"

                                   InputLabelProps={{

                                       style: {

                                           color: 'rgba(242, 242, 242, 0.25)'

                                       } }}

                        />

                    </animated.div>

                    <animated.div className="genderAnim" style={propsAnim}>

                        <FormControl className="setGenderContainer" component="fieldset">

                            <RadioGroup className="setGenderBox" value={gender} defaultValue="male" onChange={(e) => setGender(e.target.value)} aria-label="gender"

                                        name="customized-radios">

                                <FormControlLabel style={{marginRight:50}} name="Male"   value="Male" control={<StyledRadio/>} label="Male"/>

                                <FormControlLabel style={{marginRight:50}} name="Female"   value="Female" control={<StyledRadio/>} label="Female"/>

                            </RadioGroup>

                        </FormControl>

                    </animated.div>

                    <animated.div className="statusAnim" style={propsAnim}>

                        <h3>Status</h3>

                        <FormControl className="setGenderContainer" component="fieldset">

                            <RadioGroup className="setGenderBox" value={status} defaultValue="Confirmed" aria-label="Status" onChange={(e) => setStatus(e.target.value)}

                                        name="customized-radios">

                                <FormControlLabel style={{marginRight:50}} name="Confirmed" value="Confirmed" control={<StyledRadio/>} label="Confirmed"/>

                                <FormControlLabel style={{marginRight:50}} name="Recovered" value="Recovered" control={<StyledRadio/>} label="Recovered"/>

                                <FormControlLabel style={{marginRight:50}} name="Hospitalized" value="Hospitalized" control={<StyledRadio/>} label="Hospitalized"/>

                                <FormControlLabel style={{marginRight:50}} name="Deceased" value="Deceased" control={<StyledRadio/>} label="Deceased"/>

                            </RadioGroup>

                        </FormControl>

                    </animated.div>

        <div className="date_source_places">

            <animated.div className="date_source" style={propsAnim}>

                        <TextField onChange={(e) => setAnnounced_date(e.target.value)}

                            value={announced_date}

                            id="date"

                            label="Announced Date"

                            type="date"

                            defaultValue="01.01.2020"

                            className="datePicker"

                            format="dd/MM/yyyy"

                            InputLabelProps={{

                                style: {

                                    color: 'white'

                                },

                                shrink: true,

                            }}

                        />

                    <TextField onChange={(e) => setSource(e.target.value)}

                               value={source}

                               label="Source"

                               id="margin-none"

                               className="source"

                               variant="filled"

                               style={{width:'100%'}}

                               InputLabelProps={{

                                   style: {

                                       color: 'rgba(242, 242, 242, 0.25)'

                                   }

                               }}

                    />

            </animated.div>

                    <div className="placesWithTransport">

                        <div className="movementPlaces">

                            <animated.div style={propsAnim} className="depPlace">

                                <TextField onChange={(e) => setDepart(e.target.value)}

                                    value={Depart}

                                    label="Departure  Country, Region, City"

                                    id="margin-none"

                                    className="movementInputs"

                                    variant="filled"

                                    style={{width:'100%'}}

                                    InputLabelProps={{

                                        style: {

                                            color: 'rgba(242, 242, 242, 0.25)'

                                        }

                                    }}

                                />

                            </animated.div>

                            <animated.div style={propsAnim} className="arrPlace">

                                <TextField onChange={(e) => setArrival(e.target.value)}

                                    value={Arrival}

                                    style={{width:'100%'}}

                                    label="Arrival Country, Region, City"

                                    id="margin-none"

                                    className="movementInputs"

                                    variant="filled"

                                    InputLabelProps={{

                                        style: {

                                            color: 'rgba(242, 242, 242, 0.25)'

                                        }

                                    }}

                                />

                            </animated.div>

                        </div>

                        <animated.div style={propsAnim} className="transportAnim">

                            <RadioGroup className="transport" defaultValue="Plane" value={transport} aria-label="transport"  onChange={(e) => setTransport(e.target.value)}

                                        name="customized-radios">

                                <FormControlLabel style={{marginRight:50}} name="Plane" value="Plane" control={<StyledRadio/>} label="Plane"/>

                                <FormControlLabel style={{marginRight:50}} name="Ship" value="Ship" control={<StyledRadio/>} label="Ship"/>

                                <FormControlLabel style={{marginRight: 50}} name="Train" value="Train" control={<StyledRadio/>} label="Train"/>

                                <FormControlLabel style={{marginRight: 50}} name="Car" value="Car" control={<StyledRadio/>} label="Car"/>

                            </RadioGroup>

                        </animated.div>

                    </div>

                </div>

                </div>

                <animated.div style={propsAnim} className="submitBtnContainer">

                    <div className="submitBtn" onClick={sendForm}>Confirm</div>

                </animated.div>

            </div>

        </div>

    );

}