Events.ts

export class Events {

  config: Config; // Configuration of this component (mainly UI stuff)
  currentUser: User; // User is needed to fetch his event list
  events: Event[]; // Event list
  eventsCount: number; // Number of events
  searchedEvents: Event[]; // List of search results
  userUuid: string; // UUID of current user

  constructor(
    private EventsActions: EventsActions,
    private EventsStore: EventsStore,
    private UserStore: UserStore,
    private Validator: Validator
  ) {
    'ngInject';
  }

  /**
   * After the events are fetch from the API, we get the data from 
   * the EventsStore and set our component as `loadaded`, which means
   * we can remove loading screen from the template and show the event list
   * to the user.
   */
  onEventsChange() {
    this.eventsCount = this.EventsStore.getCount();
    this.events = this.EventsStore.getEvents();
    this.searchedEvents = this.EventsStore.getSearched();
    this.config.filter = this.EventsStore.getFilter();
    this.config.search = this.EventsStore.getSearch();
    this.config.isLoaded = this.EventsStore.isInitialized();
  }

  /**
   * UserStore is updated from the root component, but by the nature of asynchronous events 
   * is this app, we call this callback also explicitely from $onInit()
   */
  onUserChange() {
    // Our event administrator
    this.currentUser = this.UserStore.get();
    // If administrator is logged in, fetch his events
    if (this.currentUser && this.Validator.isUUID(this.currentUser.uuid)) {
      const filter = this.UserStore.getCurrentAccountFilter();
      this.EventsActions.fetchAll(filter);
    }
  }

  $onInit() {
    // Initialize component configuration
    this.config = this.EventsStore.getConfig();
    // Get current user from the store and fetch his events
    this.onUserChange();

    // Register event listeners
    this.EventsStore.on('change', this.onEventsChange, this);
    this.UserStore.on('change', this.onUserChange, this);
  }

  $onDestroy() {
    // Unregister event listeners
    this.EventsStore.off('change', this.onEventsChange, this);
    this.UserStore.off('change', this.onUserChange, this);
    // Remove data from the events store
    this.EventsStore.reset();
  }
}