darrenmothersele

import {
    AfterViewInit,
    Component,
    ElementRef,
    EventEmitter,
    Input,
    OnDestroy,
    OnInit,
    Output,
    ViewChild

darrenmothersele

:host {
  width: 24px;
  height: 128px;
  display: inline-block;
  cursor: pointer;
}
text {
  font-size: 8px;
  text-transform: uppercase;
  font-weight: bold;

darrenmothersele

<svg viewBox="0 0 24 128" #slider>
  <text y="-4"
        fill="lightgrey" class="slider-text"
        *ngIf="!!label"
        transform="rotate(90)">{{ label }}</text>
  <path d="M 12 0 v 128" fill="none" stroke="grey"></path>
  <circle r="4" cx="12" [attr.cy]="cursorPt.y" fill="currentColor"></circle>
</svg>

darrenmothersele

  case actions.LOAD_SUMMARY_SUCCESS:
      return userAdapter.addMany(action.users, state);

  case actions.LOAD_DETAIL:
      return { ...state, selectedUserId: action.id };

  case actions.LOAD_DETAIL_SUCCESS:
      if (!!state.entities[action.user.id]) {
          return userAdapter.updateOne({
              id: action.user.id,

darrenmothersele

export const userAdapter = createEntityAdapter<Partial<User>>();
export interface State extends EntityState<Partial<User>> {
    selectedUserId: number;
}

const initialState: State = userAdapter.getInitialState({
    selectedUserId: null
});

darrenmothersele

export class LoadSummaryAction implements Action {
    readonly type = LOAD_SUMMARY;
}
export class LoadSummarySuccessAction implements Action {
    readonly type = LOAD_SUMMARY_SUCCESS;
    constructor(public users: Partial<User>[]) {}
}

export class LoadDetailAction implements Action {
    readonly type = LOAD_DETAIL;

darrenmothersele

<div class="columns is-multiline is-mobile"
     *ngIf="!(isLoading$ | async); else loading">
    <div class="column is-one-third" *ngFor="let user of users$ | async">
        <app-contact-card [user]="user"></app-contact-card>
    </div>
</div>

<ng-template #loading>Loading users...</ng-template>

darrenmothersele

export class ContactListComponent implements OnInit {

    /* Container component */

    isLoading$: Observable<boolean>;
    users$: Observable<User[]>;

    constructor(private store: Store<fromStore.State>) {
        this.isLoading$ = store.select(fromStore.getUsersLoading);
        this.users$ = store.select(fromStore.getUsers);

darrenmothersele

StoreModule.forRoot(reducers),
!environment.production ? StoreDevtoolsModule.instrument() : [],
EffectsModule.forRoot([
    UsersEffect,
    UserDetailsEffect
])

darrenmothersele

export class UsersEffect {

    constructor(
        private actions$: Actions,
        private userService: UserService
    ) {}

    @Effect()
    loadUsers$: Observable<Action> = this.actions$
        .ofType(userActions.LOAD)