CODEWITHSUNDEEP
javascriptnode.jsmongodb
Nodegeek
Nodegeek

Reputation: 280

like & Dislike button node JS mongodb

I'm trying to build a system for like & dislike posts in my project but I'm facing some issue using this on the client side , I have this form enter image description here

but the problem there is no communication between server and client I don't know what I'm missing, even I click on like button I see in the client side value 1 but nothing happen on server side

the front is build with EJS view engine and this my code

                <div class="row">
                    <button onclick="actOnPost(event);"
                            data-post-id="<%= user.posts[x].id %>">Like
                    </button>
                    <span id="likes-count-<%= user.posts[x].id %>"><%= user.posts[x].likes %></span>
                </div>

I use this script in the index.ejs file :

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var updatePostStats = {
        Like: function (postId) {
            document.querySelector('#likes-count-' + postId).textContent++;
        },
        Unlike: function(postId) {
            document.querySelector('#likes-count-' + postId).textContent--;
        }
    };

    var toggleButtonText = {
        Like: function(button) {
            button.textContent = "Unlike";
        },
        Unlike: function(button) {
            button.textContent = "Like";
        }
    };

    var actOnPost = function (event) {
        var postId = event.target.dataset.postId;
        var action = event.target.textContent.trim();
        toggleButtonText[action](event.target);
        updatePostStats[action](postId);
        axios.post('/posts/' + postId + '/act', { action: action });
    };
</script>
 <script src="https://js.pusher.com/4.1/pusher.min.js"></script>

<script>
    var pusher = new Pusher('your-app-id', {
        cluster: 'your-app-cluster'
    });
    var socketId;

    // retrieve the socket ID on successful connection
    pusher.connection.bind('connected', function() {
        socketId = pusher.connection.socket_id;
    });


    var channel = pusher.subscribe('post-events');
    channel.bind('postAction', function(data) {
        // log message data to console - for debugging purposes
        console.log(data);
        var action = data.action;
        updatePostStats[action](data.postId);
    });
</script>

for the server side I have this code located in file.js:

router.post('/posts/:id/act', (req, res, next) => {
  console.log('im here')
    const action = req.body.action;
    const counter = action === 'Like' ? 1 : -1;
    Post.update({_id: req.params.id}, {$inc: {likes_count: counter}}, {}, (err, numberAffected) => {
        pusher.trigger('post-events', 'postAction', { action: action, postId: req.params.id }, req.body.socketId);
        res.send('');
    });
});

I added console.log('Im here') to verify if there something is launching on my server side but I don't get anything, this router is not even launched

my mongodb image for posts and like button is below :

enter image description here

could it be possible to help on solving this or provide me a better exemple to follow ?

Best Regards,

Upvotes: 0

Views: 4428

Answers (1)

RAJDEEP SONDARVA
RAJDEEP SONDARVA

Reputation: 41

Instead of making string or number in like, make an array, push req.user.id- user-id of the particular logged in user, and get the array length. This will give you total number of likes. In order to get toggle functionality, search that user id using findOne method and if no user found, push the id of the user who clicked the like button else pull the user id of the same user. Always print the length of the array so that while performing push or pull operations, you will get real time length of the like array.

Upvotes: 4

Related Questions