"Old-style" set-method does not trigger a rerender

I have an “old-style” currentUser-Service, which loads a current user after a successful login. Then there’s an index-route, which renders the programs of the user. Because the user-load is async, it is possible, that the index-controller’s getter programs is called before CurrentUser::user is set. If that’s the case, the index-template is not rerendered. Can somebody explain why? The user-prop is set with Ember’s set-method and therefore should be tracked. Am I right? Here’s the failing code:

// services/current-user.js
import Service, { inject as service } from '@ember/service';
import RSVP from 'rsvp';
import config from 'ember-get-config';
import { isPresent } from '@ember/utils';

export default Service.extend({
  session: service('session'),

  load() {
    if (this.get('session.isAuthenticated')) {
      let { token } = this.get('session.data.authenticated');

      return fetch(`/users?me=true`, { headers: {  'Authorization': token } })
        .then(resp => resp.json())
        .then((user) => {
          this.set('user', user); // user-property of CurrentUser-service get set with set-method
        });
    }
    else {
      return RSVP.resolve();
    }
  }
});

// controllers/index.js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { isPresent } from '@ember/utils';

export default class IndexController extends Controller {
  @service currentUser;

  get programs() {
    if (!isPresent(this.currentUser.user)) {
      return [];
    }
    return this.currentUser.user.programs.filter((program) => {
      return program.key !== 'test';
    });
  }
}

// templates/index.js
{{#each this.programs as |program|}}
  <div class="ui link card fluid">
    <div class="content">
      <i class="grey right floated {{program.icon}} icon"></i>
      <div class="header">{{program.title}}</div>
    </div>
  </div>
{{/each}}

If I create an Octane-version of the currentUser-service, it works:

import Service, { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import RSVP from 'rsvp';
import config from 'ember-get-config';
import { isPresent } from '@ember/utils';
export default class CuserService extends Service {
  @service session;
  @tracked user;

  load() {
    if (this.session.isAuthenticated) {

      let { token } = this.session.data.authenticated;

      return fetch(`/users?me=true`, { headers: {  'Authorization': token } })
        .then(resp => resp.json())
        .then((user) => {
          this.user = user;
        });
    }
    else {
      return RSVP.resolve();
    }
  }
}

4 posts - 2 participants

Read full topic