import { Field, Formik } from 'formik' import * as PropTypes from 'prop-types' import * as React from 'react' import { Button } from '../../App/App.components/Button/Button.controller' import { Input } from '../../App/App.components/Input/Input.controller' import { FormInputField } from './SignInProject.components/FormInputField/FormInputField.controller' import { SignInProjectCard } from './SignInProject.style' import { signInProjectValidator } from './SignInProject.validator' type NewPostViewProps = { handleSubmitForm: (values: any) => void } export const SignInProjectView = ({ handleSubmitForm }: NewPostViewProps) => ( <SignInProjectCard> <h1>Sign In</h1> <Formik initialValues={{ uuid: '' }} validationSchema={signInProjectValidator} validateOnBlur={false} onSubmit={values => handleSubmitForm(values)} > {formikProps => { const { handleSubmit } = formikProps return ( <form onSubmit={handleSubmit}> <Field InputType={Input} component={FormInputField} icon="user" name="uuid" placeholder="e4efba4d-47e6-42a5-905e-589d3f673853" /> <Button text="Sign in project" icon="login" type="submit" /> </form> ) }} </Formik> </SignInProjectCard> ) SignInProjectView.propTypes = { handleSubmitForm: PropTypes.func.isRequired }