User can submit a destination card and turn it into a diary entry

[ancasimon]

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:

1. The user should be able to type in the text box for a specific location, click the submit button on that card, and their entry should appear in a "diary" below the cards.
2. The diary entry should contain the name of the location from the card the user was typing in (and hit the submit button in).
3. It should also contain only the text that was in the text box from that card.
4. The text box for that card should be cleared upon submission.
5. The diary entries should build up as the user continues to type in cards and submit their entries. Newest entries should appear at the bottom.

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

• In the diaryContainer.js file:
  1. Add an event listener for the Submit button on each card (class of "submit-diary-entry-button"). When clicked, it should trigger the makeNewDiaryCard function. Add it in the main buildDiaryContainer function - or in a separate new function just for events on this page.
  2. Above this, add the new 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 new addDiaryEntry function from diaryData.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 add e.preventDefault; 7-use the .reset method for the input field to empty it once the new diary entry is created.
• In the 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.

[ancasimon]

Using moment.js to get timestamp: https://momentjs.com/

Run this for it to work: npm install moment --save

[ancasimon]

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