New List Form

[ZacCrumpton]

USER STORY

as a user, after click the new list button i should see a form appear that allows me to add information and save it to my database

AC

WHEN after the new list, or add list button has been clicked THEN i should see a form appear AND i should be able to add information to the form AND the information will be added to a database

DEV NOTES

1. create a new component named NewListForm in the pages folder
   • will need a js and a scss file.
2. grab a basic form structure from bootstrap
   • the only input needed for this is Title
   • make sure <input> has type, className, id, value and onChange fields.
3. set state for input fields
   • in this case its just title
4. add a function for titleChange (example in comments below)
5. make a save function that will save the title that has been added (example provided in comments below but can also reference scatt-surprise or react-hoarder if needed)
6. add a save button to the bottom of the form and call the save function with an onClick
7. this form should also add a uid once saved
8. in listData inside this directory ../helpers/data/listData we will add a post function to add the new list to firebase
   • here's an example: const postItem = (newItem) => axios.post(`${baseUrl}/items.json`, newItem);
9. we will also need a getUid function for this form. this should be in the authData located in this directory ../helpers/data/authData
   • here's an example const getUid = () => firebase.auth().currentUser.uid;

[ZacCrumpton]

example for onChange function (titleChange for this form)

  nameChange = (e) => {
    e.preventDefault();
    this.setState({ itemName: e.target.value });
  }