Loans display even on create fail

[CoreyFedde]

On my resource view, I have two components: 1) A create resource form 2) A card display for the resource that iterates through each model as resource.

This setup has been great as when I create a loan the card displays automatically catch the update and display the newest resource. However, I noticed that after submitting the create form, even if it fails from the back end, the would-be resource is displayed by the cards.

Upon refresh, the resource that was rejected by the backend disappears.

My list shouldn't displays shouldn't catch a resource that is rejected by the backend, but I'm not sure how to prevent it from showing.

[scottyscripts]

can you post the code from the route where this is firing?

[payne-chris-r]

Check out willTransition action. You need to remove the 'dirty' (unsaved) loan

[CoreyFedde]

Looking at willTransition. @sdavidson140 , which code do you want to see? The template from the card display of the items?

[CoreyFedde]

@payne-chris-r https://guides.emberjs.com/v2.12.0/routing/preventing-and-retrying-transitions/ I'm looking at willTransition, but in this case I'm not sure what is transition. My view stays the same, but the card displays update after the submit.

[CoreyFedde]

@sdavidson140 @payne-chris-r I'm still at willTransition, but I’m not sure what transition to abort or how that will affect the unsaved loan.

[CoreyFedde]

WillTransition didn't end up being needed. In the route, on catch we added a line to destroy the loan just created. This removes it before it is displayed.

createLoan(loan) {
      let newLoan = this.get('store').createRecord('loan', loan);
      newLoan.save()
      .then(() => {
        this.get('flashMessages')
        .success('Successfully created a loan!');
      })
      .catch(() => {
        this.get('flashMessages')
        .danger('There was a problem. Please try again.');
        newLoan.destroyRecord()
      });
    },