refactor: use utilities from ngxtension library

bluehalo · Jul 30, 2024 · 99a47a4 · 99a47a4
1 parent 167bc41
commit 99a47a4
Show file tree

Hide file tree

Showing 16 changed files with 649 additions and 215 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "bootstrap": "^5.3.3",
     "lodash": "~4.17.21",
     "luxon": "~3.2.1",
+    "ngxtension": "^4.0.0",
     "roboto-fontface": "0.10",
     "rxjs": "~7.8.1",
     "socket.io-client": "^2.2.0",

diff --git a/src/app/common/dialog/dialog.model.ts b/src/app/common/dialog/dialog.model.ts
@@ -1,3 +1,4 @@
+import { filterNil } from 'ngxtension/filter-nil';
 import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 
@@ -12,8 +13,11 @@ export class DialogReturn<T> {
 }
 
 export function isDialogActionOK<T>() {
-	return (source$: Observable<DialogReturn<T>>) =>
-		source$.pipe(filter((result) => result?.action === DialogAction.OK));
+	return (source$: Observable<DialogReturn<T> | undefined>) =>
+		source$.pipe(
+			filterNil(),
+			filter((result) => result.action === DialogAction.OK)
+		);
 }
 
 export function mapToDialogReturnData<T>() {

diff --git a/src/app/common/public-api.ts b/src/app/common/public-api.ts
@@ -9,7 +9,6 @@ export * from './multi-select.directive';
 export * from './modal/modal/modal.component';
 export * from './not-whitespace.directive';
 export * from './paging.model';
-export * from './rxjs-utils';
 export * from './search-input/search-input.component';
 export * from './skip-to.directive';
 export * from './sorting.model';

diff --git a/src/app/common/rxjs-utils.ts b/src/app/common/rxjs-utils.ts
diff --git a/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.html b/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.html
@@ -1,6 +1,6 @@
 <table class="table table-striped">
 	<tbody>
-		@for (e of _rows(); track e) {
+		@for (i of rows() | repeat; track i) {
 			<tr class="skeleton-row">
 				<td>&nbsp;</td>
 			</tr>

diff --git a/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.ts b/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.ts
@@ -1,20 +1,15 @@
-import {
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	input,
-	numberAttribute
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, numberAttribute } from '@angular/core';
+
+import { RepeatPipe } from 'ngxtension/repeat-pipe';
 
 @Component({
 	selector: 'asy-skeleton-rows',
 	templateUrl: './asy-skeleton-rows.component.html',
 	styleUrls: ['./asy-skeleton-rows.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RepeatPipe],
 	standalone: true
 })
 export class AsySkeletonRowsComponent {
 	readonly rows = input.required({ transform: numberAttribute });
-
-	readonly _rows = computed(() => Array(this.rows()).fill(0));
 }
diff --git a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts
@@ -5,6 +5,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Component, DestroyRef, OnInit, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
+import { filterNil } from 'ngxtension/filter-nil';
 import { Observable } from 'rxjs';
 import { filter, first, switchMap } from 'rxjs/operators';
 
@@ -15,7 +16,7 @@ import {
 	SkipToDirective,
 	SortDirection
 } from '../../../../common';
-import { DialogAction, DialogService } from '../../../../common/dialog';
+import { DialogAction, DialogService, isDialogActionOK } from '../../../../common/dialog';
 import { AgoDatePipe, UtcDatePipe } from '../../../../common/pipes';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import {
@@ -103,7 +104,7 @@ export class ListCacheEntriesComponent implements OnInit {
 			)
 			.closed.pipe(
 				first(),
-				filter((result) => result?.action === DialogAction.OK),
+				isDialogActionOK(),
 				switchMap(() => this.#cacheEntriesService.remove(cacheEntry.key)),
 				takeUntilDestroyed(this.#destroyRef)
 			)

diff --git a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts
@@ -6,7 +6,7 @@ import { RouterLink } from '@angular/router';
 
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { Observable } from 'rxjs';
-import { filter, first, switchMap } from 'rxjs/operators';
+import { first, switchMap } from 'rxjs/operators';
 
 import {
 	PagingOptions,
@@ -15,7 +15,7 @@ import {
 	SkipToDirective,
 	SortDirection
 } from '../../../../common';
-import { DialogAction, DialogService } from '../../../../common/dialog';
+import { DialogService, isDialogActionOK } from '../../../../common/dialog';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import {
 	ActionsMenuColumnComponent,
@@ -132,7 +132,7 @@ export class AdminListEuasComponent implements OnInit {
 			)
 			.closed.pipe(
 				first(),
-				filter((result) => result?.action === DialogAction.OK),
+				isDialogActionOK(),
 				switchMap(() => this.#euaService.delete(eua)),
 				takeUntilDestroyed(this.#destroyRef)
 			)

diff --git a/src/app/core/admin/messages/list-messages/list-messages.component.ts b/src/app/core/admin/messages/list-messages/list-messages.component.ts
@@ -4,6 +4,7 @@ import { Component, DestroyRef, OnInit, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 
+import { filterNil } from 'ngxtension/filter-nil';
 import { Observable } from 'rxjs';
 import { filter, first, switchMap } from 'rxjs/operators';
 
@@ -15,7 +16,7 @@ import {
 	SkipToDirective,
 	SortDirection
 } from '../../../../common';
-import { DialogAction, DialogService } from '../../../../common/dialog';
+import { DialogAction, DialogService, isDialogActionOK } from '../../../../common/dialog';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import {
 	ActionsMenuColumnComponent,
@@ -97,7 +98,7 @@ export class ListMessagesComponent implements OnInit {
 			)
 			.closed.pipe(
 				first(),
-				filter((result) => result?.action === DialogAction.OK),
+				isDialogActionOK(),
 				switchMap(() => this.#messageService.delete(message)),
 				takeUntilDestroyed(this.#destroyRef)
 			)

diff --git a/src/app/core/admin/user/list-users/admin-list-users.component.ts b/src/app/core/admin/user/list-users/admin-list-users.component.ts
@@ -8,6 +8,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { filterNil } from 'ngxtension/filter-nil';
 import { Observable, of } from 'rxjs';
 import { catchError, filter, first, switchMap } from 'rxjs/operators';
 
@@ -19,7 +20,7 @@ import {
 	SkipToDirective,
 	SortDirection
 } from '../../../../common';
-import { DialogAction, DialogService } from '../../../../common/dialog';
+import { DialogAction, DialogService, isDialogActionOK } from '../../../../common/dialog';
 import { JoinPipe } from '../../../../common/pipes';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import {
@@ -212,7 +213,7 @@ export class AdminListUsersComponent implements OnInit {
 			)
 			.closed.pipe(
 				first(),
-				filter((result) => result?.action === DialogAction.OK),
+				isDialogActionOK(),
 				switchMap(() => this.#adminUsersService.removeUser(user._id)),
 				catchError((error: unknown) => {
 					if (error instanceof HttpErrorResponse) {

diff --git a/src/app/core/messages/message.service.ts b/src/app/core/messages/message.service.ts
@@ -2,10 +2,12 @@ import { EventEmitter, Injectable, inject, signal } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { ActivatedRouteSnapshot, ResolveFn, Router, RouterStateSnapshot } from '@angular/router';
 
+import { filterNil } from 'ngxtension/filter-nil';
+import { mapArray } from 'ngxtension/map-array';
 import { Observable, take } from 'rxjs';
 import { catchError, filter, map } from 'rxjs/operators';
 
-import { AbstractEntityService, ServiceMethod, isNotNullOrUndefined } from '../../common';
+import { AbstractEntityService, ServiceMethod } from '../../common';
 import { SocketService } from '../socket.service';
 import { APP_SESSION } from '../tokens';
 import { Message } from './message.model';
@@ -63,7 +65,7 @@ export class MessageService extends AbstractEntityService<Message> {
 
 	recent(): Observable<Message[]> {
 		return this.http.post<unknown[]>('api/messages/recent', {}, { headers: this.headers }).pipe(
-			map((results) => results.map((result) => this.mapToType(result))),
+			mapArray((result) => this.mapToType(result)),
 			catchError((error: unknown) => this.handleError(error, []))
 		);
 	}
@@ -118,7 +120,7 @@ export class MessageService extends AbstractEntityService<Message> {
 
 	private updateNewMessageCount() {
 		this.recent()
-			.pipe(isNotNullOrUndefined())
+			.pipe(filterNil())
 			.subscribe((results) => {
 				this.#newMessageCount.set(results.length);
 			});

diff --git a/src/app/core/teams/list-team-members/list-team-members.component.ts b/src/app/core/teams/list-team-members/list-team-members.component.ts
@@ -10,26 +10,16 @@ import {
 	input,
 	viewChild
 } from '@angular/core';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { explicitEffect } from 'ngxtension/explicit-effect';
 import { Observable, of } from 'rxjs';
-import { catchError, filter, first, switchMap } from 'rxjs/operators';
+import { catchError, first, switchMap } from 'rxjs/operators';
 
-import {
-	PagingOptions,
-	PagingResults,
-	SearchInputComponent,
-	SortDirection,
-	isNotNullOrUndefined
-} from '../../../common';
-import {
-	DialogAction,
-	DialogService,
-	isDialogActionOK,
-	mapToDialogReturnData
-} from '../../../common/dialog';
+import { PagingOptions, PagingResults, SearchInputComponent, SortDirection } from '../../../common';
+import { DialogService, isDialogActionOK, mapToDialogReturnData } from '../../../common/dialog';
 import { AgoDatePipe, UtcDatePipe } from '../../../common/pipes';
 import { SystemAlertService } from '../../../common/system-alert';
 import {
@@ -128,8 +118,7 @@ export class ListTeamMembersComponent {
 	constructor() {
 		this.#alertService.clearAllAlerts();
 
-		// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-		toObservable(this.team).subscribe(() => {
+		explicitEffect([this.team], () => {
 			this.dataSource.reload();
 		});
 	}
@@ -155,7 +144,6 @@ export class ListTeamMembersComponent {
 				}
 			})
 			.closed.pipe(
-				isNotNullOrUndefined(),
 				isDialogActionOK(),
 				mapToDialogReturnData(),
 				takeUntilDestroyed(this.#destroyRef)
@@ -175,7 +163,7 @@ export class ListTeamMembersComponent {
 			)
 			.closed.pipe(
 				first(),
-				filter((result) => result?.action === DialogAction.OK),
+				isDialogActionOK(),
 				switchMap(() => this.#teamsService.removeMember(this.team(), member._id)),
 				switchMap(() => this.#sessionService.reloadSession()),
 				catchError((error: unknown) => {
@@ -209,7 +197,7 @@ export class ListTeamMembersComponent {
 				)
 				.closed.pipe(
 					first(),
-					filter((result) => result?.action === DialogAction.OK),
+					isDialogActionOK(),
 					switchMap(() => this.doUpdateRole(member, role)),
 					switchMap(() => this.#sessionService.reloadSession()),
 					catchError((error: unknown) => {

diff --git a/src/app/core/teams/list-teams/list-sub-teams.component.ts b/src/app/core/teams/list-teams/list-sub-teams.component.ts
@@ -1,9 +1,10 @@
 import { CdkTableModule } from '@angular/cdk/table';
 import { NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 
+import { explicitEffect } from 'ngxtension/explicit-effect';
+
 import { SearchInputComponent, SkipToDirective } from '../../../common';
 import { SystemAlertComponent } from '../../../common/system-alert';
 import {
@@ -52,8 +53,7 @@ export class ListSubTeamsComponent extends BaseListTeamsComponent {
 			)
 		);
 
-		// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-		toObservable(this.parent).subscribe(() => {
+		explicitEffect([this.parent], () => {
 			this.dataSource.reload();
 		});
 	}

diff --git a/src/app/core/teams/view-team/view-team.component.ts b/src/app/core/teams/view-team/view-team.component.ts
@@ -11,7 +11,7 @@ import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/rou
 
 import { filter, first, map, switchMap } from 'rxjs/operators';
 
-import { DialogAction, DialogService } from '../../../common/dialog';
+import { DialogAction, DialogService, isDialogActionOK } from '../../../common/dialog';
 import { SystemAlertComponent } from '../../../common/system-alert';
 import { SessionService } from '../../auth';
 import { APP_SESSION } from '../../tokens';
@@ -60,7 +60,7 @@ export class ViewTeamComponent {
 			)
 			.closed.pipe(
 				first(),
-				filter((result) => result?.action === DialogAction.OK),
+				isDialogActionOK(),
 				switchMap(() => this.#teamsService.delete(team)),
 				switchMap((team) =>
 					this.#sessionService.reloadSession().pipe(map((session) => team))

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,36 +1,32 @@
 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "strictPropertyInitialization": false
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
+    "compileOnSave": false,
+    "compilerOptions": {
+        "baseUrl": "./",
+        "outDir": "./dist/out-tsc",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "esModuleInterop": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "sourceMap": true,
+        "declaration": false,
+        "experimentalDecorators": true,
+        "moduleResolution": "node",
+        "importHelpers": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "useDefineForClassFields": false,
+        "lib": ["ES2022", "dom"],
+        "typeRoots": ["node_modules/@types"],
+        "strictPropertyInitialization": false,
+        "skipLibCheck": true
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    }
 }