as a user, after click the new anime 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
AND the new card list item will appear after the save button has been clicked
DEV NOTES
create a new component named NewAnimeForm in the pages folder
will need a js and a scss file.
grab a basic form structure from bootstrap
make sure <input> has type, className, id, valueand onChange fields.
set state for input fields
add a function for all onChange functions needed (see ticket #5 for an example of this function)
make a save function that will save the fields that have been added (example provided in ticket #5 or look at scatt-surprise or react-hoarder if need be)
add a save button to the bottom of the form and call the save function with an onClick
this form should also add a listId once saved
in animeData inside this directory ../helpers/data/animeData we will add a post function to add the new list to firebase
here's an example: const postItem = (newItem) => axios.post(`${baseUrl}/items/item.json`, newItem);
we will also need a getSingleList function for this form. this should be in the animeData located in this directory ../helpers/data/animeData
USER STORY
as a user, after click the
new anime
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 database AND the new card list item will appear after the save button has been clickedDEV NOTES
NewAnimeForm
in thepages
folderjs
and ascss
file.bootstrap
<input>
hastype
,className
,id
,value
and onChange
fields.state
for input fieldsonChange
functions needed (see ticket #5 for an example of this function)save
button to the bottom of the form and call thesave
function with anonClick
listId
once savedanimeData
inside this directory../helpers/data/animeData
we will add apost
function to add the new list to firebaseconst postItem = (newItem) => axios.post(`${baseUrl}/items/item.json`, newItem);
getSingleList
function for this form. this should be in theanimeData
located in this directory../helpers/data/animeData