refactor(example): remove @ngrx/db

add localStorage replacement

Author: King-i

package.json

@@ -94,7 +94,6 @@
     "@angular/router": "^7.0.1",
     "@applitools/eyes-cypress": "^3.4.12",
     "@bazel/buildifier": "^0.22.0",
-    "@ngrx/db": "^2.2.0-beta.0",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
     "opencollective": "^1.0.3",

projects/example-app-cypress/integration/round-trip.spec.ts

@@ -1,14 +1,34 @@
+let LOCAL_STORAGE_MEMORY = {};
+
+Cypress.Commands.add('saveLocalStorage', () => {
+  Object.keys(localStorage).forEach(key => {
+    LOCAL_STORAGE_MEMORY[key] = localStorage[key];
+  });
+});
+
+Cypress.Commands.add('restoreLocalStorage', () => {
+  Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
+    localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
+  });
+});
+
 context('Full round trip', () => {
   before(() => {
     (cy as any).eyesOpen({
       appName: 'books_app',
       testName: 'round-trip',
       browser: { width: 800, height: 600 },
     });
-    window.indexedDB.deleteDatabase('books_app');
+    window.localStorage.removeItem('books_app');
     cy.visit('/');
   });
+  beforeEach(() => {
+    (cy as any).restoreLocalStorage();
+  });
 
+  afterEach(() => {
+    (cy as any).saveLocalStorage();
+  });
   after(() => {
     (cy as any).eyesClose();
   });

projects/example-app/README.md

@@ -3,8 +3,7 @@
 Example application utilizing @ngrx libraries, showcasing common patterns and best practices. Try it on [StackBlitz](https://ngrx.github.io/platform/stackblitz.html).
 
 This app is a book collection manager. The user can authenticate, use the Google Books API to search for
-books and add them to their collection. This application utilizes [@ngrx/db](https://github.com/ngrx/db)
-to persist the collection across sessions; [@ngrx/store](../../docs/store/README.md) to manage
+books and add them to their collection. This application utilizes [@ngrx/store](../../docs/store/README.md to manage
 the state of the app and to cache requests made to the Google Books API;
 [@ngrx/effects](../../docs/effects/README.md) to isolate side effects; [@angular/router](https://github.com/angular/angular) to manage navigation between routes; [@angular/material](https://github.com/angular/material2) to provide design and styling.
 
@@ -17,7 +16,6 @@ Built with [@angular/cli](https://github.com/angular/angular-cli)
 - [@ngrx/router-store](../../docs/router-store/README.md) - Bindings to connect the Angular Router to @ngrx/store
 - [@ngrx/entity](../../docs/entity/README.md) - Entity State adapter for managing record collections.
 - [@ngrx/store-devtools](../../docs/store-devtools/README.md) - Instrumentation for @ngrx/store enabling time-travel debugging
-- [@ngrx/db](https://github.com/ngrx/db) - RxJS powered IndexedDB for Angular apps
 - [@angular/router](https://github.com/angular/angular) - Angular Router
 - [@angular/material](https://github.com/angular/material2) - Angular Material
 - [jest](https://facebook.github.io/jest/) - JavaScript test runner with easy setup, isolated browser testing and snapshot testing

projects/example-app/src/app/app.module.ts

@@ -6,15 +6,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
-import { DBModule } from '@ngrx/db';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 import { CoreModule } from '@example-app/core/core.module';
 import { AuthModule } from '@example-app/auth/auth.module';
 
 import { reducers, metaReducers } from '@example-app/reducers';
-import { schema } from '@example-app/db';
 
 import { AppComponent } from '@example-app/core/containers/app.component';
 import { AppRoutingModule } from '@example-app/app-routing.module';
@@ -68,12 +66,6 @@ import { AppRoutingModule } from '@example-app/app-routing.module';
      */
     EffectsModule.forRoot([]),
 
-    /**
-     * `provideDB` sets up @ngrx/db with the provided schema and makes the Database
-     * service available.
-     */
-    DBModule.provideDB(schema),
-
     CoreModule,
   ],
   bootstrap: [AppComponent],

projects/example-app/src/app/books/effects/collection.effects.spec.ts

@@ -1,20 +1,24 @@
 import { TestBed } from '@angular/core/testing';
-import { Database } from '@ngrx/db';
 import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { cold, hot } from 'jasmine-marbles';
-import { empty, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import {
   CollectionApiActions,
   SelectedBookPageActions,
   CollectionPageActions,
 } from '@example-app/books/actions';
 import { Book } from '@example-app/books/models/book';
-import { CollectionEffects } from '@example-app/books/effects/collection.effects';
+import { CollectionEffects } from './collection.effects';
+import {
+  IBookStorageService,
+  BookStorageService,
+  LOCAL_STORAGE_TOKEN,
+} from '@example-app/core/services/book-storage.service';
 
 describe('CollectionEffects', () => {
-  let db: any;
+  let db: IBookStorageService;
   let effects: CollectionEffects;
   let actions$: Observable<any>;
 
@@ -26,30 +30,37 @@ describe('CollectionEffects', () => {
       providers: [
         CollectionEffects,
         {
-          provide: Database,
+          provide: BookStorageService,
+          useValue: {
+            supported: jest.fn(),
+            deleteStoredCollection: jest.fn(),
+            addToCollection: jest.fn(),
+            getCollection: jest.fn(),
+            removeFromCollection: jest.fn(),
+          },
+        },
+        {
+          provide: LOCAL_STORAGE_TOKEN,
           useValue: {
-            open: jest.fn(),
-            query: jest.fn(),
-            insert: jest.fn(),
-            executeWrite: jest.fn(),
+            removeItem: jest.fn(),
+            setItem: jest.fn(),
+            getItem: jest.fn(_ => JSON.stringify([])),
           },
         },
         provideMockActions(() => actions$),
       ],
     });
 
-    db = TestBed.get(Database);
+    db = TestBed.get(BookStorageService);
     effects = TestBed.get(CollectionEffects);
     actions$ = TestBed.get(Actions);
   });
-
-  describe('openDB$', () => {
-    it('should call db.open when initially subscribed to', () => {
-      effects.openDB$.subscribe();
-      expect(db.open).toHaveBeenCalledWith('books_app');
+  describe('checkStorageSupport$', () => {
+    it('should call db.checkStorageSupport when initially subscribed to', () => {
+      effects.checkStorageSupport$.subscribe();
+      expect(db.supported).toHaveBeenCalled();
     });
   });
-
   describe('loadCollection$', () => {
     it('should return a collection.LoadSuccess, with the books, on success', () => {
       const action = CollectionPageActions.loadCollection();
@@ -58,9 +69,9 @@ describe('CollectionEffects', () => {
       });
 
       actions$ = hot('-a', { a: action });
-      const response = cold('-a-b|', { a: book1, b: book2 });
-      const expected = cold('-----c', { c: completion });
-      db.query = jest.fn(() => response);
+      const response = cold('-a|', { a: [book1, book2] });
+      const expected = cold('--c', { c: completion });
+      db.getCollection = jest.fn(() => response);
 
       expect(effects.loadCollection$).toBeObservable(expected);
     });
@@ -73,7 +84,7 @@ describe('CollectionEffects', () => {
       actions$ = hot('-a', { a: action });
       const response = cold('-#', {}, error);
       const expected = cold('--c', { c: completion });
-      db.query = jest.fn(() => response);
+      db.getCollection = jest.fn(() => response);
 
       expect(effects.loadCollection$).toBeObservable(expected);
     });
@@ -87,10 +98,10 @@ describe('CollectionEffects', () => {
       actions$ = hot('-a', { a: action });
       const response = cold('-b', { b: true });
       const expected = cold('--c', { c: completion });
-      db.insert = jest.fn(() => response);
+      db.addToCollection = jest.fn(() => response);
 
       expect(effects.addBookToCollection$).toBeObservable(expected);
-      expect(db.insert).toHaveBeenCalledWith('books', [book1]);
+      expect(db.addToCollection).toHaveBeenCalledWith([book1]);
     });
 
     it('should return a collection.AddBookFail, with the book, when the db insert throws', () => {
@@ -101,7 +112,7 @@ describe('CollectionEffects', () => {
       actions$ = hot('-a', { a: action });
       const response = cold('-#', {}, error);
       const expected = cold('--c', { c: completion });
-      db.insert = jest.fn(() => response);
+      db.addToCollection = jest.fn(() => response);
 
       expect(effects.addBookToCollection$).toBeObservable(expected);
     });
@@ -116,12 +127,10 @@ describe('CollectionEffects', () => {
         actions$ = hot('-a', { a: action });
         const response = cold('-b', { b: true });
         const expected = cold('--c', { c: completion });
-        db.executeWrite = jest.fn(() => response);
+        db.removeFromCollection = jest.fn(() => response);
 
         expect(effects.removeBookFromCollection$).toBeObservable(expected);
-        expect(db.executeWrite).toHaveBeenCalledWith('books', 'delete', [
-          book1.id,
-        ]);
+        expect(db.removeFromCollection).toHaveBeenCalledWith([book1.id]);
       });
 
       it('should return a collection.RemoveBookFail, with the book, when the db insert throws', () => {
@@ -134,12 +143,10 @@ describe('CollectionEffects', () => {
         actions$ = hot('-a', { a: action });
         const response = cold('-#', {}, error);
         const expected = cold('--c', { c: completion });
-        db.executeWrite = jest.fn(() => response);
+        db.removeFromCollection = jest.fn(() => response);
 
         expect(effects.removeBookFromCollection$).toBeObservable(expected);
-        expect(db.executeWrite).toHaveBeenCalledWith('books', 'delete', [
-          book1.id,
-        ]);
+        expect(db.removeFromCollection).toHaveBeenCalledWith([book1.id]);
       });
     });
   });

projects/example-app/src/app/books/effects/collection.effects.ts

@@ -1,16 +1,15 @@
 import { Injectable } from '@angular/core';
-import { Database } from '@ngrx/db';
-import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Action } from '@ngrx/store';
-import { defer, Observable, of } from 'rxjs';
-import { catchError, map, mergeMap, switchMap, toArray } from 'rxjs/operators';
-
-import { Book } from '@example-app/books/models/book';
 import {
-  SelectedBookPageActions,
-  CollectionPageActions,
   CollectionApiActions,
+  CollectionPageActions,
+  SelectedBookPageActions,
 } from '@example-app/books/actions';
+import { Book } from '@example-app/books/models/book';
+import { BookStorageService } from '@example-app/core/services/book-storage.service';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+import { defer, Observable, of } from 'rxjs';
+import { catchError, map, mergeMap, switchMap } from 'rxjs/operators';
 
 @Injectable()
 export class CollectionEffects {
@@ -25,16 +24,15 @@ export class CollectionEffects {
    * effect easier to test.
    */
   @Effect({ dispatch: false })
-  openDB$: Observable<any> = defer(() => {
-    return this.db.open('books_app');
-  });
+  checkStorageSupport$: Observable<any> = defer(() =>
+    this.storageService.supported()
+  );
 
   @Effect()
   loadCollection$: Observable<Action> = this.actions$.pipe(
     ofType(CollectionPageActions.loadCollection.type),
     switchMap(() =>
-      this.db.query('books').pipe(
-        toArray(),
+      this.storageService.getCollection().pipe(
         map((books: Book[]) =>
           CollectionApiActions.loadBooksSuccess({ books })
         ),
@@ -49,7 +47,7 @@ export class CollectionEffects {
   addBookToCollection$: Observable<Action> = this.actions$.pipe(
     ofType(SelectedBookPageActions.addBook.type),
     mergeMap(({ book }) =>
-      this.db.insert('books', [book]).pipe(
+      this.storageService.addToCollection([book]).pipe(
         map(() => CollectionApiActions.addBookSuccess({ book })),
         catchError(() => of(CollectionApiActions.addBookFailure({ book })))
       )
@@ -60,7 +58,7 @@ export class CollectionEffects {
   removeBookFromCollection$: Observable<Action> = this.actions$.pipe(
     ofType(SelectedBookPageActions.removeBook.type),
     mergeMap(({ book }) =>
-      this.db.executeWrite('books', 'delete', [book.id]).pipe(
+      this.storageService.removeFromCollection([book.id]).pipe(
         map(() => CollectionApiActions.removeBookSuccess({ book })),
         catchError(() => of(CollectionApiActions.removeBookFailure({ book })))
       )
@@ -71,6 +69,6 @@ export class CollectionEffects {
     private actions$: Actions<
       SelectedBookPageActions.SelectedBookPageActionsUnion
     >,
-    private db: Database
+    private storageService: BookStorageService
   ) {}
 }

projects/example-app/src/app/core/core.module.ts

@@ -9,6 +9,7 @@ import { NavItemComponent } from '@example-app/core/components/nav-item.componen
 import { SidenavComponent } from '@example-app/core/components/sidenav.component';
 import { ToolbarComponent } from '@example-app/core/components/toolbar.component';
 import { MaterialModule } from '@example-app/material';
+import { LOCAL_STORAGE_PROVIDERS } from './services/book-storage.service';
 
 export const COMPONENTS = [
   AppComponent,
@@ -21,6 +22,7 @@ export const COMPONENTS = [
 
 @NgModule({
   imports: [CommonModule, RouterModule, MaterialModule],
+  providers: [LOCAL_STORAGE_PROVIDERS],
   declarations: COMPONENTS,
   exports: COMPONENTS,
 })