How to update the upvote and downvote count in realtime from database without redirect?

Question

I have up vote and down vote button on photo gallery where user can vote. but the problem it is not updating on live i need to refresh the page to update vote count from mongodb data base through server.

voteScore is not shown in front end when user click it need to refresh for update the results every time user vote the photo

Button :

<div class="message__votes" Title= "<%=photo.Title%>" data-id="<%=photo._id%>">
    <button class="btn btn-default message__vote " id="upvote" type="button"><i class="fa fa-check"></i></button>
    <!-- <button class="message__vote" id="upvote"></button> -->
    <div class="vote__counter"><%=photo.voteScore%></div>
    <button class="btn btn-default message__vote" id="downvote" type="button"><i class="fa fa-upload"></i><span class="bold"></span></button>
</div> 

This is my ajax which sent data from front end to server. My front end send id's ,other button clicks through ajaxx request to post route in express server.

My ajax post method:

$('body').on('click', '#upvote', event => {
    const id = event.target.parentElement.getAttribute('data-id');

    upvoteMessage(id);
})

$('body').on('click', '#downvote', event => {
    const id = event.target.parentElement.getAttribute('data-id');

    downvoteMessage(id);      
})

function upvoteMessage(id) {
    $.ajax({
        url: '/' + id + '/upvote',
        type: 'patch',
        contentType: 'application/json',
        headers: {
            authorization: `Bearer ${window.localStorage.token}`
        }
    })
    .done(res => {
        STORE.update(res.photo);
        renderPhotos();
    })
}

function downvoteMessage(id) {
    $.ajax({
        url: '/' + id + '/downvote',
        type: 'patch',
        contentType: 'application/json',
        headers: {
            authorization: `Bearer ${window.localStorage.token}`
        }
    })
    .done(res => {
        STORE.update(res.photo);
        renderPhotos();
    })
}

These are post routes where data has been stored into mongoose database. These routes store votes count into voteScore count variable in photo collection.

My routes in server:

exports.postUpvote= (req, res) => {

    PhotoEntries
        .findById(req.params.id)
        .then(photos => {
            const alreadyUpvoted = photos.upvoted.includes(req.user.id);
            if (alreadyUpvoted) {
                photos.voteScore--;
                photos.downvoted.push(req.user.id);
                photos.save()
                    .then(photos => {
                        return res.status(200).json({photos});
                    })
            }
            const alreadyDownvoted = photos.downvoted.includes(req.user.id);
            if (alreadyDownvoted) {
                let _downvoted = photos.downvoted.filter(id => id !== req.user.id);
                photos.downvoted = _downvoted;
            }
            photos.voteScore++;
            photos.upvoted.push(req.user.id);
            photos.save()
                .then(photos => {

                    res.send({voteScore:photos.voteScore});
                    res.redirect("/")
                })
        })
        .catch(err => {
            res.status(500).json({error: err});
        })
}

exports.postDownvote = (req, res) => {

    PhotoEntries
        .findById(req.params.id)
        .then(photos => {
            const alreadyDownvoted = photos.downvoted.includes(req.user.id);
            if (alreadyDownvoted) {
                return res.status(400).json({error: 'cannot vote the same way twice'});
            }
            const alreadyUpvoted = photos.upvoted.includes(req.user.id);
            if (alreadyUpvoted) {
                let _upvoted = photos.upvoted.filter(id => id !== req.user.id);
                photos.upvoted = _upvoted;
            }
            photos.voteScore--;
            photos.downvoted.push(req.user.id);
            photos.save()
                .then(photos => {
                    return res.status(200).json({photos});
                })
        })
        .catch(err => {
            res.status(500).json({error: err});
        })
}

When user click on upvote or downvote buttons , it automatically updates the score on live from data base without refresh of the page. My upvotes and downvotes are attached to photo collection schema and each photo has it's own upvote and down vote.

Answer 1

You can do one thing like when you get ajax call response for upvote and downvote from backend, you can send total upvote and downvote count in API response and you can update those count in vote__counter.