remove ngxs from client; add app-shared library; remove app/shared

goofy-client/angular.json

@@ -337,6 +337,32 @@
           "style": "scss"
         }
       }
+    },
+    "app-shared": {
+      "projectType": "library",
+      "root": "libs/app-shared",
+      "sourceRoot": "libs/app-shared/src",
+      "prefix": "goofy-client",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["libs/app-shared/src/**/*.ts"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/app-shared/jest.config.js",
+            "passWithNoTests": true
+          }
+        }
+      },
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      }
     }
   },
   "cli": {

goofy-client/apps/goofy/src/app/app.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { ApiRootResource, ApiRootService } from '@goofy-client/api-root-shared';
-import { NgxsModule } from '@ngxs/store';
 import { UiModule } from '@goofy-client/ui';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NavigationModule } from '@goofy-client/navigation';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
 import { mock } from '@goofy-client/test-utils';
 import { createEmptyStateResource, createStateResource, StateResource } from '@goofy-client/tech-shared';
 import { createApiRootResource } from '../../../../libs/api-root-shared/test/api-root';
+import { AppService } from '@goofy-client/app-shared';
 
 describe('AppComponent', () => {
 	let component: AppComponent;
 	let fixture: ComponentFixture<AppComponent>;
 
 	const apiRootSubj: BehaviorSubject<StateResource<ApiRootResource>> = new BehaviorSubject(null);
-	const apiRootService = mock(ApiRootService);
+	const darkModeSubj: BehaviorSubject<boolean> = new BehaviorSubject(false);
+	const apiRootService = { ...mock(ApiRootService), getApiRoot: () => apiRootSubj };
+
+	const appService = { ...mock(AppService), getDarkMode: () => darkModeSubj };
 
 	const headerComp: string = 'goofy-client-header';
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			imports: [
-				NgxsModule.forRoot(),
 				UiModule,
 				RouterTestingModule,
 				NavigationModule
@@ -32,6 +34,10 @@ describe('AppComponent', () => {
 				{
 					provide: ApiRootService,
 					useValue: apiRootService
+				},
+				{
+					provide: AppService,
+					useValue: appService
 				}
 			]
 		}).compileComponents();
@@ -41,8 +47,6 @@ describe('AppComponent', () => {
 		fixture = TestBed.createComponent(AppComponent);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
-
-		apiRootService.getApiRoot.mockReturnValue(apiRootSubj);
 	});
 
 	it('should create the app', () => {

goofy-client/apps/goofy/src/app/app.component.ts

@@ -3,9 +3,8 @@ import { Component, Inject, Renderer2 } from '@angular/core';
 import { ApiRootResource, ApiRootService } from '@goofy-client/api-root-shared';
 import { StateResource } from '@goofy-client/tech-shared';
 import { IconService } from '@goofy-client/ui';
-import { Observable } from 'rxjs';
-import { AppFacade } from './shared/app.facade';
-import { localStorageDark } from './shared/storage';
+import { Observable, of } from 'rxjs';
+import { AppService, localStorageDark } from '@goofy-client/app-shared';
 
 @Component({
 	selector: 'goofy-client-root',
@@ -15,21 +14,21 @@ import { localStorageDark } from './shared/storage';
 export class AppComponent {
 	title = 'goofy';
 
-	readonly apiRoot$: Observable<StateResource<ApiRootResource>>;
+	apiRoot$: Observable<StateResource<ApiRootResource>>;
 
 	navigationCollapse$: Observable<boolean>;
 	darkMode$: Observable<boolean>;
 
 	constructor(
 		iconService: IconService,
-		private appFacade: AppFacade,
+		private appService: AppService,
 		private renderer: Renderer2,
 		@Inject(DOCUMENT) private document: Document,
-		service: ApiRootService
+		apiRootService: ApiRootService
 	) {
-		this.navigationCollapse$ = appFacade.navigationCollapse$;
-		this.darkMode$ = appFacade.darkMode$;
-		this.apiRoot$ = service.getApiRoot();
+		this.navigationCollapse$ = this.appService.getNavigationCollapse();
+		this.darkMode$ = this.appService.getDarkMode();
+		this.apiRoot$ = apiRootService.getApiRoot();
 
 		iconService.registerIcons();
 
@@ -49,10 +48,10 @@ export class AppComponent {
 	}
 
 	toggleNavigation(isToggle: boolean): void {
-		this.appFacade.setNavigationCollapse(isToggle);
+		this.appService.setNavigationCollapse(isToggle);
 	}
 
 	changeColorMode(darkMode: boolean): void {
-		this.appFacade.changeColorMode(darkMode);
+		this.appService.setDarkMode(darkMode);
 	}
 }
\ No newline at end of file

goofy-client/apps/goofy/src/app/app.module.ts

@@ -10,13 +10,8 @@ import { EnvironmentModule } from '@goofy-client/environment-shared';
 import { NavigationModule } from '@goofy-client/navigation';
 import { UiModule } from '@goofy-client/ui';
 import { VorgangModule } from '@goofy-client/vorgang';
-import { NgxsActionsExecutingModule } from '@ngxs-labs/actions-executing';
-import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
-import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
-import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
-import { NgxsModule } from '@ngxs/store';
 import { AppComponent } from './app.component';
-import { AppState } from './shared/app.state';
+import { AppSharedModule } from '@goofy-client/app-shared'
 
 registerLocaleData(localeDe);
 
@@ -26,11 +21,6 @@ registerLocaleData(localeDe);
 	],
 	imports: [
 		BrowserModule,
-		NgxsModule.forRoot([AppState], { developmentMode: true }),
-		NgxsReduxDevtoolsPluginModule.forRoot(),
-		NgxsLoggerPluginModule.forRoot(),
-		NgxsRouterPluginModule.forRoot(),
-		NgxsActionsExecutingModule.forRoot(),
 		HttpClientModule,
 		BrowserAnimationsModule,
 		RouterModule,
@@ -38,7 +28,8 @@ registerLocaleData(localeDe);
 		EnvironmentModule,
 		ApiRootModule,
 		VorgangModule,
-		NavigationModule
+		NavigationModule,
+		AppSharedModule
 	],
 	providers: [
 		{ provide: LOCALE_ID, useValue: 'de' }

goofy-client/apps/goofy/src/app/shared/app.actions.ts

-export class SetDarkModeAction {
-	static readonly type: string = '[User boolean] Set DarkMode';
-	constructor(public darkMode: boolean) {}
-}
-
-export class SetNavigationCollapseAction {
-	static readonly type: string = '[User boolean] Set NavigationCollapseStatus';
-	constructor(public collapse: boolean) {}
-}

goofy-client/apps/goofy/src/app/shared/app.facade.ts

-import { Injectable } from "@angular/core";
-import { Select, Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
-import { AppSelectors } from './app.selectors';
-import { SetDarkModeAction, SetNavigationCollapseAction } from './app.actions';
-import { AppState } from './app.state';
-
-@Injectable({ providedIn: 'root'})
-export class AppFacade {
-	constructor(public appSelectors: AppSelectors, public store: Store) { }
-
-	@Select(AppState.navigationCollapseSelector) public readonly navigationCollapse$: Observable<boolean>;
-	//@Select(AppSelectors.navigationCollapseSelector) public readonly navigationCollapse$: Observable<boolean>;
-	@Select(AppState.darkModeSelector) public readonly darkMode$: Observable<boolean>;
-
-	setNavigationCollapse(isCollapse: boolean){
-		this.store.dispatch(new SetNavigationCollapseAction(isCollapse));
-	}
-	changeColorMode(darkMode: boolean){
-		this.store.dispatch(new SetDarkModeAction(darkMode));
-	}
-}
\ No newline at end of file

goofy-client/apps/goofy/src/app/shared/app.selectors.ts

-import { Injectable } from '@angular/core';
-import { Selector} from '@ngxs/store';
-import { AppStateModel } from './app.state';
-
-@Injectable({ providedIn: 'root'})
-export class AppSelectors  {
-
-	@Selector() static navigationCollapseSelector(state: AppStateModel): boolean {
-		return state.navigationCollapse;
-	}
-}
\ No newline at end of file

goofy-client/apps/goofy/src/app/shared/app.state.ts

-import { Injectable } from '@angular/core';
-import { Action, NgxsOnInit, Selector, State, StateContext } from '@ngxs/store';
-import { isNull } from 'lodash-es';
-import { SetDarkModeAction, SetNavigationCollapseAction } from './app.actions';
-import { getDarkModeFromLocalStorage, getNavigationCollapsedFromLocalStorage, setDarkModeIntoStorage, setNavigationCollapsedIntoLocalStorage } from './storage';
-
-const defaults: AppStateModel = {
-	darkMode: false,
-	navigationCollapse: false
-};
-
-export interface AppStateModel {
-	darkMode: boolean;
-	navigationCollapse: boolean;
-}
-
-@State<AppStateModel>({ name: 'app', defaults })
-@Injectable()
-export class AppState implements NgxsOnInit{
-
-	@Selector() static navigationCollapseSelector(state: AppStateModel): boolean {
-		return state.navigationCollapse;
-	}
-
-	@Selector() static darkModeSelector(state: AppStateModel): boolean {
-		return state.darkMode;
-	}
-	
-	constructor() { }
-	
-	ngxsOnInit(ctx?: StateContext<any>) {
-		const dark = JSON.parse(getDarkModeFromLocalStorage());
-		ctx.dispatch( new SetNavigationCollapseAction(isNull(dark) ? false : dark));
-
-		const navigationCollapsed = JSON.parse(getNavigationCollapsedFromLocalStorage());
-		ctx.dispatch( new SetDarkModeAction(isNull(navigationCollapsed) ? false : navigationCollapsed));
-	}
-
-	@Action(SetNavigationCollapseAction)
-	setNavigationCollapse(context: StateContext<AppStateModel>, action: SetNavigationCollapseAction) {
-		const navigationCollapse: boolean = action.collapse;
-
-		context.patchState({ navigationCollapse });
-
-		setNavigationCollapsedIntoLocalStorage(navigationCollapse + '');
-	}
-
-	@Action(SetDarkModeAction)
-	setDarkMode(context: StateContext<AppStateModel>, action: SetDarkModeAction) {
-		const darkMode: boolean = action.darkMode;
-
-		context.patchState({ darkMode });
-
-		setDarkModeIntoStorage(darkMode + '');
-	}
-}
\ No newline at end of file

goofy-client/jest.config.js

@@ -9,5 +9,6 @@ module.exports = {
     '<rootDir>/libs/vorgang',
     '<rootDir>/libs/navigation',
     '<rootDir>/libs/test-utils',
+    '<rootDir>/libs/app-shared',
   ],
 };

goofy-client/libs/app-shared/.eslintrc.json

+{ "extends": "../../.eslintrc.json", "ignorePatterns": ["!**/*"], "rules": {} }

goofy-client/libs/app-shared/README.md

+# app-shared
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test app-shared` to execute the unit tests.

goofy-client/libs/app-shared/jest.config.js

+module.exports = {
+  displayName: 'app-shared',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+      astTransformers: {
+        before: [
+          'jest-preset-angular/build/InlineFilesTransformer',
+          'jest-preset-angular/build/StripStylesTransformer',
+        ],
+      },
+    },
+  },
+  coverageDirectory: '../../coverage/libs/app-shared',
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
+  ],
+};

goofy-client/libs/app-shared/src/index.ts

+export * from './lib/app-shared.module';
+export * from './lib/app.service';
+export * from './storage/storage';
\ No newline at end of file

goofy-client/libs/app-shared/src/lib/app-shared.module.spec.ts

+import { TestBed } from "@angular/core/testing";
+import { AppSharedModule } from './app-shared.module';
+
+describe('AppSharedModule', () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [AppSharedModule],
+		}).compileComponents();
+	});
+
+	it('should create', () => {
+		expect(AppSharedModule).toBeDefined();
+	});
+});

goofy-client/libs/app-shared/src/lib/app-shared.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppService } from './app.service';
+import { RestModule } from '@ngxp/rest';
+
+@NgModule({
+		imports: [
+				CommonModule,	
+				RestModule
+		],
+		providers: [
+				AppService
+		]
+})
+export class AppSharedModule { }

goofy-client/libs/app-shared/src/lib/app.service.spec.ts

+import { AppService } from "./app.service";
+
+describe('AppService', () => {
+	let service: AppService;
+
+	beforeEach(() => {
+		service = new AppService();
+	})
+
+	it('should create', () => {
+		expect(service).toBeTruthy();
+	})
+})
\ No newline at end of file

goofy-client/libs/app-shared/src/lib/app.service.ts

+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { getDarkModeFromLocalStorage, getNavigationCollapsedFromLocalStorage, setDarkModeIntoStorage, setNavigationCollapsedIntoLocalStorage } from '../storage/storage';
+
+@Injectable()
+export class AppService {
+
+	private readonly darkMode: BehaviorSubject<boolean> = new BehaviorSubject(Boolean(JSON.parse(getDarkModeFromLocalStorage())));
+	private readonly navigationCollapse: BehaviorSubject<boolean> = new BehaviorSubject(Boolean(JSON.parse(getNavigationCollapsedFromLocalStorage())));
+
+	public setDarkMode(darkMode: boolean): void {
+		setDarkModeIntoStorage(String(darkMode));
+
+		this.darkMode.next(darkMode);
+	}
+
+	public setNavigationCollapse(navigationCollapse: boolean): void {
+		setNavigationCollapsedIntoLocalStorage(String(navigationCollapse));
+
+		this.navigationCollapse.next(navigationCollapse);
+	}
+
+	public getDarkMode(): Observable<boolean> {
+		return this.darkMode;
+	}
+
+	public getNavigationCollapse(): Observable<boolean> {
+		return this.navigationCollapse;
+	}
+}
\ No newline at end of file

goofy-client/libs/app-shared/src/test-setup.ts

+import 'jest-preset-angular';

goofy-client/libs/app-shared/tsconfig.json

+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}