You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

87 lines
2.3 KiB
JavaScript

"use strict";
// This is the global list of the stories, an instance of StoryList
let storyList;
/** Get and show stories when site first loads. */
async function getAndShowStoriesOnStart() {
storyList = await StoryList.getStories();
$storiesLoadingMsg.remove();
putStoriesOnPage();
}
/**
* A render method to render HTML for an individual Story instance
* - story: an instance of Story
*
* Returns the markup for the story.
*/
function generateStoryMarkup(story) {
// console.debug("generateStoryMarkup", story);
const hostName = story.getHostName();
return $(`
<li id="${story.storyId}">
<a href="${story.url}" target="a_blank" class="story-link">
${story.title}
</a>
<small class="story-hostname">(${hostName})</small>
<small class="story-author">by ${story.author}</small>
<small class="story-user">posted by ${story.username}</small>
</li>
`);
}
/** Gets list of stories from server, generates their HTML, and puts on page. */
function putStoriesOnPage() {
console.debug("putStoriesOnPage");
$allStoriesList.empty();
// loop through all of our stories and generate HTML for them
for (let story of storyList.stories) {
const $story = generateStoryMarkup(story);
$allStoriesList.append($story);
}
$allStoriesList.show();
}
/** handles story form submission: extracts values from story submission
* form, calls addStory, generates story markup to append to page
*/
async function getNewStoryAndSubmit(evt) {
evt.preventDefault();
// get values from form
const title = $("#story-title").val();
const author = $("#story-author").val();
const url = $("#story-url").val();
// put values in an obj
const newStory = {
title: title,
author: author,
url: url
};
// instantiate a Story with obj and display on page
const resultOfAddStoryCall = await storyList.addStory(currentUser, newStory);
console.log("resultOfAddStoryCall: ", resultOfAddStoryCall);
const newStoryMarkup = generateStoryMarkup(resultOfAddStoryCall);
$allStoriesList.prepend(newStoryMarkup);
//resets form with empty values
$addStoryForm.trigger("reset");
hidePageComponents();
$allStoriesList.show();
}
//event listener for add story form submit
$addStoryForm.on("submit", getNewStoryAndSubmit);