[Feedback needed] My solution for having a generic button with success and failure states

Learning Team
1

I am still a beginner in Ember and I am currently looking to make a generic button component with multiple states.

I want the button to reflect the “waiting” status of an action, and then to have a feedback for success or failure. this code is working, I post it to have some feedback on ite

I haven’t found any example for this particular use case and this is how I solved it

The button component code :

    import Ember from 'ember';

    export default Ember.Component.extend({

      inProgress: false,
      isFailure: false,
      actionDone: false,
      actions: {
        onClick() {
          this.set('inProgress',true);
          this.get('theAction')().then(() => {
            this.set('inProgress',false)
          },() => {
            this.set('inProgress',false)
            this.set('isFailure',true)
          });
        }
      }
    });

A controller function used in the button :

    import Ember from 'ember';

    export default Ember.Controller.extend({
      actions:{
        saveLicenceVersion(licenceVersion) {
          return new Ember.RSVP.Promise((resolve, reject) => {
            var file = document.getElementById('file-field').files[0];
            licenceVersion.set('document',file);
            licenceVersion.save().then(() => {
                resolve();
              },() => {
                reject();
              }
            )
          })
        }
      }
    });

The booleans from the component are used in the component template to alter the display. With this solution I can easily reuse the component by having my function return promises. I will probably add value to resolve and reject to handle error messages

What do you think about this approach? Is it a good “ember way” of doing it?