-
Notifications
You must be signed in to change notification settings - Fork 4.9k
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
base: master
Are you sure you want to change the base?
Add Comment Liking Capability #5
Conversation
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.
There was a problem hiding this 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) |
There was a problem hiding this comment.
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.
setTimeout(hideErrorModal,3000) | |
setTimeout(hideErrorModal, 3000) |
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) | ||
} |
There was a problem hiding this comment.
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).
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) | |
} |
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.