{"size": 2897, "ext": "js", "max_stars_repo_path": "src/pages/Registration/index.js", "max_stars_repo_name": "Ruslan5891/project", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/Registration/index.js", "max_issues_repo_name": "Ruslan5891/project", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/Registration/index.js", "max_forks_repo_name": "Ruslan5891/project", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 38.6266666667, "max_line_length": 104, "alphanum_fraction": 0.3948912668}
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { addProfile } from "../../reducers/statusSlice";
import { v4 as uuidv4 } from "uuid";
import { Button, Input, Title, Form, InputWrapper, FormWrapper, Error } from "./styled";

export const Registration = () => {
    const navigate = useNavigate();

    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm();
    const dispatch = useDispatch();
    
    const onSubmit = (data) => {
        let newUser = { ...data, id: uuidv4() };
        dispatch(addProfile(newUser));
        navigate("/");
    };

    return (
        <>
            <FormWrapper>
                <Form onSubmit={handleSubmit(onSubmit)}>
                    <Title>Registration</Title>
                    <InputWrapper>
                        <Input
                            type="text"
                            name="firstName"
                            placeholder="Name"
                            {...register("firstName", { pattern: /^[a-zA-Z]{3,}$/, required: true })}
                        />
                        {errors.firstName && <Error>Введите коректное имя пользователя</Error>}
                    </InputWrapper>
                    <InputWrapper>
                        <Input
                            type="text"
                            placeholder="Surname"
                            name="surname"
                            {...register("surName", { pattern: /^[a-zA-Z]{3,}$/, required: true })}
                        />
                        {errors.surName && <Error>Введите коректную фамилию</Error>}
                    </InputWrapper>
                    <InputWrapper>
                        <Input
                            type="email"
                            placeholder="Email"
                            name="email"
                            {...register("email", {
                                pattern: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
                                required: true,
                            })}
                        />
                        {errors.email && <Error>Введите коректный email</Error>}
                    </InputWrapper>
                    <InputWrapper>
                        <Input
                            type="password"
                            placeholder="Password"
                            name="password"
                            {...register("password", { pattern: /^[a-z0-9_-]{6,18}$/, required: true })}
                        />
                        {errors.password && <Error>Не надежный пароль </Error>}
                    </InputWrapper>

                    <Button type="submit">Sign Up</Button>
                </Form>
            </FormWrapper>
        </>
    );
};
