Ensure same data loaded for every route

@belgoros wrote:

I have an app where the template page header contains a drop-down list of about 2000 shops. When a User logged in, the list of shops he is assigned to is loaded in the above drop-down list and the first shop of the list is set as the currentShop via current-shop service. Other app routes use this currentShop instance to display some data (like a shop working hours, its address, etc.). So these routes use the currentShop id to make a request to fetch the shop’s data (address, working hours, etc.) as follows:

{+host}/shops/{shopId}/address
{+host}/shops/{shopId}/working-hours
...

The problem is that I fetch all the shops in the dashboard route to which the User is redirected once he is logged in:

# routes/dashboard.js

export default Route.extend(AuthenticatedRouteMixin, {
  currentUser: service(),
  currentShop: service(),
  shopService: service(),

  model() {
     return this.get('shopService').loadShops();
  }
});

where the shop-service looks like that:

# services/shop-service.js

export default Service.extend({
  currentShop:    service(),
  store: service(),
  shops: [],

  loadShops() {
    return this.store.findAll('shop').then(shops => {
      this.set('shops', shops);
      this.get('currentShop').setShop(shops.get('firstObject'));
    });
  }
});

and other routes just use the currentShop in their model hook to fetch data:

# routes/working-hours.js

model() {
    return this.store.query('working-hour', { shop_identifier: this.get('currentShop.shop.identifier')});
}

The error comes in case if I hit the reload the page (e.g. CMD-R) or reload the page button in the browser. In this case, I don’t have currentShop available because it is loaded in the dashboard route. How to guarantee the load/presence of the current shop for all the routes without duplicating the same call to shop-service#loadShops?

I moved the call to this.get('shopService').loadShops(); from the dashboard route to application route:

# routes/application.js

  beforeModel() {
    let locale = this.figureOutLocale();
    this.intl.setLocale(locale);
    moment.locale(locale);
    return this._loadCurrentUser();
  },
  
  model() {
    return this.get('shopService').loadShops();
  },
 async sessionAuthenticated() {
    let _super = this._super;
    await this._loadCurrentUser();
    _super.call(this, ...arguments);
  },

  _loadCurrentUser() {
    return this.get('currentUser').load().catch(() => this.get('session').invalidate());
  },
...

ans it seems to work as needed. But I lost the spinner displayed when waiting for the data fetched, - the page is white and empty until the data fetched. Any idea on how to improve that?

Posts: 4

Participants: 2

Read full topic