refactor: (WIP) start migrating to ngrx style

ngrx seems to be the way to go with Angular. Therefore adapt its style, so that future migrating will become more easy

refs: #2318

visualization/app/codeCharta/state/angular-redux/store.ts

@@ -0,0 +1,32 @@
+import { Injectable } from "@angular/core"
+import { Observable } from "rxjs"
+
+import { CCAction } from "../../codeCharta.model"
+import { CcState, Store as PlainStore } from "../store/store"
+
+type Selector<T> = (state: CcState) => T
+
+// todo: Add tests
+
+@Injectable({
+	providedIn: "root"
+})
+export class Store {
+	select<T>(selector: Selector<T>): Observable<T> {
+		return new Observable<T>(subscriber => {
+			let lastValue = selector(PlainStore.store.getState())
+			subscriber.next(lastValue)
+			return PlainStore.store.subscribe(() => {
+				const newValue = selector(PlainStore.store.getState())
+				if (lastValue !== newValue) {
+					lastValue = newValue
+					subscriber.next(newValue)
+				}
+			})
+		})
+	}
+
+	dispatch(action: CCAction) {
+		PlainStore.store.dispatch(action)
+	}
+}

visualization/app/codeCharta/state/store/appSettings/appSettings.actions.ts

@@ -22,7 +22,7 @@ import { defaultShowOnlyBuildingsWithEdges } from "./showOnlyBuildingsWithEdges/
 import { defaultResetIfNewFileIsLoaded } from "./resetCameraIfNewFileIsLoaded/resetCameraIfNewFileIsLoaded.actions"
 import { defaultIsLoadingMap } from "./isLoadingMap/isLoadingMap.actions"
 import { defaultIsLoadingFile } from "./isLoadingFile/isLoadingFile.actions"
-import { defaultSortingOrderAscending } from "./sortingOrderAscending/sortingOrderAscending.actions"
+import { defaultSortingOrderAscending } from "./sortingOrderAscending/sortingOrderAscending.reducer"
 import { defaultSearchPanelMode } from "./searchPanelMode/searchPanelMode.actions"
 import { defaultCameraTarget } from "./cameraTarget/cameraTarget.actions"
 import { defaultExperimentalFeaturesEnabled } from "./enableExperimentalFeatures/experimentalFeaturesEnabled.actions"

visualization/app/codeCharta/state/store/appSettings/appSettings.splitter.ts

@@ -9,7 +9,6 @@ import { splitShowMetricLabelNameValueAction } from "./showMetricLabelNameValue/
 import { splitPanelSelectionAction } from "./panelSelection/panelSelection.splitter"
 import { splitCameraTargetAction } from "./cameraTarget/cameraTarget.splitter"
 import { splitIsAttributeSideBarVisibleAction } from "./isAttributeSideBarVisible/isAttributeSideBarVisible.splitter"
-import { splitSortingOrderAscendingAction } from "./sortingOrderAscending/sortingOrderAscending.splitter"
 import { splitSearchPanelModeAction } from "./searchPanelMode/searchPanelMode.splitter"
 import { splitIsLoadingFileAction } from "./isLoadingFile/isLoadingFile.splitter"
 import { splitIsLoadingMapAction } from "./isLoadingMap/isLoadingMap.splitter"
@@ -60,10 +59,6 @@ export function splitAppSettingsActions(payload: RecursivePartial<AppSettings>)
 		actions.push(splitIsAttributeSideBarVisibleAction(payload.isAttributeSideBarVisible))
 	}
 
-	if (payload.sortingOrderAscending !== undefined) {
-		actions.push(splitSortingOrderAscendingAction(payload.sortingOrderAscending))
-	}
-
 	if (payload.searchPanelMode !== undefined) {
 		actions.push(splitSearchPanelModeAction(payload.searchPanelMode))
 	}

visualization/app/codeCharta/state/store/appSettings/sortingOrderAscending/sortingOrderAscending.actions.ts

@@ -1,21 +1,17 @@
 import { Action } from "redux"
 
 export enum SortingOrderAscendingActions {
-	SET_SORTING_ORDER_ASCENDING = "SET_SORTING_ORDER_ASCENDING"
+	TOGGLE_SORTING_ORDER_ASCENDING = "TOGGLE_SORTING_ORDER_ASCENDING"
 }
 
-export interface SetSortingOrderAscendingAction extends Action {
-	type: SortingOrderAscendingActions.SET_SORTING_ORDER_ASCENDING
-	payload: boolean
+export interface ToggleSortingOrderAscendingAction extends Action {
+	type: SortingOrderAscendingActions.TOGGLE_SORTING_ORDER_ASCENDING
 }
 
-export type SortingOrderAscendingAction = SetSortingOrderAscendingAction
+export type SortingOrderAscendingAction = ToggleSortingOrderAscendingAction
 
-export function setSortingOrderAscending(sortingOrderAscending: boolean = defaultSortingOrderAscending): SetSortingOrderAscendingAction {
+export function toggleSortingOrderAscending(): ToggleSortingOrderAscendingAction {
 	return {
-		type: SortingOrderAscendingActions.SET_SORTING_ORDER_ASCENDING,
-		payload: sortingOrderAscending
+		type: SortingOrderAscendingActions.TOGGLE_SORTING_ORDER_ASCENDING
 	}
 }
-
-export const defaultSortingOrderAscending = false

visualization/app/codeCharta/state/store/appSettings/sortingOrderAscending/sortingOrderAscending.reducer.spec.ts

@@ -1,5 +1,5 @@
 import { sortingOrderAscending } from "./sortingOrderAscending.reducer"
-import { SortingOrderAscendingAction, setSortingOrderAscending } from "./sortingOrderAscending.actions"
+import { SortingOrderAscendingAction, toggleSortingOrderAscending } from "./sortingOrderAscending.actions"
 
 describe("sortingOrderAscending", () => {
 	describe("Default State", () => {
@@ -10,15 +10,15 @@ describe("sortingOrderAscending", () => {
 		})
 	})
 
-	describe("Action: SET_SORTING_ORDER_ASCENDING", () => {
-		it("should set new sortingOrderAscending", () => {
-			const result = sortingOrderAscending(false, setSortingOrderAscending(true))
+	describe("Action: TOGGLE_SORTING_ORDER_ASCENDING", () => {
+		it("should toggle from false to true", () => {
+			const result = sortingOrderAscending(false, toggleSortingOrderAscending())
 
 			expect(result).toEqual(true)
 		})
 
-		it("should set default sortingOrderAscending", () => {
-			const result = sortingOrderAscending(true, setSortingOrderAscending())
+		it("should toggle from true to false", () => {
+			const result = sortingOrderAscending(true, toggleSortingOrderAscending())
 
 			expect(result).toEqual(false)
 		})

visualization/app/codeCharta/state/store/appSettings/sortingOrderAscending/sortingOrderAscending.reducer.ts

@@ -1,9 +1,11 @@
-import { SortingOrderAscendingAction, SortingOrderAscendingActions, setSortingOrderAscending } from "./sortingOrderAscending.actions"
+import { SortingOrderAscendingAction, SortingOrderAscendingActions } from "./sortingOrderAscending.actions"
 
-export function sortingOrderAscending(state = setSortingOrderAscending().payload, action: SortingOrderAscendingAction) {
+export const defaultSortingOrderAscending = false
+
+export function sortingOrderAscending(state = defaultSortingOrderAscending, action: SortingOrderAscendingAction) {
 	switch (action.type) {
-		case SortingOrderAscendingActions.SET_SORTING_ORDER_ASCENDING:
-			return action.payload
+		case SortingOrderAscendingActions.TOGGLE_SORTING_ORDER_ASCENDING:
+			return !state
 		default:
 			return state
 	}

visualization/app/codeCharta/state/store/appSettings/sortingOrderAscending/sortingOrderAscending.service.spec.ts

@@ -41,12 +41,11 @@ describe("SortingOrderAscendingService", () => {
 	describe("onStoreChanged", () => {
 		it("should notify all subscribers with the new sortingOrderAscending value", () => {
 			const action: SortingOrderAscendingAction = {
-				type: SortingOrderAscendingActions.SET_SORTING_ORDER_ASCENDING,
-				payload: true
+				type: SortingOrderAscendingActions.TOGGLE_SORTING_ORDER_ASCENDING
 			}
 			storeService["store"].dispatch(action)
 
-			sortingOrderAscendingService.onStoreChanged(SortingOrderAscendingActions.SET_SORTING_ORDER_ASCENDING)
+			sortingOrderAscendingService.onStoreChanged(SortingOrderAscendingActions.TOGGLE_SORTING_ORDER_ASCENDING)
 
 			expect($rootScope.$broadcast).toHaveBeenCalledWith("sorting-order-ascending-changed", {
 				sortingOrderAscending: true

visualization/app/codeCharta/ui/sortingButton/sortingButton.component.html

@@ -1,7 +1,7 @@
 <button
 	class="box-rounded"
-	(click)="onButtonClick()"
-	title="Toggle sort order (currently {{ orderAscending.value ? 'ascending' : 'descending' }})"
+	(click)="onClick()"
+	title="Toggle sort order (currently {{ (orderAscending$ | async) ? 'ascending' : 'descending' }})"
 >
-	<i [className]="orderAscending.value ? 'fa fa-sort-amount-asc' : 'fa fa-sort-amount-desc'"></i>
+	<i [className]="(orderAscending$ | async) ? 'fa fa-sort-amount-asc' : 'fa fa-sort-amount-desc'"></i>
 </button>

visualization/app/codeCharta/ui/sortingButton/sortingButton.component.spec.ts

@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from "@testing-library/angular"
 import { Store } from "../../state/store/store"
 import { sortingOrderAscendingSelector } from "../../state/store/appSettings/sortingOrderAscending/sortingOrderAscending.selector"
 import { SortingButtonComponent } from "./sortingButton.component"
-import { setSortingOrderAscending } from "../../state/store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
+import { toggleSortingOrderAscending } from "../../state/store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
 
 describe("SortingButtonComponent", () => {
 	beforeEach(() => {
@@ -24,7 +24,7 @@ describe("SortingButtonComponent", () => {
 		const { detectChanges } = await render(SortingButtonComponent)
 		expect(screen.getByTitle("Toggle sort order (currently descending)")).toBeTruthy()
 
-		Store.store.dispatch(setSortingOrderAscending(true))
+		Store.store.dispatch(toggleSortingOrderAscending())
 		detectChanges()
 
 		expect(screen.getByTitle("Toggle sort order (currently ascending)")).toBeTruthy()

visualization/app/codeCharta/ui/sortingButton/sortingButton.component.ts

@@ -1,18 +1,22 @@
-import { Component } from "@angular/core"
+import { Component, Inject } from "@angular/core"
+import { Observable } from "rxjs"
 
-import { connect } from "../../state/angular-redux/connect"
-import { setSortingOrderAscending } from "../../state/store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
+import { Store } from "../../state/angular-redux/store"
+import { toggleSortingOrderAscending } from "../../state/store/appSettings/sortingOrderAscending/sortingOrderAscending.actions"
 import { sortingOrderAscendingSelector } from "../../state/store/appSettings/sortingOrderAscending/sortingOrderAscending.selector"
-import { CcState } from "../../state/store/store"
-
-const ConnectedClass = connect((state: CcState) => ({ orderAscending: sortingOrderAscendingSelector(state) }), { setSortingOrderAscending })
 
 @Component({
 	selector: "cc-sorting-button",
 	template: require("./sortingButton.component.html")
 })
-export class SortingButtonComponent extends ConnectedClass {
-	onButtonClick() {
-		this.setSortingOrderAscending(!this.orderAscending.value)
+export class SortingButtonComponent {
+	orderAscending$: Observable<boolean>
+
+	constructor(@Inject(Store) private store: Store) {
+		this.orderAscending$ = this.store.select(sortingOrderAscendingSelector)
+	}
+
+	onClick() {
+		this.store.dispatch(toggleSortingOrderAscending())
 	}
 }