kmaraz

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(

kmaraz

<div id="module-events">
  <div ng-show="!$ctrl.config.isLoaded">
    <div class="spinner">Loading...</div>
  </div>

  <div ng-show="$ctrl.config.isLoaded && !$ctrl.config.search">
    <!-- No events -->
    <div ng-show="$ctrl.eventsCount === 0">
      No events for you.
    </div>

kmaraz

export class EventsActions {

  constructor(
    private ActionTypes: ActionTypes, // List of actions we can do in our app
    private Dispatcher: FluxDispatcher, // Dispatcher from vendor
    private API: API, 
    private Reporter: Reporter, // New Relic or stuff
    private Notifications: Notifications, 
    private ngDialog: Dialog
  ) {

kmaraz

/**
 * ListStore is our custom implementation of general Store,
 * which handles manipulation with collections. List store also
 * extends the EventEmitter, so it can notify the views about
 * its change.
 */
export class EventsStore extends ListStore<Event> {

  private config: Config;

kmaraz

// The original AngularJs application
const ngModule = angular.module('admin', [
  // We are leaving all the old module untouched
  'ng1.modules',
  // We can downgrade Components, Directives, Services, etc.
  // And use them in the AngularJs app
  'ng2.modules'
]);

@NgModule({

kmaraz

<div id="module-events">
  <div *ngIf="!config.isLoaded">
    <div class="spinner">Loading...</div>
  </div>

  <div *ngIf="config.isLoaded && !config.search">
    <!-- No events -->
    <div *ngIf="eventsCount === 0">
      No events for you.
    </div>

kmaraz

@Component({
  selector: 'events',
  templateUrl: './events.component.html'
})
export class EventsComponent implements OnDestroy, OnInit {

  events: Event[]; // Event list
  private eventsSub: Subscription;

  constructor(

kmaraz

export const DELETE_EVENT = '[Events] DELETE_EVENT';
export const SELECT_EVENT = '[Events] SELECT_EVENT';
export const RESET = '[Events] RESET';

export class DeleteEvent implements Action {
  readonly type = DELETE_EVENT;
  constructor(public payload: PayloadEvent) { }
}

export class SelectEvent implements Action {

kmaraz

@Injectable()
export class EvnetsEffects implements RegisterEffects {

  // Effects would not work by default in the hybrid application,
  // therefore we need to preload them during the bootstrap of our app.
  // See: app.module.ts and app.effects.ts examples.
  @Effect()
  deleteEvent$: Observable<EventsActions.All> = this.actions$
    .ofType<EventsActions.DeleteEvent>(EventsActions.DELETE_EVENT)
    .pipe(

kmaraz

export function reducer(state: EventsState = initialState, action: Action): EventsState {
  switch (action.type) {
    case EventsActions.UPDATE: {
      // Clone the oridinal state to be sure, not to update the object reference
      const newState = cloneDeep(state);
      newState.events = action.payload;
      return newState;
    }
    case EventsActions.RESET: {
      return cloneDeep(initialState);