Loading and error states

Clase 29 de 54 • Full Stack JavaScript with Sails.js

Alexandre Assis

student•

Also, Mike mentions that the double delete would not be a problem because it is failing silently. That is NOT the case because we are verifying ownership of the item and the way the code is right now, it returns an error 500 because thing.owner is undefined.
To prevent that we need to do this:

if (thing) { if (thing.owner !== this.req.me.id ) { throw 'forbidden'; } }

<code>

Mike USA

student•

This implies that you are encountering another error internally. Really, you should be checking if the thing still exists and if the requestor is the owner (or in my case managedBy).

let item = await Thing.findOne(inputs.id);
if (!item){
  throw 'notFound'; // setup in exits
}

// retrieving the user is unnecessary
//  only doing it for semantic example
let endUser = User.findOne(this.req.me.id);
if (item.owner === endUser.id) {
   await Thing.deleteThing({id: item.id});
}
else {
  throw 'forbidden';
}

return;

In your case, the second time delete is called, it won't find an item if it's been deleted and should return a 404 Not Found.

Also, in your code, using a nested if isn't necessary, you could clean that up with:

if (thing && thing.owner !== this.req.me.id){
  throw 'forbidden';
}

Mike USA

student•

There were a few errors above when trying to retype from memory:

User.findOne should have an await before it: let endUser = await User.findOne(…)
Thing.deleteThing({id:item.id}) should be Thing.destroyOne(item.id)

Other notes: Platzi sometimes messes up the white space of it's rendered code. There should be spaces between the strings and the throw statements. Make sure you run your npm test.

Alexandre Assis

student•

Hi folks, I was trying to do what Mike suggested at the end, returning a “notFound” when a double-delete was detected (when the item no longer exists in the database) - and I got it alright, except that when returning a 404 the modal doesn’t close. What do I need to do to close the modal when a 404 is returned from the destroy-one-thing action?

Mike USA

student•

Hi folks, I was trying to do what Mike suggested at the end, returning a “notFound” when a double-delete was detected (when the item no longer exists in the database) - and I got it alright, except that when returning a 404 the modal doesn’t close. What do I need to do to close the modal when a 404 is returned from the destroy-one-thing action?

Handling Errors

As you may have noticed, the tutorial shows you how to handle the form and submit it to the server. It demonstrates how to handle the request on the server and delete the item if available or based on your conditions and throw a success or error response and then how to proceed when the response it successful.

What it fails to show is how to handle errors. I'm not sure if this is by design to be presented in a later session, or unintentional oversight. Below, I'll show one way that this could be handled. Keep in mind I'm not a Sails expert and so I cannot say this is the way this should be done.

I should also speculate that this may not have been originally available and may have been an added modification in Sails v1.1. The ajax-form.component.js file in the newer version of Sails handles a few more events and has more code than the version supplied w/ ration.io.

1. Update AJAX Form

In your available-things.ejs, you will need to add a new event to called @rejected to <ajax-form>. My code has diverged from the tutorials based on what I'm trying to do, so although I will try to recreate what has been done so far using the ration.io github source code, forgive me if it is a little different.

Your code should look like:

<ajax-form
  action="destroyOneThing"
  :syncing.sync="syncing"
  :cloud-error.sync="cloudError"
  :handle-parsing="handleParsingDeleteThingForm"
  @submitted="submittedDeleteThingForm()"
  @rejected="rejectedDeleteThingForm()"
>

Notice the last line that I've added for you.

2. Update Page Action

Now that you have your view set up to handle the form, you will need to create the function in your page action to do the work.

Inside your assets/js/pages/things/available-things.page.js, you will need to go to the methods: {...} area and add your rejectedDeleteThingForm function. Inside it, you can handle the error how you choose. In your case, this is where you might want to dismiss the modal.

methods: {
  ...

  handleParsingDeleteThingForm: function() {
    return {
      id: this.selectedThing.id
    };
  },

  submittedDeleteThingForm: function() {

    // Remove the thing from the list
    _.remove(this.things, {id: this.selectedThing.id});

    // Close the modal.
    this.selectedThing = undefined;
    this.confirmDeleteThingModalOpen = false;
  },

  rejectedDeleteThingForm: function(){
    console.log('Error encountered', this.cloudError);
    // Close the modal.
    this.selectedThing = undefined;
    this.confirmDeleteThingModalOpen = false;
  },

  ...
}

Notice the last function, which is the same name that you added to your view. That can be called anything. If you don't have many methods on the page even handleError might be okay. Inside the function is where you reset the values, since there isn't a selected item anymore, you set that back to undefined and this.confirmDeleteThingModalOpen is the property that tells Vue whether to display the element or not, so setting it to false closes it.

This function is where you might also add an error on your page to inform the user that it was not successful and they should possibly contact support and submit a ticket (or notify them that a ticket has automatically been generated for them so you don't get duplicate support tickets).

Notice that the page action data, this.cloudError, is now populated -- this is the property you set with :cloud-error.sync in the view. We know we can use this because inside the file ajax-form.component.js we see this.$emit('rejected', rawErrorFromCloudSDK);.

The value of this.cloudError will be string thrown in the controller when deleting the item. Having access to this error means you can customize the response in the view based on the error thrown.

As stated above I am by no means an expert, but hopefully this will be accurate and helpful.

Mike USA

student•

In the next episode, Mike describes the other method, which is to have Vue use the cloudError property that you've set previously and display an error message in the modal.

This would not dismiss the modal, but is an example of how to detect an error. Thus, you could call a bootstrap method to dismiss the error if the cloudError is populated w/in the Vue element.

Rory Silva

student•

On the @click event we pass thing.id to the method. Then on the method we make this.selectedThing equal to the results of finding the thing inside of this.things.

Why not just pass this.thing (the whole object) on the @click event? Then the clickDeleteThing method can receive it as something like thingObject and assign this.selectedThing = thingObject.

I'm not sure why we would only send the id and then look it up when we had it to begin with.

James Severn

student•

For the exercise at the end … code here!

Alexandre Assis

student•

@DennisC how did you make the modal close after throwing “notFound”??

Ho Tsz Him

student•

I wanted to know too.

Loading and error states

Welcome to the course

Introduction and generalities

The technologies we are going to use

What we will build

Avoiding mistakes in our code

Github for our project

Installing platforms and dependencies

The essentials

Backend architecture

Frontend Architecture

ParasailsJS

Authentication and login

User Subscription

Sessions and Data Base

Password recovery

Email verification

Contact form

Managing payment information

Creating a new page

Making our page interactive

Creating a new model

Automatic testing

Creating a new action

Using Cloud SDK

Creating custom made functions

Personalization

Permissions

Friends with associations

Advanced queries and .populate

Modals

Ajax forms

Loading and error states

Putting it all together

Uploading backend file

Uploading frontend files

Downloading files

Your turn

Growth and monetization

Building a paywall

Recurrent payment subscriptions

Notifications

Invitations (Existing Users)

Invitations (New Users)

Unclaimed Accounts

Going live

SailsJS and NodeJS Settings

Application secutiry

Cloudflare and SSL Certifications

Using a platform as a service

Deploy to Heroku

Settings to send to production

Adding variables to Heroku

Data Base Settings

Before launching

Course Closure

Bonus content

Server-side rendering with EJS

Designing your frontend with Bootstrap 4

Understanding datastores

'Pure' APIs