As a user, when I click "Log In/ Sign Up" and I am a new user, I get prompted with a modal with a form to create an account
AC
WHEN the user clicks the "Log In/ Sign Up" button
AND they are a new user
THEN a modal will pop up with a form to submit info
Development
Create 'addNewUserfunc inHome.jsthat takes in (newUserObj) and then callsuserData.addNewUser(newUserObj)in the then(callgetUserData()`)
Create in helpers/data a userData.js add a addNewUser function that takes in newUserObj and pushes it to the user database
Create a NewUserForm component
Import the usual suspects plus import { Form, FormGroup, Label, Input, ModalBody, ModalFooter, Button, Col, } from 'reactstrap';
Above the class create a const defaultUser and set it equal to `{
userName: '', imageUrl: '', city: '', state: '',}
Create propTypes for addUser: PropTypes.func.isRequired, toggleNewUser: PropTypes.func.isRequired
Create a state of { newUser: defaultUser, }
Create a func toggleModal that calls this.props.toggleNewUser
Create a func handleChange that create const tempUser = { ...this.state.newUser } then sets tempUser[e.target.id] = e.target.value; then this.setState({ newUser: tempUser });
Create a func formSubmit that preventsDefault, then creates a newUserToSave const and sets it equal to { ...this.state.NewUser }; then call this.props.addUser(newUserToSave)
In the then call this.toggleModal(); to close the modal the form is in
In the return create a Form that has an onSubmit={this.formSumbit}
In the form create <ModalBody> in the modal body create all your and
Name input is a type=input, id=userName, value={newUser.userName}, onChange={this.handleChange}, placeholder="Your name here", required
Image input is a type=url, id=imageUrl, value={newUser.imageUrl}, onChange={this.handleChange}, placeholder="Link to a picture", required
City input is a type=input, id=city, value={newUser.city}, onChange={this.handleChange}, placeholder="Your city", required
State input is a type=input, id=state, value={newUser.state} onChange= {this.handleChange}, placeholder="Your State", required
User Story
As a user, when I click "Log In/ Sign Up" and I am a new user, I get prompted with a modal with a form to create an account
AC
WHEN the user clicks the "Log In/ Sign Up" button AND they are a new user THEN a modal will pop up with a form to submit info
Development
func inHome.jsthat takes in (newUserObj) and then callsuserData.addNewUser(newUserObj)in the then(callgetUserData()`)helpers/dataauserData.jsadd aaddNewUserfunction that takes innewUserObjand pushes it to the user databaseNewUserFormcomponentimport { Form, FormGroup, Label, Input, ModalBody, ModalFooter, Button, Col, } from 'reactstrap';defaultUserand set it equal to `{ userName: '', imageUrl: '', city: '', state: '',}propTypesforaddUser: PropTypes.func.isRequired, toggleNewUser: PropTypes.func.isRequired{ newUser: defaultUser, }toggleModalthat callsthis.props.toggleNewUserhandleChangethat createconst tempUser = { ...this.state.newUser }then setstempUser[e.target.id] = e.target.value;thenthis.setState({ newUser: tempUser });formSubmitthat preventsDefault, then creates anewUserToSaveconst and sets it equal to{ ...this.state.NewUser };then callthis.props.addUser(newUserToSave)this.toggleModal(); to close the modal the form is inreturncreate aFormthat has anonSubmit={this.formSumbit}<ModalBody>in the modal body create all your