Ember Promises and Runloop

components.user-profile.js

import Ember from 'ember';

export default Ember.Component.extend({
  needs: ['users'],
  moods: [],
  name: Ember.computed.reads('user.name'),
  userId: Ember.computed.reads('user.userId'),
  showInfo: false,
  status: Ember.computed.mapBy('moods', 'status'),
  isLoading: false,
  error: null,
  actions: {
    getInfo: function() {
      
        var user = this.get('users');
      	this.set('isLoading', true);
        
        user.getInformation(this.get('userId'))
        .then((result) => {
          console.log('%cresolved result:', 'color: green;');
          console.log(result);
          this.set('showInfo', true);
          this.set('moods', result);
        }).catch((error) => {
          console.log('%ccatch: rejected', 'color: red;');
          this.set('error', error);
        }).finally(() => {
          this.set('isLoading', false);
        });
    }
  }
  
});

components.user-profiles.js

import appInitializer from 'demo-app/initializers/application'

var UserProfilesComponent = Ember.Component.extend({
  profiles: [
    Ember.Object.create({ name: 'james', userId: '12345' }),
    Ember.Object.create({ name: 'jesse', userId: '93456' })
  ]
  
});

export default UserProfilesComponent;

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Promises and the Run Loop'
});

initializers.application.js

import Ember from 'ember';

export default {
  name: 'users',

  initialize: function(container, application) { 
    var users = {
      getInformation: function(m) {
        // simulate some ajax request
        var p = new Ember.RSVP.Promise((resolve, reject) => {
          
            if (m === '12345') {
              setTimeout(function() {
                resolve([
                  Ember.Object.create({ status: 'bored' }),
                  Ember.Object.create({ status: 'livid'}),
                  Ember.Object.create({ status: 'whatever'})
             
                ]);              
              }, 2000);
            } else {
              setTimeout(function() {
                reject('error fetching data');
              }, 2000);     
            }
          
        });

        // create promise array
        var promiseArray = DS.PromiseArray.create({
        	promise: p
        });
        
        console.log('returning promise array');
        console.log(promiseArray);
        
        var $p = $('.promise-status[data-userId='+m+'] > .status');
        
				window._promiseInterval = setInterval(function() {
          if (promiseArray.get('isPending')) {
            $p.html('Promise is pending');
            console.log('pending');
          } else if (promiseArray.get('isSettled')) {
            console.log('settled');
            $p.html('settled');
            if (promiseArray.get('isRejected')) {
              $p.addClass('rejected')
                .html('Promise is Rejected');
            } else if (promiseArray.get('isFulfilled')) {
              $p.addClass('fulfilled')
                .html('Promise is Fulfilled');
            }
            clearInterval(window._promiseInterval);
          }

        }, 200);
        
        return promiseArray;
      }
    };

    application.register('users:main', users, { instantiate: false });
    application.inject('component', 'users', 'users:main');
  }
};

router.js

import Ember from 'ember';
var Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
});

export default Router;

styles.app.css

body { margin: 12px 16px; font-family: Futura,"Trebuchet MS",Arial,sans-serif; }
.hide { display:none;  }
.name { padding: 5px 10px; border: 1px solid #ccc; }
.show-info { background-color: #eee; border:1px solid #ccc; padding: 4px 8px; margin-top: 4px;  }
.container { display: flex; justify-content: flex-start; }
.name, .promise-status { flex: 0 1 40%; margin-bottom: 5px; position:relative; }
.fulfilled { color: green; }
.rejected, .error { color: red; }
.loading { opacity: 0.8; border-radius:50%; background: none; margin:4px 0 0 6px; height: 20px; width: 20px; display:inline-block; }
.status { position: absolute; top: 3px; left: 34px;  }
.success { background-color: green; }
.fail { background-color: red; }

/* Spinner Wave. Not important for demo */
.sp-wave{border-radius:50%; border:none; position:relative;opacity:1}.sp-wave:after,.sp-wave:before{content:'';border:1px solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}.sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}.sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}@-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}@keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}@-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}@keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}

templates.application.hbs

<h1>{{appName}}</h1>
<p>Returning DS.PromiseArray and rendering results in template</p>
{{user-profiles}}

templates.components.user-profile.hbs

<div class="container">
  <div class="name" id="{{userId}}" {{action 'getInfo'}}>
	  <div>{{name}}</div>
    <div class="{{if showInfo 'show-info' 'hide'}}">
  	  {{#each status as |stat|}}
        <div>{{stat}}</div>
      {{/each}}
    </div>
    {{#if error}}
      <div class="error">{{error}}</div>
    {{/if}}
  </div>
  <div class="promise-status" data-userId="{{userId}}">
  	
    <div class="loading 
      {{if isLoading 'sp-wave'}} 
      {{if showInfo 'success'}} 
      {{if error 'fail'}}">
    </div>

    <div class="status"></div>
  </div>
</div>

templates.components.user-profiles.hbs

{{#each profiles as |user|}}
	{{user-profile user=user}}
{{/each}}

twiddle.json

{
  "version": "0.4.7",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.7/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember-template-compiler.js"
  }
}