[Issue 8] Dynamic REST API routes

package.json

@@ -41,36 +41,36 @@
     "express": "^4.18.1",
     "rxjs": "~7.5.5",
     "tslib": "^2.4.0",
-    "zone.js": "~0.11.5"
+    "zone.js": "~0.11.6"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~13.3.7",
     "@angular-devkit/schematics": "^13.3.7",
-    "@angular-eslint/builder": "13.2.1",
-    "@angular-eslint/eslint-plugin": "13.2.1",
-    "@angular-eslint/eslint-plugin-template": "13.2.1",
-    "@angular-eslint/schematics": "13.2.1",
-    "@angular-eslint/template-parser": "13.2.1",
+    "@angular-eslint/builder": "13.5.0",
+    "@angular-eslint/eslint-plugin": "13.5.0",
+    "@angular-eslint/eslint-plugin-template": "13.5.0",
+    "@angular-eslint/schematics": "13.5.0",
+    "@angular-eslint/template-parser": "13.5.0",
     "@angular/cli": "~13.3.7",
     "@angular/compiler-cli": "~13.3.10",
     "@ngrx/schematics": "^13.2.0",
     "@nguniversal/builders": "^13.1.1",
     "@types/express": "^4.17.13",
     "@types/jasmine": "~4.0.3",
-    "@types/node": "^17.0.41",
-    "@typescript-eslint/eslint-plugin": "5.27.1",
-    "@typescript-eslint/parser": "5.27.1",
+    "@types/node": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "5.29.0",
+    "@typescript-eslint/parser": "5.29.0",
     "codecov": "^3.8.3",
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jasmine-auto-spies": "^6.9.9",
-    "jasmine-core": "~4.1.1",
+    "jasmine-core": "~4.2.0",
     "jasmine-marbles": "^0.9.2",
-    "karma": "~6.3.20",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.1",
     "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.0.1",
+    "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.6.4"
   }

src/app/app-routing.module.ts

@@ -9,6 +9,13 @@ const routes: Routes = [
     loadChildren: () =>
       import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
   },
+  {
+    path: 'rest',
+    data: {},
+    canActivate: [],
+    loadChildren: () =>
+      import('./collection/collection.module').then((m) => m.CollectionModule),
+  },
   {
     path: '**',
     redirectTo: '',

src/app/app.component.html

@@ -2,7 +2,7 @@
 
   <!-- regression causing SSR to render with drawer closed, https://github.com/angular/components/issues/8969 -->
   <mat-drawer class="app-sidenav" mode="side" [opened]="true">
-    <!-- menu component -->
+    <vitro-menu></vitro-menu>
   </mat-drawer>
 
   <mat-drawer-content>
@@ -18,4 +18,4 @@
     </div>
   </mat-drawer-content>
 
-</mat-drawer-container>
+</mat-drawer-container>

src/app/app.component.scss

@@ -3,10 +3,6 @@
   height: 100%;
 }
 
-.app-sidenav {
-  width: 200px;
-}
-
 .app-sidenav-content {
   display: flex;
   height: 100%;

src/app/app.component.spec.ts

@@ -4,6 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { StoreModule } from '@ngrx/store';
 import { AppComponent } from './app.component';
 import { metaReducers, reducers } from './core/reducers';
+import { MenuComponent } from './menu/menu.component';
 import { SharedModule } from './shared/shared.module';
 
 describe('AppComponent', () => {
@@ -12,13 +13,13 @@ describe('AppComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [AppComponent, MenuComponent],
       imports: [
         NoopAnimationsModule,
         RouterTestingModule,
         SharedModule,
         StoreModule.forRoot(reducers, { metaReducers }),
       ],
-      declarations: [AppComponent],
     }).compileComponents();
   });
 

src/app/app.component.ts

@@ -1,19 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
-import * as fromRestApi from './core/rest-api/rest-api.reducer';
-import { selectRestApi } from './core/rest-api/rest-api.selectors';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'vitro-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent implements OnInit {
-  constructor(private readonly store: Store<fromRestApi.State>) {}
-
-  ngOnInit(): void {
-    this.store.pipe(select(selectRestApi)).subscribe((data) => {
-      console.log(data);
-    });
-  }
-}
+export class AppComponent {}

src/app/app.module.ts

@@ -1,18 +1,23 @@
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { BrowserModule } from '@angular/platform-browser';
+import {
+  BrowserModule,
+  BrowserTransferStateModule,
+} from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
+import { MenuComponent } from './menu/menu.component';
 import { SharedModule } from './shared/shared.module';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, MenuComponent],
   imports: [
     AppRoutingModule,
     BrowserAnimationsModule,
-    BrowserModule.withServerTransition({ appId: 'vitroAngular' }),
+    BrowserTransferStateModule,
+    BrowserModule.withServerTransition({ appId: 'Vitro-angular' }),
     CoreModule,
     FlexLayoutModule.withConfig({
       ssrObserveBreakpoints: [],

src/app/app.server.module.ts

@@ -1,11 +1,19 @@
 import { NgModule } from '@angular/core';
 import { FlexLayoutServerModule } from '@angular/flex-layout/server';
-import { ServerModule } from '@angular/platform-server';
+import {
+  ServerModule,
+  ServerTransferStateModule,
+} from '@angular/platform-server';
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 
 @NgModule({
-  imports: [AppModule, FlexLayoutServerModule, ServerModule],
+  imports: [
+    AppModule,
+    FlexLayoutServerModule,
+    ServerModule,
+    ServerTransferStateModule,
+  ],
   bootstrap: [AppComponent],
 })
 export class AppServerModule {}

src/app/collection/collection-routing.module.ts

@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RestApiResolver } from '../core/rest-api/rest-api.resolver';
+import { CollectionComponent } from './collection.component';
+import { CollectionResolver } from './collection.resolver';
+import { IndividualFormComponent } from './individual-form/individual-form.component';
+import { IndividualListComponent } from './individual-list/individual-list.component';
+import { IndividualViewComponent } from './individual-view/individual-view.component';
+import { ResourceResolver } from './resource.resolver';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CollectionComponent,
+    children: [
+      {
+        path: ':collection',
+        resolve: {
+          api: RestApiResolver,
+          resources: CollectionResolver,
+        },
+        component: IndividualListComponent,
+      },
+      {
+        path: ':collection/create',
+        resolve: {
+          api: RestApiResolver,
+        },
+        component: IndividualFormComponent,
+      },
+      {
+        path: ':collection/:resource',
+        resolve: {
+          api: RestApiResolver,
+          resource: ResourceResolver,
+        },
+        component: IndividualViewComponent,
+      },
+      {
+        path: ':collection/:resource/update',
+        resolve: {
+          api: RestApiResolver,
+          resource: ResourceResolver,
+        },
+        component: IndividualFormComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CollectionRoutingModule {}

src/app/collection/collection.actions.spec.ts

@@ -0,0 +1,25 @@
+import * as CollectionActions from './collection.actions';
+
+describe('loadResources', () => {
+  it('should return an action', () => {
+    expect(
+      CollectionActions.readResources({ collection: 'geolocation' }).type,
+    ).toBe('[Collection] Read Resources');
+  });
+});
+
+describe('loadResourcesSuccess', () => {
+  it('should return an action', () => {
+    const action = CollectionActions.readResourcesSuccess({ data: {} });
+    expect(action.type).toBe('[Collection] Read Resources Success');
+    expect(action.data).toEqual({});
+  });
+});
+
+describe('loadResourcesFailure', () => {
+  it('should return an action', () => {
+    const action = CollectionActions.readResourcesFailure({ error: {} });
+    expect(action.type).toBe('[Collection] Read Resources Failure');
+    expect(action.error).toEqual({});
+  });
+});

src/app/collection/collection.actions.ts

@@ -0,0 +1,76 @@
+import { createAction, props } from '@ngrx/store';
+
+export const createResource = createAction(
+  '[Collection] Create Resource',
+  props<{ collection: string; resource: any }>(),
+);
+
+export const createResourceSuccess = createAction(
+  '[Collection] Create Resource Success',
+  props<{ collection: string; resource: any }>(),
+);
+
+export const createResourceFailure = createAction(
+  '[Collection] Create Resource Failure',
+  props<{ error: any }>(),
+);
+
+export const readResources = createAction(
+  '[Collection] Read Resources',
+  props<{ collection: string }>(),
+);
+
+export const readResourcesSuccess = createAction(
+  '[Collection] Read Resources Success',
+  props<{ data: any }>(),
+);
+
+export const readResourcesFailure = createAction(
+  '[Collection] Read Resources Failure',
+  props<{ error: any }>(),
+);
+
+export const readResource = createAction(
+  '[Collection] Read Resource',
+  props<{ collection: string; id: string }>(),
+);
+
+export const readResourceSuccess = createAction(
+  '[Collection] Read Resource Success',
+  props<{ data: any }>(),
+);
+
+export const readResourceFailure = createAction(
+  '[Collection] Read Resource Failure',
+  props<{ error: any }>(),
+);
+
+export const updateResource = createAction(
+  '[Collection] Update Resource',
+  props<{ collection: string; id: string; resource: any }>(),
+);
+
+export const updateResourceSuccess = createAction(
+  '[Collection] Update Resource Success',
+  props<{ collection: string; resource: any }>(),
+);
+
+export const updateResourceFailure = createAction(
+  '[Collection] Update Resource Failure',
+  props<{ error: any }>(),
+);
+
+export const deleteResource = createAction(
+  '[Collection] Delete Resource',
+  props<{ collection: string; id: string; resource: any }>(),
+);
+
+export const deleteResourceSuccess = createAction(
+  '[Collection] Delete Resource Success',
+  props<{ collection: string; resource: any }>(),
+);
+
+export const deleteResourceFailure = createAction(
+  '[Collection] Delete Resource Failure',
+  props<{ error: any }>(),
+);

src/app/collection/collection.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/collection/collection.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CollectionComponent } from './collection.component';
+
+describe('CollectionComponent', () => {
+  let component: CollectionComponent;
+  let fixture: ComponentFixture<CollectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CollectionComponent],
+      imports: [RouterTestingModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CollectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/collection/collection.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'vitro-collection',
+  templateUrl: './collection.component.html',
+  styleUrls: ['./collection.component.scss'],
+})
+export class CollectionComponent {}