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