Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Comment Liking Capability #5

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

yuriyivanenko
Copy link

Users are able to like comments with a heart icon and unlike previous comments. An error message will notify users when their like was unsuccessful due to a server issue giving them the chance to try again.

With success, if heart is not liked it will be made FULL, but if already liked heart will turn EMPTY
In the previous code the wrong hearts were targeted. That has been fixed.
Copy link

@stephenmckeon stephenmckeon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job!

const modal = document.querySelector('#modal')
modal.querySelector('#modal-message').textContent = err
modal.className = ''
setTimeout(hideErrorModal,3000)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should always be spacing after commas.

Suggested change
setTimeout(hideErrorModal,3000)
setTimeout(hideErrorModal, 3000)

Comment on lines +17 to +33
const handleServerSuccess = (res, heartTarget) => {
document.querySelector('#modal').className = 'hidden'
if(heartTarget.className === 'like-glyph'){
heartTarget.textContent = FULL_HEART
heartTarget.className = 'activated-heart'
}else if(heartTarget.className === 'activated-heart'){
heartTarget.textContent = EMPTY_HEART
heartTarget.className = 'like-glyph'
}
}

const handleLikeComment = (event) => {
const heartTarget = event.target
mimicServerCall()
.then(res => handleServerSuccess(res, heartTarget))
.catch(handleServerError)
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't look like res is being used (and if it were, try naming is response next time, just to be more clear).

Suggested change
const handleServerSuccess = (res, heartTarget) => {
document.querySelector('#modal').className = 'hidden'
if(heartTarget.className === 'like-glyph'){
heartTarget.textContent = FULL_HEART
heartTarget.className = 'activated-heart'
}else if(heartTarget.className === 'activated-heart'){
heartTarget.textContent = EMPTY_HEART
heartTarget.className = 'like-glyph'
}
}
const handleLikeComment = (event) => {
const heartTarget = event.target
mimicServerCall()
.then(res => handleServerSuccess(res, heartTarget))
.catch(handleServerError)
}
const handleServerSuccess = (heartTarget) => {
document.querySelector('#modal').className = 'hidden'
if(heartTarget.className === 'like-glyph'){
heartTarget.textContent = FULL_HEART
heartTarget.className = 'activated-heart'
}else if(heartTarget.className === 'activated-heart'){
heartTarget.textContent = EMPTY_HEART
heartTarget.className = 'like-glyph'
}
}
const handleLikeComment = (event) => {
const heartTarget = event.target
mimicServerCall()
.then(handleServerSuccess)
.catch(handleServerError)
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants