19. Invite member

The group is all about people. That’s what it means. In the previous tutorial, we displayed all groups in a tabular form but there was only one member in that group, that is the admin. So in this tutorial, we are going to invite member to join the group. To add anyone to the group, we must first get their permission. So we are going to send an invitation to that person to join the group. He can either accept or reject that request.

Get the email of the user to invite

First, in your GroupsComponent.vue inside the for loop, in the last <td> where we have created buttons to edit and delete the group. We are going to add another button:

<!-- a button to invite member -->
<a v-bind:data-id="group._id" v-on:click.prevent="inviteMember" class="btn btn-success" style="margin-left: 10px;">Invite member</a>

This will call a method when clicked. So we need to create a method in our methods object.

// method to invite member
inviteMember: function () {
	// get vue instance
	const self = this

	// get group _id from anchor tag
	const _id = event.target.getAttribute("data-id")

	// show pop-up and ask for user email to send invitation to join group
	swal.fire({
		title: 'Enter user email',
		input: 'text',
		inputAttributes: {
			autocapitalize: 'off'
		},
		showCancelButton: true,
		confirmButtonText: 'Invite User',
		showLoaderOnConfirm: true,
		preConfirm: async function (email) {

			// called when email address is entered

			// attach group ID and user email to the form data object
			const formData = new FormData()
			formData.append("_id", _id)
			formData.append("email", email)

			// using fetch API send the AJAX request
			return fetch(self.$apiURL + "/groups/inviteMember", {
				method: 'POST',
				body: formData,
				headers: {
				    'Authorization': 'Bearer ' + localStorage.getItem(self.$accessTokenKey)
				}
			})
				.then(function (response) {
					// called when the response is received from server

					// check if the status code is not 200
					if (!response.ok) {
						throw new Error(response.statusText)
					}

					// check if there isn't any error from server
					return response.json().then(function (value) {
						if (value.status == "error") {
							throw new Error(value.message)
						}

						// return the success response
						return value
					})
				})
				.catch(function (error) {
					// show error inside sweetalert
					swal.showValidationMessage(`Request failed: ${error}`)
				})
		},
		// disable clicking outside
		allowOutsideClick: function () {
			!swal.isLoading()
		}
	}).then(function (result) {
		// show success response in sweetalert dialog
		if (result.isConfirmed) {
			swal.fire("Invite member", result.value.message, "success")
		}
	})
},

We are using a Sweetalert pop-up and it uses promises. To learn more about promises, you can follow this link.

Now we need to create an API that will handle this request. Open your api/modules/groups.js and first include the Mongo DB ObjectId in it, because we will be using it to generate a new unique ID for the member and for setting notification ID.

Create an API to invite member

// each Mongo document's unique ID
var ObjectId = require("mongodb").ObjectId;

After that, we need to create an API that will send the invitation to the user after passing some validations.

router.post("/inviteMember", auth, async function (request, result) {
    // get logged-in users
    const user = request.user;

    // get unique ID of group
    const _id = request.fields._id;

    // get email of user
    const email = request.fields.email;

    // check if group exists
    const group = await db.collection("groups").findOne({
        "_id": ObjectId(_id)
    });

    if (group == null) {
        result.json({
            status: "error",
            message: "Group does not exists."
        });
        return;
    }

    // check if user exists
    const member = await db.collection("users").findOne({
        "email": email
    });

    if (member == null) {
        result.json({
            status: "error",
            message: "User does not exists."
        });
        return;
    }

    // check if user is already a member or admin of group
    let isAlreadyMember = false;
    for (let a = 0; a < group.members.length; a++) {
        if (group.members[a].user.email == email) {
            isAlreadyMember = true;
            break;
        }
    }

    if (group.createdBy.email == email || isAlreadyMember) {
        result.json({
            status: "error",
            message: "User is already a member of this group."
        });
        return;
    }

    // insert in group's members array
    await db.collection("groups").findOneAndUpdate({
        _id: group._id
    }, {
        $push: {
            members: {
                _id: ObjectId(),
                status: "pending", // pending, accepted
                sentBy: {
                    _id: user._id,
                    name: user.name,
                    email: user.email
                },
                user: {
                    _id: member._id,
                    name: member.name,
                    email: member.email
                },
                createdAt: new Date().getTime()
            }
        }
    });

    // send notification to the user
    await db.collection("users").findOneAndUpdate({
        _id: member._id
    }, {
        $push: {
            notifications: {
                _id: ObjectId(),
                type: "group_invite",
                group: {
                    _id: group._id,
                    name: group.name
                },
                isRead: false,
                sentBy: {
                    _id: user._id,
                    name: user.name,
                    email: user.email
                },
                createdAt: new Date().getTime()
            }
        }
    });

    // send the response back to client
    result.json({
        status: "success",
        message: "Invitation has been sent."
    });
});

Test the app now. First, try entering the email address of the user that does not exist. You will get the following error:

user not exists - invite member
user not exists – invite member

Then try entering the email address of a user who is either an admin or already a member of the group. In that case, you will get the following error:

already member - invite member
already a member – invite member

And finally try to enter the email address of a user who is neither an admin nor a member of this group, but has a registered account. Then you will see a success message.

invitation sent
invitation sent

Check the Mongo DB groups collection and you will see that a new element has been inserted in the members array. Also, if you check the users collection, you will see that a new element has been added to the notifications array of that user to whom you have sent an invite.





Please disable your adblocker or whitelist this site!