refactor(store): Centralize store

package.json

@@ -26,6 +26,7 @@
     "@angular/router": "6.1.0",
     "@angular/service-worker": "6.1.0",
     "@ngrx/effects": "^6.0.1",
+    "@ngrx/entity": "^6.1.0",
     "@ngrx/router-store": "^6.0.1",
     "@ngrx/store": "^6.0.1",
     "@ngrx/store-devtools": "^6.0.1",

src/app/app.module.ts

@@ -3,13 +3,6 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
-import { EffectsModule } from '@ngrx/effects';
-import {
-  RouterStateSerializer,
-  StoreRouterConnectingModule
-} from '@ngrx/router-store';
-import { StoreModule } from '@ngrx/store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { CookieModule } from 'ngx-cookie';
 import { MarkdownModule } from 'ngx-markdown';
 import { environment } from './../environments/environment';
@@ -18,7 +11,7 @@ import { AppComponent } from './core/containers/app/app.component';
 import { CoreModule } from './core/core.module';
 import { SteemconnectConfig } from './steemconnect/config';
 import { SteemconnectModule } from './steemconnect/steemconnect.module';
-import * as fromStore from './store';
+import { RootStoreModule } from './store/root-store.module';
 
 @NgModule({
   imports: [
@@ -33,21 +26,10 @@ import * as fromStore from './store';
       environment.steemConnectConfig as SteemconnectConfig
     ),
     AppRoutingModule,
-    StoreModule.forRoot(fromStore.reducers),
-    StoreDevtoolsModule.instrument({
-      maxAge: 10,
-      logOnly: environment.production
-    }),
-    StoreRouterConnectingModule.forRoot({
-      stateKey: 'router'
-    }),
-    EffectsModule.forRoot(fromStore.effects),
+    RootStoreModule,
     CookieModule.forRoot(),
     MarkdownModule.forRoot()
   ],
-  providers: [
-    { provide: RouterStateSerializer, useClass: fromStore.CustomSerializer }
-  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/core/containers/app/app.component.html

@@ -7,7 +7,7 @@
     </span>
 
     <span fxFlex class="toolbar__button">
-      <app-log-in-out [isAuthenticated]="isAuthenticated$ | async" [isLoggingOut]="isLoggingOut$ | async" (login)="login()" (logout)="logout()"></app-log-in-out>
+      <app-log-in-out [isAuthenticated]="!!(currentUser$ | async)" [isLoggingOut]="isLoggingOut$ | async" (login)="login()" (logout)="logout()"></app-log-in-out>
     </span>
   </mat-toolbar-row>
 

src/app/core/containers/app/app.component.ts

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
-import * as fromStore from '../../../store';
+import { selectCurrentUser, selectLoggingOut } from '../../../store/auth-store';
+import { State } from '../../../store/root-state';
+import { authActionCreators } from './../../../store/auth-store/actions';
 
 @Component({
   selector: 'app-root',
@@ -10,22 +12,21 @@ import * as fromStore from '../../../store';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent implements OnInit {
-  isAuthenticated$: Observable<boolean>;
+  currentUser$: Observable<string | null>;
   isLoggingOut$: Observable<boolean>;
 
-  constructor(private store: Store<fromStore.State>) {}
+  constructor(private store: Store<State>) {}
 
   ngOnInit() {
-    this.store.dispatch(fromStore.authenticate());
-    this.isAuthenticated$ = this.store.select(fromStore.selectAuthenticated);
-    this.isLoggingOut$ = this.store.select(fromStore.selectLoggingOut);
+    this.currentUser$ = this.store.select(selectCurrentUser);
+    this.isLoggingOut$ = this.store.select(selectLoggingOut);
   }
 
   login() {
-    this.store.dispatch(fromStore.login());
+    this.store.dispatch(authActionCreators.login());
   }
 
   logout() {
-    this.store.dispatch(fromStore.logout());
+    this.store.dispatch(authActionCreators.logout());
   }
 }

src/app/drafts/containers/drafts/drafts.component.html

@@ -23,6 +23,6 @@
 
 </div>
 
-<button mat-fab class="drafts__fab" ngClass.lt-md="drafts__fab--mobile" (click)="openNewDraftDialog()">
+<button mat-fab class="drafts__fab" ngClass.lt-md="drafts__fab--mobile" (click)="createDraft()">
   <mat-icon>add</mat-icon>
 </button>

src/app/drafts/containers/drafts/drafts.component.ts

@@ -1,12 +1,15 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
-import * as fromRootStore from '../../../store';
-import { NewDraftDialogComponent } from '../../components/new-draft-dialog/new-draft-dialog.component';
-import * as fromTemplates from '../../templates';
-import { Draft } from './../../models/draft.model';
-import * as fromFeatureStore from './../../store';
+import {
+  Draft,
+  draftsActionCreators,
+  selectAllDrafts,
+  selectLoaded,
+  selectLoading
+} from '../../../store/drafts-store';
+import { State } from '../../../store/root-state';
+import { routerActionCreators } from './../../../store/router-store';
 
 @Component({
   selector: 'app-drafts',
@@ -19,42 +22,24 @@ export class DraftsComponent implements OnInit {
   areLoading$: Observable<boolean>;
   areLoaded$: Observable<boolean>;
 
-  constructor(
-    public dialog: MatDialog,
-    private store: Store<fromFeatureStore.State>
-  ) {}
+  constructor(private store: Store<State>) {}
 
   ngOnInit() {
-    this.drafts$ = this.store.select(fromFeatureStore.selectAllDrafts);
-    this.areLoading$ = this.store.select(fromFeatureStore.selectDraftsLoading);
-    this.areLoaded$ = this.store.select(fromFeatureStore.selectDraftsLoaded);
-    this.store.dispatch(fromFeatureStore.loadDrafts());
+    this.drafts$ = this.store.select(selectAllDrafts);
+    this.areLoading$ = this.store.select(selectLoading);
+    this.areLoaded$ = this.store.select(selectLoaded);
+    this.store.dispatch(draftsActionCreators.loadDrafts());
   }
 
   editDraft(id: number) {
-    this.store.dispatch(new fromRootStore.Go({ path: ['/drafts', id] }));
+    this.store.dispatch(routerActionCreators.go({ path: ['/drafts', id] }));
   }
 
   removeDraft(id: number) {
-    this.store.dispatch(fromFeatureStore.removeDraft(id));
+    this.store.dispatch(draftsActionCreators.removeDraft(id));
   }
 
-  openNewDraftDialog() {
-    this.dialog
-      .open(NewDraftDialogComponent, {
-        data: {
-          all: [...fromTemplates.all],
-          entities: { ...fromTemplates.entities }
-        },
-        width: '400px'
-      })
-      .afterClosed()
-      .subscribe(result => {
-        // clicking out of the dialog window returns undefined
-        // we want to dispatch an action only if user clicked 'Create':
-        if (result) {
-          this.store.dispatch(fromFeatureStore.createDraft(result));
-        }
-      });
+  createDraft() {
+    this.store.dispatch(draftsActionCreators.createDraft());
   }
 }

src/app/drafts/containers/editor-container/editor-container.component.html

@@ -6,4 +6,4 @@
   <app-editor (whenSubmit)="broadcast($event)"></app-editor>
 </ng-template>
 
-<mat-spinner *ngIf="(broadcastState$ | async)?.broadcasting"></mat-spinner>
+<mat-spinner *ngIf="isBroadcasting$ | async"></mat-spinner>