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
create a new component named NewListForm in the pages folder
will need a js and a scss file.
grab a basic form structure from bootstrap
the only input needed for this is Title
make sure <input> has type, className, id, valueand onChange fields.
set state for input fields
in this case its just title
add a function for titleChange (example in comments below)
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)
add a save button to the bottom of the form and call the save function with an onClick
this form should also add a uid once saved
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);
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;
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 databaseAC
WHEN after the
new list
, oradd 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 databaseDEV NOTES
NewListForm
in thepages
folderjs
and ascss
file.bootstrap
Title
<input>
hastype
,className
,id
,value
and onChange
fields.state
for input fieldstitle
titleChange
(example in comments below)save
button to the bottom of the form and call thesave
function with anonClick
uid
once savedlistData
inside this directory../helpers/data/listData
we will add apost
function to add the new list to firebaseconst postItem = (newItem) => axios.post(`${baseUrl}/items.json`, newItem);
authData
located in this directory../helpers/data/authData
const getUid = () => firebase.auth().currentUser.uid;