diff --git a/app/assets/javascripts/initializers/initializeReadingListPage.js.erb b/app/assets/javascripts/initializers/initializeReadingListPage.js.erb index 6603d0443..3ed41658b 100644 --- a/app/assets/javascripts/initializers/initializeReadingListPage.js.erb +++ b/app/assets/javascripts/initializers/initializeReadingListPage.js.erb @@ -1,3 +1,5 @@ +const PER_PAGE = 45; + function initializeReadingListPage(){ if ( getCurrentPage("reading_list_items-index") && checkUserLoggedIn() ) { var publicSearchKey = '<%= ALGOLIASEARCH_PUBLIC_SEARCH_ONLY_KEY %>' @@ -7,51 +9,86 @@ function initializeReadingListPage(){ var params = getQueryParams(document.location.search); document.getElementById('substories').dataset.tabs = '{"v": "'+(params.v || '')+'", "t": "'+(params.t || '')+'" }' postCommentFilter(); - getArticles("***onlytags***"); + getArticlesTags(); document.getElementById("load-more-cta").onclick = function(event) { event.target.classList.remove("showing"); - getArticles(""); + var nextNumber = document.getElementsByClassName('single-article').length + PER_PAGE; + getArticles(currentTag(), nextNumber); } } } +function currentTag() { + var tabsObj = JSON.parse(substories.dataset.tabs); + return (tabsObj["t"] || ""); +} +function getArticlesTags(){ + var user = userData(); + var algoliaIds = user.reading_list_ids.map(function(id){return "articles-"+id}); + var tags = {} -function getArticles(tag, num){ + readinglistIndex.getObjects(algoliaIds, function(err, content) { + content.results.forEach(function(story, i){ + if (story) { + story.tag_list.forEach(function(tag){ + if (tags[tag]){ + tags[tag] = tags[tag]+1; + } else { + tags[tag] = 1; + } + }) + } + }) + renderTags(tags); + document.getElementById('tag-filter-widget').setAttribute('data-tags', JSON.stringify(tags)); + initializeReadingListIcons(); + }); +} + +function tagsCounts() { + var dataTags = document.getElementById('tag-filter-widget').getAttribute('data-tags'); + return dataTags ? JSON.parse(dataTags) : {}; +} + +function getArticles(tag, num = PER_PAGE){ var user = userData(); var substoriesDiv = document.getElementById("substories"); var algoliaIds = user.reading_list_ids.map(function(id){return "articles-"+id}); var resultDivs = [] - var tags = {} + var showMore = false; + var tagSpecified = (tag != ""); + readinglistIndex.getObjects(algoliaIds, function(err, content) { - var results = num ? content.results.slice(0, num) : content.results ; - results.forEach(function(story, i){ - if (story) { - if (tag == "" || story.tag_list.indexOf(tag) > -1){ + if (tagSpecified){ + var results = content.results; + for (var i in results) { + if (resultDivs.length >= num) { + break; + } + if (results[i] && results[i].tag_list.indexOf(tag) > -1) { + resultDivs.push(buildArticleHTML(results[i])); + } + } + showMore = tagsCounts()[tag] > num; + } + else { + content.results.slice(0, num).forEach(function(story, i){ + if (story) { resultDivs.push(buildArticleHTML(story)); } - story.tag_list.forEach(function(tag){ - if (tags[tag]){ - tags[tag] = tags[tag]+1; - } else { - tags[tag] = 1; - } - }) - } - }) - if (tag != "***onlytags***") { - substoriesDiv.innerHTML = resultDivs.join(""); - if ( resultDivs.length == 0) { - var message = "
This is where to find your bookmarked posts, but it looks like you have not bookmarked anything.
" - substoriesDiv.innerHTML = message; - } - } else { - if (results.lenth > 43) { - document.getElementById("load-more-cta").classList.add("showing"); - } - renderTags(tags); + }) + showMore = num < content.results.length; } - initializeReadingListIcons(); + + substoriesDiv.innerHTML = resultDivs.join(""); + if ( resultDivs.length == 0) { + var message = "
This is where to find your bookmarked posts, but it looks like you have not bookmarked anything.
" + substoriesDiv.innerHTML = message; + } + + var showMoreButton = document.getElementById("load-more-cta"); + showMore ? showMoreButton.classList.add("showing") : showMoreButton.classList.remove("showing") }); } @@ -61,7 +98,7 @@ function getComments(){ var substories = document.getElementById("substories"); var tabsObj = JSON.parse(substories.dataset.tabs); commentsIndex.search("*", { - hitsPerPage: 45, + hitsPerPage: PER_PAGE, attributesToHighlight: [], tagFilters: [algoliaIds,tabsObj["t"]], }) @@ -171,7 +208,7 @@ function getStories(){ if (tabsObj["v"] == "comments") { getComments(tabsObj["t"] || ""); } else { - getArticles(tabsObj["t"] || "", 45); + getArticles(tabsObj["t"] || "", PER_PAGE); } } @@ -192,4 +229,4 @@ function urlParams(obj){ } else { return "" } -} \ No newline at end of file +} diff --git a/spec/factories/reactions.rb b/spec/factories/reactions.rb index e758a27f8..205be30a5 100644 --- a/spec/factories/reactions.rb +++ b/spec/factories/reactions.rb @@ -1,8 +1,14 @@ FactoryBot.define do factory :reaction do - reactable_id { rand(10000) } + reactable_id { rand(10000) } user reactable_type { "Article" } category { "like" } end + + factory :reading_reaction, class: "Reaction" do + user + reactable { create(:article) } + category { "readinglist" } + end end diff --git a/spec/features/user_views_a_reading_list_spec.rb b/spec/features/user_views_a_reading_list_spec.rb new file mode 100644 index 000000000..beab76521 --- /dev/null +++ b/spec/features/user_views_a_reading_list_spec.rb @@ -0,0 +1,49 @@ +require "rails_helper" + +describe "Reading list" do + let!(:user) { create(:user) } + + before do + sign_in user + end + + context "without tags" do + it "shows the reading list" do + create_list(:reading_reaction, 3, user: user) + visit "/readinglist" + expect(page).to have_selector("#load-more-cta", visible: false) + end + + context "when large readinglist" do + before { create_list(:reading_reaction, 46, user: user) } + + it "shows the large reading list" do + visit "/readinglist" + expect(page).to have_selector("#load-more-cta", visible: true) + end + + it "shows the large readinglist after user clicks the show more button" do + visit "/readinglist" + click_button("LOAD MORE POSTS") + expect(page).to have_selector("#load-more-cta", visible: false) + end + end + + context "with tag selected" do + let(:article) { create(:article, title: "Java development", tags: "productivity, development, java") } + let(:article2) { create(:article, title: "My java oop", tags: "productivity, design, java") } + let(:article3) { create(:article, title: "My tools", tags: "productivity, tools") } + + before do + create(:reading_reaction, user: user, reactable: article) + create(:reading_reaction, user: user, reactable: article2) + create(:reading_reaction, user: user, reactable: article3) + visit "/readinglist?t=java" + end + + it "does not show load more button" do + expect(page).to have_selector("#load-more-cta", visible: false) + end + end + end +end