Add user data and display it with items and widgets on home page

jdgarvey · jdgarvey · commit add9f4e6168c · 2018-08-24T07:26:25.000-07:00
diff --git a/apps/dashboard/src/app/home/home.component.css b/apps/dashboard/src/app/home/home.component.css
@@ -0,0 +1,10 @@
+.row {
+  flex-basis: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+h1 {
+  flex-basis: 100%;
+  padding: 10px;
+}
diff --git a/apps/dashboard/src/app/home/home.component.html b/apps/dashboard/src/app/home/home.component.html
@@ -1,11 +1,11 @@
 <div class="container">
-  <div class="col-50">
-    <app-items-total [items]="items$ | async"></app-items-total>
-    <app-items-list [items]="items$ | async" [readonly]="true"></app-items-list>
-  </div>
-
-  <div class="col-50">
-    <app-widgets-total [widgets]="widgets$ | async"></app-widgets-total>
-    <app-widgets-list [widgets]="widgets$ | async" [readonly]="true"></app-widgets-list>
+  <div class="row" *ngFor="let user of users$ | async">
+    <h1>{{user.name}}</h1>
+    <div class="col">
+      <app-items-total [items]="user.items"></app-items-total>
+      <app-widgets-total [widgets]="user.widgets"></app-widgets-total>
+    </div>
+    <app-items-list class="col" [items]="user.items" [readonly]="true"></app-items-list>
+    <app-widgets-list class="col" [widgets]="user.widgets" [readonly]="true"></app-widgets-list>
   </div>
 </div>
diff --git a/apps/dashboard/src/app/home/home.component.ts b/apps/dashboard/src/app/home/home.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Item, ItemsFacade, Widget, WidgetsFacade } from '@workspace/common-data';
+import { Item, ItemsFacade, User, UsersFacade, Widget, WidgetsFacade } from '@workspace/common-data';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -9,16 +9,17 @@ import { Observable } from 'rxjs';
 
 })
 export class HomeComponent implements OnInit {
-  items$: Observable<Item[]> = this.itemsFacade.allItems$;
-  widgets$: Observable<Widget[]> = this.widgetsFacade.allWidgets$;
+  users$: Observable<User[]> = this.usersFacade.allUsers$;
 
   constructor(
+    private usersFacade: UsersFacade,
     private itemsFacade: ItemsFacade,
     private widgetsFacade: WidgetsFacade
   ) {}
 
   ngOnInit() {
     this.itemsFacade.loadAll();
     this.widgetsFacade.loadAll();
+    this.usersFacade.loadUsers();
   }
 }
diff --git a/libs/common-data/src/index.ts b/libs/common-data/src/index.ts
@@ -6,5 +6,8 @@ export { ItemsService } from './lib/core/items/items.service';
 export { Widget } from './lib/core/widgets/widget.model';
 export { WidgetsService } from './lib/core/widgets/widgets.service';
 
+export { User } from './lib/core/users/users.model';
+
 export { ItemsFacade } from './lib/state/items/items.facade';
 export { WidgetsFacade } from './lib/state/widgets/widgets.facade';
+export { UsersFacade } from './lib/state/users/users.facade';
diff --git a/libs/common-data/src/lib/core/users/users.model.ts b/libs/common-data/src/lib/core/users/users.model.ts
@@ -0,0 +1,6 @@
+export interface User {
+  id: string;
+  name: string;
+  items: any[];
+  widgets: any[];
+}
diff --git a/libs/common-data/src/lib/core/users/users.service.spec.ts b/libs/common-data/src/lib/core/users/users.service.spec.ts
@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { UsersService } from './users.service';
+
+describe('UsersService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [UsersService]
+    });
+  });
+
+  it(
+    'should be created',
+    inject([UsersService], (service: UsersService) => {
+      expect(service).toBeTruthy();
+    })
+  );
+});
diff --git a/libs/common-data/src/lib/core/users/users.service.ts b/libs/common-data/src/lib/core/users/users.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+const BASE_URL = 'http://localhost:3000/users/';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UsersService {
+  constructor(private http: HttpClient) {}
+
+  all() {
+    return this.http.get(BASE_URL);
+  }
+}
diff --git a/libs/common-data/src/lib/state/index.ts b/libs/common-data/src/lib/state/index.ts
@@ -5,15 +5,18 @@ import {
 } from '@ngrx/store';
 import * as fromItems from './items/items.reducer';
 import * as fromWidgets from './widgets/widgets.reducer';
+import * as fromUsers from './users/users.reducer';
 
 export interface AppState {
   items: fromItems.ItemsState;
-  widgets: fromWidgets.WidgetsState
+  widgets: fromWidgets.WidgetsState,
+  users: fromUsers.UsersState
 }
 
 export const reducers: ActionReducerMap<AppState> = {
   items: fromItems.itemsReducer,
-  widgets: fromWidgets.widgetsReducer
+  widgets: fromWidgets.widgetsReducer,
+  users: fromUsers.usersReducer
 };
 
 // -------------------------------------------------------------------
@@ -85,3 +88,26 @@ export const selectCurrentWidget = createSelector(
     return widgetId ? widgetEntities[widgetId] : emptyWidget;
   }
 );
+
+// -------------------------------------------------------------------
+// USERS SELECTORS
+// -------------------------------------------------------------------
+export const selectUserUsersState = createFeatureSelector<fromUsers.UsersState>('users');
+
+export const selectAllUsers = createSelector(
+  selectUserUsersState,
+  fromUsers.selectAllUsers
+);
+
+export const selectUsersDetails = createSelector(
+  selectAllUsers,
+  selectItemEntities,
+  selectWidgetEntities,
+  (users, itemEntities, widgetEntities) => {
+    return users.map(u => ({
+      ...u,
+      items: u.items.map(itemId => itemEntities[itemId]),
+      widgets: u.widgets.map(widgetId => widgetEntities[widgetId])
+    }));
+  }
+);
diff --git a/libs/common-data/src/lib/state/items/items.facade.spec.ts b/libs/common-data/src/lib/state/items/items.facade.spec.ts
@@ -16,7 +16,7 @@ interface TestSchema {
   'items' : ItemsState
 }
 
-fdescribe('ItemsFacade', () => {
+fdescribe('UsersFacade', () => {
   let facade: ItemsFacade;
   let store: Store<TestSchema>;
   let createItem;
diff --git a/libs/common-data/src/lib/state/state.module.ts b/libs/common-data/src/lib/state/state.module.ts
@@ -8,14 +8,15 @@ import { NxModule } from '@nrwl/nx';
 import { reducers } from './index';
 import { ItemsEffects } from './items/items.effects';
 import { WidgetsEffects } from './widgets/widgets.effects';
+import { UsersEffects } from './users/users.effects';
 
 @NgModule({
   imports: [
     CommonModule,
     NxModule.forRoot(),
     StoreModule.forRoot(reducers),
     StoreDevtoolsModule.instrument({ maxAge: 5 }),
-    EffectsModule.forRoot([ItemsEffects, WidgetsEffects]),
+    EffectsModule.forRoot([ItemsEffects, WidgetsEffects, UsersEffects]),
   ],
   declarations: []
 })
diff --git a/libs/common-data/src/lib/state/users/users.actions.ts b/libs/common-data/src/lib/state/users/users.actions.ts
@@ -0,0 +1,18 @@
+import { Action } from '@ngrx/store';
+
+export enum UsersActionTypes {
+  LoadUsers = '[Users] Load Data',
+  UsersLoaded = '[Users] Data Loaded'
+}
+
+export class LoadUsers implements Action {
+  readonly type = UsersActionTypes.LoadUsers;
+  constructor() {}
+}
+
+export class UsersLoaded implements Action {
+  readonly type = UsersActionTypes.UsersLoaded;
+  constructor(public payload: any) {}
+}
+
+export type UsersActions = LoadUsers | UsersLoaded;
diff --git a/libs/common-data/src/lib/state/users/users.effects.spec.ts b/libs/common-data/src/lib/state/users/users.effects.spec.ts
@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+import { StoreModule } from '@ngrx/store';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { DataPersistence } from '@nrwl/nx';
+import { hot } from '@nrwl/nx/testing';
+
+import { UsersEffects } from './users.effects';
+import { LoadUsers, UsersLoaded } from './users.actions';
+
+import { Observable } from 'rxjs';
+
+describe('UsersEffects', () => {
+  let actions$: Observable<any>;
+  let effects$: UsersEffects;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [StoreModule.forRoot({})],
+      providers: [
+        UsersEffects,
+        DataPersistence,
+        provideMockActions(() => actions$)
+      ]
+    });
+
+    effects$ = TestBed.get(UsersEffects);
+  });
+
+  describe('someEffect', () => {
+    it('should work', () => {
+      actions$ = hot('-a-|', { a: new LoadUsers({}) });
+      expect(effects$.loadUsers$).toBeObservable(
+        hot('-a-|', { a: new UsersLoaded({}) })
+      );
+    });
+  });
+});
diff --git a/libs/common-data/src/lib/state/users/users.effects.ts b/libs/common-data/src/lib/state/users/users.effects.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Actions, Effect } from '@ngrx/effects';
+import {
+  UsersActionTypes,
+  LoadUsers,
+  UsersLoaded
+} from './users.actions';
+import { UsersState } from './users.reducer';
+import { DataPersistence } from '@nrwl/nx';
+import { map } from 'rxjs/operators';
+import { UsersService } from '../../core/users/users.service';
+import { User } from '../../core/users/users.model';
+
+@Injectable()
+export class UsersEffects {
+  @Effect()
+  loadUsers$ = this.dataPersistence.fetch(UsersActionTypes.LoadUsers, {
+    run: (action: LoadUsers, state: UsersState) => {
+      return this.usersService.all().pipe(map((res: User[]) => new UsersLoaded(res)))
+    },
+
+    onError: (action: LoadUsers, error) => {
+      console.error('Error', error);
+    }
+  });
+
+  constructor(
+    private actions$: Actions,
+    private dataPersistence: DataPersistence<UsersState>,
+    private usersService: UsersService
+  ) {}
+}
diff --git a/libs/common-data/src/lib/state/users/users.facade.ts b/libs/common-data/src/lib/state/users/users.facade.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+
+import * as UsersActions from './users.actions';
+import { UsersState } from './users.reducer';
+import { selectUsersDetails } from '..';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UsersFacade {
+  allUsers$ = this.store.pipe(select(selectUsersDetails));
+
+  constructor(private store: Store<UsersState>) {}
+
+  loadUsers() {
+    this.store.dispatch(new UsersActions.LoadUsers());
+  }
+}
diff --git a/libs/common-data/src/lib/state/users/users.reducer.spec.ts b/libs/common-data/src/lib/state/users/users.reducer.spec.ts
@@ -0,0 +1,10 @@
+import { UsersLoaded } from './users.actions';
+import { usersReducer, initialState } from './users.reducer';
+
+describe('usersReducer', () => {
+  it('should work', () => {
+    const action: UsersLoaded = new UsersLoaded({});
+    const actual = usersReducer(initialState, action);
+    expect(actual).toEqual({});
+  });
+});
diff --git a/libs/common-data/src/lib/state/users/users.reducer.ts b/libs/common-data/src/lib/state/users/users.reducer.ts
@@ -0,0 +1,42 @@
+import { Action } from '@ngrx/store';
+import { UsersActions, UsersActionTypes } from './users.actions';
+import { User } from '../../core/users/users.model';
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
+
+/**
+ * Interface to the part of the Store containing UsersState
+ * and other information related to User.
+ */
+export interface UsersState extends EntityState<User> {}
+
+export const adapter: EntityAdapter<User> = createEntityAdapter<User>();
+export const initialState: UsersState = adapter.getInitialState();
+
+export function usersReducer(
+  state = initialState,
+  action: UsersActions
+): UsersState {
+  switch (action.type) {
+    case UsersActionTypes.UsersLoaded: {
+      return adapter.addAll(action.payload, state);
+    }
+
+    default:
+      return state;
+  }
+}
+
+// get the selectors
+const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors();
+
+// select the array of widget ids
+export const selectUserIds = selectIds;
+
+// select the dictionary of widget entities
+export const selectUserEntities = selectEntities;
+
+// select the array of widgets
+export const selectAllUsers = selectAll;
+
+// select the total widget count
+export const selectUserTotal = selectTotal;
diff --git a/server/api/db.json b/server/api/db.json
@@ -86,5 +86,25 @@
       "price": 700,
       "description": "This is a violet widget"
     }
+  ],
+  "users": [
+    {
+      "id": "1",
+      "name": "Jonathan Garvey",
+      "items": ["7", "6", "5"],
+      "widgets": ["1", "2", "3"]
+    },
+    {
+      "id": "2",
+      "name": "Lukas Ruebbelke",
+      "items": ["4", "3"],
+      "widgets": ["4", "5"]
+    },
+    {
+      "id": "3",
+      "name": "Rob Wormald",
+      "items": ["2", "1"],
+      "widgets": ["6", "7"]
+    }
   ]
 }

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ interface TestSchema {`
`16`	`16`	`'items' : ItemsState`
`17`	`17`	`}`
`18`	`18`
`19`		`-fdescribe('ItemsFacade', () => {`
	`19`	`+fdescribe('UsersFacade', () => {`
`20`	`20`	`let facade: ItemsFacade;`
`21`	`21`	`let store: Store<TestSchema>;`
`22`	`22`	`let createItem;`