refactor(admin-ui): Extract shared locale pipe code

packages/admin-ui/src/lib/core/src/shared/pipes/locale-base.pipe.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core';
+import { DataService } from '@vendure/admin-ui/core';
+import { Subscription } from 'rxjs';
+
+/**
+ * Used by locale-aware pipes to handle the task of getting the active languageCode
+ * of the UI and cleaning up.
+ */
+@Pipe({
+    name: 'basePipe',
+})
+export abstract class LocaleBasePipe implements OnDestroy, PipeTransform {
+    protected locale: string;
+    private readonly subscription: Subscription;
+
+    constructor(
+        @Optional() private dataService?: DataService,
+        @Optional() changeDetectorRef?: ChangeDetectorRef,
+    ) {
+        if (this.dataService && changeDetectorRef) {
+            this.subscription = this.dataService.client
+                .uiState()
+                .mapStream(data => data.uiState.language)
+                .subscribe(languageCode => {
+                    this.locale = languageCode.replace(/_/g, '-');
+                    changeDetectorRef.markForCheck();
+                });
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+    abstract transform(value: any, ...args): any;
+}

packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.ts

@@ -1,7 +1,6 @@
-import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Pipe, PipeTransform } from '@angular/core';
 
-import { DataService } from '../../data/providers/data.service';
+import { LocaleBasePipe } from './locale-base.pipe';
 
 /**
  * Displays a human-readable name for a given ISO 4217 currency code.
@@ -10,31 +9,7 @@ import { DataService } from '../../data/providers/data.service';
     name: 'localeCurrencyName',
     pure: false,
 })
-export class LocaleCurrencyNamePipe implements PipeTransform, OnDestroy {
-    private locale: string;
-    private readonly subscription: Subscription;
-
-    constructor(
-        @Optional() private dataService?: DataService,
-        @Optional() changeDetectorRef?: ChangeDetectorRef,
-    ) {
-        if (this.dataService && changeDetectorRef) {
-            this.subscription = this.dataService.client
-                .uiState()
-                .mapStream(data => data.uiState.language)
-                .subscribe(languageCode => {
-                    this.locale = languageCode.replace(/_/g, '-');
-                    changeDetectorRef.markForCheck();
-                });
-        }
-    }
-
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-
+export class LocaleCurrencyNamePipe extends LocaleBasePipe implements PipeTransform {
     transform(value: any, display: 'full' | 'symbol' | 'name' = 'full', locale?: unknown): any {
         if (value == null || value === '') {
             return '';

packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency.pipe.ts

@@ -1,37 +1,12 @@
-import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Pipe, PipeTransform } from '@angular/core';
 
-import { DataService } from '../../data/providers/data.service';
+import { LocaleBasePipe } from './locale-base.pipe';
 
 @Pipe({
     name: 'localeCurrency',
     pure: false,
 })
-export class LocaleCurrencyPipe implements PipeTransform, OnDestroy {
-    private locale: string;
-    private readonly subscription: Subscription;
-
-    constructor(
-        @Optional() private dataService?: DataService,
-        @Optional() changeDetectorRef?: ChangeDetectorRef,
-    ) {
-        if (this.dataService && changeDetectorRef) {
-            this.subscription = this.dataService.client
-                .uiState()
-                .mapStream(data => data.uiState.language)
-                .subscribe(languageCode => {
-                    this.locale = languageCode.replace(/_/g, '-');
-                    changeDetectorRef.markForCheck();
-                });
-        }
-    }
-
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-
+export class LocaleCurrencyPipe extends LocaleBasePipe implements PipeTransform {
     transform(value: unknown, ...args: unknown[]): string | unknown {
         const [currencyCode, locale] = args;
         if (typeof value === 'number' && typeof currencyCode === 'string') {

packages/admin-ui/src/lib/core/src/shared/pipes/locale-date.pipe.ts

@@ -1,8 +1,6 @@
-import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Pipe, PipeTransform } from '@angular/core';
 
-import { LanguageCode } from '../../common/generated-types';
-import { DataService } from '../../data/providers/data.service';
+import { LocaleBasePipe } from './locale-base.pipe';
 
 /**
  * @description
@@ -13,31 +11,7 @@ import { DataService } from '../../data/providers/data.service';
     name: 'localeDate',
     pure: false,
 })
-export class LocaleDatePipe implements PipeTransform, OnDestroy {
-    private locale: string;
-    private readonly subscription: Subscription;
-
-    constructor(
-        @Optional() private dataService?: DataService,
-        @Optional() changeDetectorRef?: ChangeDetectorRef,
-    ) {
-        if (this.dataService && changeDetectorRef) {
-            this.subscription = this.dataService.client
-                .uiState()
-                .mapStream(data => data.uiState.language)
-                .subscribe(languageCode => {
-                    this.locale = languageCode.replace(/_/g, '-');
-                    changeDetectorRef.markForCheck();
-                });
-        }
-    }
-
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-
+export class LocaleDatePipe extends LocaleBasePipe implements PipeTransform {
     transform(value: unknown, ...args: unknown[]): unknown {
         const [format, locale] = args;
         if (this.locale || typeof locale === 'string') {