Closed ancasimon closed 4 years ago
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>
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));
});
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
destinationCard.js
and corresponding .scss file.buildDestinationCard
function that builds the domString for each card. Use the Bootstrap card below.buildDestinationsContainer
function: "submit-diary-entry-button".locationName
from thedestinations.json
object, we need a smash function:smashData.js
file in thehelpers
folder.getDiaryEntriesWithLocationName
function that will make calls to both collections ofdiaryEntries.json
anddestinations.json
.diaryData.js
>getDiaryEntries
. Name the response in the then herediaryResponse
to be able to distinguish it from other responses.destinationdata.js
>getDestinations
. Name this responsedestinationResponse
.diaryContainer.js
file, replace the initialgetDestinations
call fromdestinationData.js
file with the newgetDestinationsWithLocations
function call from thesmashData.js
file.