Picture Competition Web App - Node JS, Mongo DB and Vue JS

Create a Picture Competition Website in Express JS, MEVN

0
(0)

Delete Competition

Now the creator of competition must have the power to delete a competition. So we need to show a delete button with each competition that will be visible to the creator of that competition. For that, first, we need to create a function in our “modules/functions.js” that will tell if the user is the creator of that competition:

competitionsWithUserOwner: function (competitions, user) {
  competitions.forEach(function (competition) {
    competition.isOwner = (competition.createdBy._id.toString() == user._id.toString());
  });
  return competitions;
},

Then goto “server.js” the POST route “/getAllCompetitions” and after all competitions are fetched, add the following line:

competitions = functions.competitionsWithUserOwner(competitions, user);

After that, go to your “competition-slider.ejs” file and replace the following code in the [delete competition button goes here] section:

<div v-if="competition.isOwner">
  <form method="POST" v-bind:action="baseUrl + '/deleteCompetition'" style="display: contents;" v-on:submit.prevent="deleteCompetition">
    <input type="hidden" name="id" v-model="competition._id" required />
    <button type="submit" name="submit" class="btn-delete">
      <i class="fa fa-trash"></i>
    </button>
  </form>
</div>

This will call a Javascript function when the form is submitted. So we need to create a function in our “competitionApp” object in “footer.ejs”:

deleteCompetition: function() {
  var form = event.target;
  var self = this;

  swal({
      title: "Are you sure?",
      text: "This competition will be deleted",
      icon: "warning",
      buttons: true,
      dangerMode: true,
  })
  .then(function(isOkay) {
      if (isOkay) {
          // disable the submit button and show "Loading..." text
          form.submit.setAttribute("disabled", "disabled");
          form.submit.innerHTML = "<i class='fa fa-spinner fa-spin'></i>";

          var formData = new FormData(form);
          formData.append("accessToken", localStorage.getItem(accessTokenKey));

          myApp.callAjax(form.getAttribute("action"), formData, function (response) {
              // convert the JSON string into Javascript object
              var response = JSON.parse(response);
              // console.log(response);

              // enable the submit button
              form.submit.removeAttribute("disabled");
              form.submit.innerHTML = "<i class='fa fa-trash'></i>";

              // if the user is created, then redirect to login
              if (response.status == "success") {
                  self.onCompetitionDeleted(form.id.value);
              } else {
                  swal("Error", response.message, "error");
              }
          });
      }
  });
},

This will ask for confirmation using a Sweetalert library. This calls an AJAX to the server and if the competition is deleted successfully then we need to remove it from the local array too. So create another method in this object that will do this:

onCompetitionDeleted: function(_id) {
  var self = this;
  this.competitions.forEach(function (competition, index) {
    if (competition._id.toString() == _id.toString()) {
      self.competitions.splice(index, 1);
    }
  });
},

After that, we need to create a POST route in “server.js” that will handle the AJAX request.

app.post("/deleteCompetition", async function (request, result) {
  const accessToken = request.fields.accessToken;
  const id = request.fields.id;

  var user = await db.collection("users").findOne({
    "accessToken": accessToken
  });
  if (user == null) {
    result.json({
      "status": "error",
      "message": "User has been logged out. Please login again."
    });
  }

  var competition = await db.collection("competitions").findOne({
    $and: [{
      "_id": ObjectId(id)
    }, {
      "createdBy._id": user._id
    }]
  });
  if (competition == null) {
    result.json({
      "status": "error",
      "message": "Competition not found."
    });
    return false;
  }

  fileSystem.unlink("public/" + competition.user1.picture, function (error) {
    if (error) {
      console.error(error);
      return false;
    }

    fileSystem.unlink("public/" + competition.user2.picture, async function (error) {
      if (error) {
        console.error(error);
        return false;
      }

      await db.collection("competitions").deleteOne({
        "_id": ObjectId(id)
      });

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

This will first check if the user is logged in. Then it will check if the competition is created by a logged-in user. Then it will remove the first user’s uploaded picture and then the second user’s uploaded pictures from the “uploads” folder. Finally, it will delete the competition from the Mongo DB as well. And send the response back to the client (AJAX).

How useful was this post

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post





Leave a Reply