Closed ancasimon closed 4 years ago
Using moment.js to get timestamp: https://momentjs.com/
Run this for it to work: npm install moment --save
An article that helped me figure out how to transform the dates into timestamps and compare them and sort them correctly! https://www.codementor.io/@robertwozniak/javascript-story-sorting-records-by-dates-pf8oev5iy
User Story
As a user on the Travel Diary site, I can create new diary entries by typing in my notes in a destination card and clicking Submit.
Exercise instructions:
AC
WHEN I look at a destination card, type in text in the input box, and click Submit, THEN a new diary entry gets created, which uses some of the card information and the data I submitted to display the following data: location name, timestamp of when I clicked Submit, and the notes I entered in the input box, AND the input text box on the card I typed in gets cleared, AND the diary entry gets added to the bottom of the diary section.
Note: The original destination card stays there - doesn't get deleted.
Dev Notes
diaryContainer.js
file:makeNewDiaryCard
function. Add it in the mainbuildDiaryContainer
function - or in a separate new function just for events on this page.makeNewDiaryCard
function: 1-declare a new variable for the new object/diary entry; 2-create a new object with all the necessary data (locationName from destination, timestamp); 3-call the axios post call to create and add the new object to the Firebase collection of diary entries (the newaddDiaryEntry
function fromdiaryData.js
); 4-refresh the page to redisplay the diary container updated with the new entry; 5-this is a click event so add e as a parameter; -6 also adde.preventDefault
; 7-use the .reset method for the input field to empty it once the new diary entry is created.diaryData.js
file, add a set method that creates a diaryEntry record for each destination card that gets submitted. This is the function that gets called in the event listener for the Submit button on the individual destination card. This should send that data to Firebase ?????? to update the diaryEntries collection there. UPDATE: This is an axios post method that creates a new object.