Skip to content

Commit

Permalink
Refactor initializeArticleReactions.js (forem#4303)
Browse files Browse the repository at this point in the history 
* Refactor initializeArticleReactions.js
- Refactors file according to eslint rules
- Add showModal and sendHapticMessage to globals
  in eslintrc.js
- Shorten initializeArticleReactions() by distributing
  parts of it into jumpToComments() and requestReactionCounts()
- requestReactionCounts() makes an ajax request to get the
  reaction counts
- jumpToComments() jumps to comments element directly if the
  element jump-to-comments is present

* Fix reactionOnClick function to work correctly
- Move sendHapticMessage and showModal global declaration to file
- name function on reaction button on click as addReactionOnClick
  which then calls reactToArticle()
  • Loading branch information
@Amorpheuz @benhalpern
Amorpheuz authored and benhalpern committed Oct 8, 2019
1 parent a9adeee commit 49fbf28
Showing 1 changed file with 85 additions and 75 deletions.
160 changes: 85 additions & 75 deletions app/assets/javascripts/initializers/initializeArticleReactions.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/* global sendHapticMessage, showModal */

'use strict';

// Set reaction count to correct number
function setReactionCount(reactionName, newCount) {
var reactionClassList = document.getElementById(
Expand Down Expand Up @@ -36,62 +40,10 @@ function hasUserReacted(reactionName) {
function getNumReactions(reactionName) {
var num = document.getElementById('reaction-number-' + reactionName)
.textContent;
if (num == '') {
if (num === '') {
return 0;
}
return parseInt(num);
}

function initializeArticleReactions() {
setCollectionFunctionality();
setTimeout(function() {
if (document.getElementById('article-body')) {
var articleId = document.getElementById('article-body').dataset.articleId;
if (document.getElementById('article-reaction-actions')) {
var ajaxReq;
var thisButt = this;
if (window.XMLHttpRequest) {
ajaxReq = new XMLHttpRequest();
} else {
ajaxReq = new ActiveXObject('Microsoft.XMLHTTP');
}
ajaxReq.onreadystatechange = function() {
if (ajaxReq.readyState == XMLHttpRequest.DONE) {
var json = JSON.parse(ajaxReq.response);
json.article_reaction_counts.forEach(function(reaction) {
setReactionCount(reaction.category, reaction.count);
});
json.reactions.forEach(function(reaction) {
if (
document.getElementById('reaction-butt-' + reaction.category)
) {
showUserReaction(reaction.category, 'not-user-animated');
}
});
}
};
ajaxReq.open('GET', '/reactions?article_id=' + articleId, true);
ajaxReq.send();
}
}
var reactionButts = document.getElementsByClassName(
'article-reaction-butt',
);
for (var i = 0; i < reactionButts.length; i++) {
reactionButts[i].onclick = function(e) {
reactToArticle(articleId, this.dataset.category);
};
}
if (document.getElementById('jump-to-comments')) {
document.getElementById('jump-to-comments').onclick = function(e) {
e.preventDefault();
document.getElementById('comments').scrollIntoView({
behavior: 'instant',
block: 'start',
});
};
}
}, 3);
return parseInt(num, 10);
}

function reactToArticle(articleId, reaction) {
Expand All @@ -110,13 +62,12 @@ function reactToArticle(articleId, reaction) {
.getElementsByTagName('body')[0]
.getAttribute('data-user-status');
sendHapticMessage('medium');
if (userStatus == 'logged-out') {
if (userStatus === 'logged-out') {
showModal('react-to-article');
return;
} else {
toggleReaction();
document.getElementById('reaction-butt-' + reaction).disabled = true;
}
toggleReaction();
document.getElementById('reaction-butt-' + reaction).disabled = true;

function createFormdata() {
/*
Expand All @@ -132,39 +83,98 @@ function reactToArticle(articleId, reaction) {

getCsrfToken()
.then(sendFetch('reaction-creation', createFormdata()))
.then(function(response) {
.then(response => {
if (response.status === 200) {
return response.json().then(() => {
document.getElementById('reaction-butt-' + reaction).disabled = false;
});
} else {
toggleReaction();
document.getElementById('reaction-butt-' + reaction).disabled = false;
}
toggleReaction();
document.getElementById('reaction-butt-' + reaction).disabled = false;
return undefined;
})
.catch(function(error) {
.catch(error => {
toggleReaction();
document.getElementById('reaction-butt-' + reaction).disabled = false;
});
}


function setCollectionFunctionality() {
if (document.getElementById('collection-link-inbetween')) {
var inbetweenLinks = document.getElementsByClassName('collection-link-inbetween');
var inbetweenLinksLength = inbetweenLinks.length
for (var i = 0; i < inbetweenLinks.length; i++) {
inbetweenLinks[i].onclick = function(e) {
var inbetweenLinks = document.getElementsByClassName(
'collection-link-inbetween',
);
var inbetweenLinksLength = inbetweenLinks.length;
for (var i = 0; i < inbetweenLinks.length; i += 1) {
inbetweenLinks[i].onclick = e => {
e.preventDefault();
var els = document.getElementsByClassName('collection-link-hidden');
var elsLength = els.length
for (var i = 0; i < elsLength; i++) {
var elsLength = els.length;
for (var j = 0; j < elsLength; j += 1) {
els[0].classList.remove('collection-link-hidden');
}
for (var i = 0; i < inbetweenLinksLength; i++) {
inbetweenLinks[0].className = 'collection-link-hidden'
for (var k = 0; k < inbetweenLinksLength; k += 1) {
inbetweenLinks[0].className = 'collection-link-hidden';
}
}
}
};
}
}
}

function requestReactionCounts(articleId) {
var ajaxReq;
if (window.XMLHttpRequest) {
ajaxReq = new XMLHttpRequest();
} else {
ajaxReq = new ActiveXObject('Microsoft.XMLHTTP');
}
}
ajaxReq.onreadystatechange = () => {
if (ajaxReq.readyState === XMLHttpRequest.DONE) {
var json = JSON.parse(ajaxReq.response);
json.article_reaction_counts.forEach(reaction => {
setReactionCount(reaction.category, reaction.count);
});
json.reactions.forEach(reaction => {
if (document.getElementById('reaction-butt-' + reaction.category)) {
showUserReaction(reaction.category, 'not-user-animated');
}
});
}
};
ajaxReq.open('GET', '/reactions?article_id=' + articleId, true);
ajaxReq.send();
}

function jumpToComments() {
document.getElementById('jump-to-comments').onclick = e => {
e.preventDefault();
document.getElementById('comments').scrollIntoView({
behavior: 'instant',
block: 'start',
});
};
}

function initializeArticleReactions() {
setCollectionFunctionality();
setTimeout(() => {
var articleId;
if (document.getElementById('article-body')) {
articleId = document.getElementById('article-body').dataset.articleId;
if (document.getElementById('article-reaction-actions')) {
requestReactionCounts(articleId);
}
}
var reactionButts = document.getElementsByClassName(
'article-reaction-butt',
);
for (var i = 0; i < reactionButts.length; i += 1) {
reactionButts[i].onclick = function addReactionOnClick(e) {
reactToArticle(articleId, this.dataset.category);
};
}
if (document.getElementById('jump-to-comments')) {
jumpToComments();
}
}, 3);
}

0 comments on commit 49fbf28

Please sign in to comment.