Build individual cards for all destinations

[ancasimon]

User Story

As a user, I can see my current cards and each one includes the following: title (for the location name), image, description, additional input text box, and a Submit button.

AC

WHEN I log in to the Travel Diary site, THEN I see a destination card for each of my destinations, AND each destination card displays the location name, image, description, and includes an additional input text box and a Submit button.

Dev Notes

• Create a new component file for the card domString with a destinationCard.js and corresponding .scss file.
• Write the buildDestinationCard function that builds the domString for each card. Use the Bootstrap card below.
• Also add an input text field from Bootstrap.
• Be sure to add a new class to the Submit button, which we will use to add the event listener in the buildDestinationsContainer function: "submit-diary-entry-button".
• At the end of the function, return the domString (do not use printToDom here - we will do that in the container).
• Be sure to export it.
• To get the locationName from the destinations.json object, we need a smash function:
  1. Create a new smashData.js file in the helpers folder.
  2. Write a getDiaryEntriesWithLocationName function that will make calls to both collections of diaryEntries.json and destinations.json.
  3. This function will be a new Promise.
  4. The first call will be to get diary data from diaryData.js > getDiaryEntries. Name the response in the then here diaryResponse to be able to distinguish it from other responses.
  5. Next - make the call to get destinations data from destinationdata.js > getDestinations. Name this response destinationResponse.
  6. Tip: console error at this point to make sure the function works correctly before we start pulling the specific property we need.
  7. Next: you need to find the destination record that has the same id that a diary entry has and copy the location name from that destination record onto a copy of the diary entry object. Got it?! :) Code with comments below!!
  8. In the diaryContainer.js file, replace the initial getDestinations call from destinationData.js file with the new getDestinationsWithLocations function call from the smashData.js file.

[ancasimon]

Here's the Boostrap card code:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Here's the Bootstrap code for the input text field:

<form>
<div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

[ancasimon]

Code for the smash function that gets the location name from the destination record in order to display it on a diary entry record:

const getDiaryEntriesWithLocationName = () => new Promise((resolve, reject) => {
  diaryData.getDiaryEntries()
    .then((diaryResponse) => {
      destinationData.getDestinations().then((destinationResponse) => {
        // NOTE: First we get the array we have with the diary entries and then the array we have with the destinations.
        console.error('diaryResponse', diaryResponse);
        console.error('destinationResponse', destinationResponse);
        const finalDiaryEntries = [];
        diaryResponse.forEach((diaryEntry) => {
          // NOTE: Then we go over each object in the array of diary entries and create a copy of each object. - this is so we do not actually modify the Firebase database but rather just use it get the data we need to display in a temporary object.
          const diaryEntryCopy = { ...diaryEntry };
          console.error('copy of diary entry', diaryEntry);
          // NOTE: Next we find the destination in the array of destinations we got back that has the same id as the destinationId in the diaryEntry objects.
          const selectedDestination = destinationResponse.find((x) => x.id === diaryEntryCopy.destinationId);
          console.error('selected destination where we get locationName from', selectedDestination);
          // NOTE: Then we copy the location name from any destinations whose ids are on a diary entry into that copy of that diary entry.
          diaryEntryCopy.locationName = selectedDestination.locationName;
          // NOTE: Lastly we push that copy of the diary entry into a final array and then resolve the array.
          finalDiaryEntries.push(diaryEntryCopy);
          console.error('array of diary entries with location', finalDiaryEntries);

          resolve(finalDiaryEntries);
        });
      });
    })
    .catch((error) => reject(error));
});