Build diary

[ancasimon]

User Story

As a user, when I am on the Home Page, I can see a Diary section that includes a descending (by timestamp) list of cards listing places I have already been with the following details: the name of the location from the card the user was typing in, the text that was in the text box from that card, timestamp for when the diary entry was created.

AC

WHEN I look at a the Diary section below the Destinations section, THEN I see a list of diary entries, AND each diary entry displays the following: location name, timestamp of when I created it/ clicked Submit, and the notes I entered in the input box, AND all the entries are displayed in ascending order base on their timestamp (Req: "Newest entries should appear at the bottom.")

Dev Notes

• In index.html file. add a div with the Id of diaryDiv.
• Create a diaryData.js file. Add an axios get method that pulls all the data from the diaryEntries collection in Firebase.
• Create a diaryContainer component and corresponding js and scss files.
• In the diaryComponent.js file:
  1. Import diaryData.js
  2. Import utils for printToDom.
  3. Import diaryCard.js.
  4. Write a function to build the diary container, which calls the getDiaryEntries function from the diaryData.js file and prints it to the diaryDiv div.
• In the authData.js file:
  1. Import the diaryContainer.js file and call the build function in it inside the checkLoginStatus function - but outside the if statement that checks if user is logged in.
  2. Declare a variable for the diaryDiv div and hide or show it as appropriate in the if statement that controls what displays when uses is logged in or not.
• To ensure diary entries are displayed in ascending order:
  1. Add a timestamp property to the diaryEntries.json objects.
  2. In the function that builds the diary container, declare a variable that holds the sorted diary entries and sort them by timestamp in ascending order: const sortedDiaryEntries = diaryEntries.sort((a, b) => a.timestamp - b.timestamp);.
  3. Be sure to call this sortedDiaryEntries when you start the forEach loop so that you loop over them in the correct order.

[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