22. Delete notification

In the previous article, we were displaying all notifications. Now we need to have the ability to delete a notification. Deleting a notification is very simple, we just need to show a button in front of each notification in the table we created in the previous article.

Then we will call an AJAX to the server and pass the notification ID with the request so the server will know which notification the user wants to delete. And finally, we will create a simple API that will handle that request and delete the notification from users collection.

So go ahead and create another <td> tag in the loop to show the delete button.

<!-- a button to delete the notification -->
<td style="display: flex;">
    <form v-on:submit.prevent="deleteNotification">
        <input type="hidden" name="_id" v-bind:value="notification._id" required />
        <input type="submit" v-bind:value="isDeleting ? 'Deleting...' : 'Delete'" v-bind:isDeleting="disabled" class="btn btn-danger" />
    </form>
</td>

At this point, your output will be something like this:

delete notification
show notifications

Then create a isDeleting property first.

date() {
    return {
        isDeleting: false
    }
},

After that, create a method that will call an AJAX and also will remove the notification from the local array.

// method to delete the notification
deleteNotification: async function () {
    const form = event.target
    const _id = form._id.value
    const formData = new FormData(form)

    this.isDeleting = true

    const response = await axios.post(
        this.$apiURL + "/deleteNotification",
        formData,
        {
            headers: this.$headers
        }
    )
    this.isDeleting = false

    if (response.data.status == "success") {
        // remove from local array
        const tempNotifications = store.getters.getNotifications
        for (let a = 0; a < tempNotifications.length; a++) {
            if (tempNotifications[a]._id == _id) {
                tempNotifications.splice(a, 1)
                break
            }
        }
        store.commit("setNotifications", tempNotifications)
    } else {
        swal.fire("Error", response.data.message, "error");
    }
},

Then we need to create an API that will handle this request and actually delete the notification from Mongo DB. So open api/server.js and create an API for this:

app.post("/deleteNotification", auth, async function (request, result) {
    // get authenticated user
    const user = request.user;

    const _id = request.fields._id;

    await db.collection("users").findOneAndUpdate({
        _id: user._id
    }, {
        $pull: {
            notifications: {
                _id: ObjectId(_id)
            }
        }
    });

    result.json({
        status: "success",
        message: "Notification has been removed."
    });
});

We are using Mongo DB $pull operator to remove the notification. For more information about it, you can learn from their official documentation.

Test the app now. You will see a delete button along with each notification. Click on it, it will be removed after a few seconds. And if you refresh the page now, you will no longer see that notification. You can also check from Mongo DB compass that it has been removed from the notifications array from users collection.





Please disable your adblocker or whitelist this site!