{"size": 4038, "ext": "js", "max_stars_repo_path": "cloud-school-bw/src/components/VolunteerForm.js", "max_stars_repo_name": "School-in-the-cloud-BuildWeek/Build", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "cloud-school-bw/src/components/VolunteerForm.js", "max_issues_repo_name": "School-in-the-cloud-BuildWeek/Build", "max_issues_repo_issues_event_min_datetime": "2020-11-19T19:35:03.000Z", "max_issues_repo_issues_event_max_datetime": "2021-01-04T18:06:42.000Z", "max_forks_repo_path": "cloud-school-bw/src/components/VolunteerForm.js", "max_forks_repo_name": "School-in-the-cloud-BuildWeek/Build", "max_forks_repo_forks_event_min_datetime": "2021-04-21T20:53:12.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-21T20:53:12.000Z"}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": 1, "avg_line_length": 24.4727272727, "max_line_length": 92, "alphanum_fraction": 0.5029717682}
import React from 'react'
import {useForm} from 'react-hook-form'
import styled from 'styled-components';
import * as yup from "yup";
import { yupResolver } from '@hookform/resolvers/yup';

//Styling

const StyledForm = styled.form`
    display:flex;
    flex-direction:column;
    width:80%;
    font-size:0.6rem;
    height:50vh;
    justify-content:space-between;
    /* background-color: white;
        display:flex;
        flex-direction:column;
        align-items:center;
        position: absolute;
        width: 350px;
        height: 400px;
        border-radius: 10px;
        box-shadow: 0px 30px 60px -40px rgba(31, 38, 23, 0.5);
        justify-content:space-between;
        padding-top: 1%;
        padding-bottom:1%; */
`

const FormDiv = styled.div`
    display:flex;
    justify-content:center;
    width:30%;
    height:55vh;
    align-items:center;
    background: white;
    border-radius:10px;
    margin-top:10%;
    
    `

const Input = styled.input`
    height: 5vh;
    background: #F4F6F7;
    border:none;
    color: #082E5B;
    padding-left:3%;
    
`

const Header = styled.h2`
    font-size:1rem;
    text-align:center;
    margin-bottom:5%;
`

const FormContainer = styled.div`
    display:flex;
    justify-content:center;
   
    
`

const Button = styled.button`
    height: 5vh;
    border:none;
    border-radius:17px;
    background: #2A6DE1;
    color:white;
`

const Page = styled.div`
    background-color: #E5E5E5;
    height:100vh;
    font-family: 'Lato', sans-serif;
` 

const Errors = styled.span`
color:red;
font-size:0.5rem;
text-align:left;
width:75%;
`
//Styling


const schema = yup.object().shape({
    name: yup.string().required(),
    email: yup.string().required(),
    availability: yup.string().required(),
    subjects: yup.string().required(),
});

const VolunteerForm = () => {

    const {register, handleSubmit, setValue, errors} = useForm({
        resolver: yupResolver(schema)
      });

   const onSubmit = (user) => {
       console.log(user)
        setValue("name", "");
        setValue("email", "");
        setValue("availability", "");
        setValue("subjects", "")
   }

    return (
        <Page>
            <FormContainer>
        <FormDiv>
        <StyledForm onSubmit = {handleSubmit(onSubmit)}>
        <Header>Volunteer Availability</Header>
                    <Input 
                    type="text"
                    name="name"
                    placeholder = 'Name'
                    ref={register({
                        required: 'Name is required'
                    })}
                    />
                    {errors.name && <Errors>Please enter your name</Errors>}

                
                    <Input 
                    type="email"
                    name="email"
                    placeholder = 'Email'
                    ref={register({
                        required: 'Password is required'
                    })}
                    />
                    {errors.email && <Errors>Please enter your email</Errors>}

                    <Input 
                    type="text"
                    name="availability"
                    placeholder = 'Schedule - Ex: Mon 9am-10am, Tues 1pm-2pm, ...'
                    ref={register({
                        required: 'Password is required'
                    })}
                    />

                    {errors.availability && <Errors>Please enter your availability</Errors>}

                    <Input 
                    type="text"
                    name="subjects"
                    placeholder = 'Subjects'
                    ref={register({
                        required: 'Subjects is required'
                    })}
                    />
                    {errors.subjects && <Errors>Please enter your subjects</Errors>}

                    <Button type="submit">Schedule</Button>
                    </StyledForm>
                </FormDiv>
        </FormContainer>
        </Page>
    )
}

export default VolunteerForm
