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

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -176,11 +176,14 @@ export * from './shared/dynamic-form-inputs/select-form-input/select-form-input.
 export * from './shared/dynamic-form-inputs/text-form-input/text-form-input.component';
 export * from './shared/pipes/asset-preview.pipe';
 export * from './shared/pipes/channel-label.pipe';
-export * from './shared/pipes/locale-currency-name.pipe';
 export * from './shared/pipes/custom-field-label.pipe';
 export * from './shared/pipes/duration.pipe';
 export * from './shared/pipes/file-size.pipe';
 export * from './shared/pipes/has-permission.pipe';
+export * from './shared/pipes/locale-base.pipe';
+export * from './shared/pipes/locale-currency-name.pipe';
+export * from './shared/pipes/locale-currency.pipe';
+export * from './shared/pipes/locale-date.pipe';
 export * from './shared/pipes/sentence-case.pipe';
 export * from './shared/pipes/sort.pipe';
 export * from './shared/pipes/state-i18n-token.pipe';

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

@@ -0,0 +1,34 @@
+import { ChangeDetectorRef, Injectable, OnDestroy, PipeTransform } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { DataService } from '../../data/providers/data.service';
+
+/**
+ * Used by locale-aware pipes to handle the task of getting the active languageCode
+ * of the UI and cleaning up.
+ */
+@Injectable()
+export abstract class LocaleBasePipe implements OnDestroy, PipeTransform {
+    protected locale: string;
+    private readonly subscription: Subscription;
+
+    protected constructor(dataService?: DataService, changeDetectorRef?: ChangeDetectorRef) {
+        if (dataService && changeDetectorRef) {
+            this.subscription = 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,8 +1,9 @@
-import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { ChangeDetectorRef, Optional, 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 +11,10 @@ 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();
-                });
-        }
+export class LocaleCurrencyNamePipe extends LocaleBasePipe implements PipeTransform {
+    constructor(@Optional() dataService?: DataService, @Optional() changeDetectorRef?: ChangeDetectorRef) {
+        super(dataService, changeDetectorRef);
     }
-
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-
     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,17 @@
-import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { ChangeDetectorRef, Optional, 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();
-                });
-        }
+export class LocaleCurrencyPipe extends LocaleBasePipe implements PipeTransform {
+    constructor(@Optional() dataService?: DataService, @Optional() changeDetectorRef?: ChangeDetectorRef) {
+        super(dataService, changeDetectorRef);
     }
-
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-
     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,9 +1,9 @@
-import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { ChangeDetectorRef, Optional, 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
  * A replacement of the Angular DatePipe which makes use of the Intl API
@@ -13,31 +13,10 @@ 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();
-                });
-        }
+export class LocaleDatePipe extends LocaleBasePipe implements PipeTransform {
+    constructor(@Optional() dataService?: DataService, @Optional() changeDetectorRef?: ChangeDetectorRef) {
+        super(dataService, changeDetectorRef);
     }
-
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-
     transform(value: unknown, ...args: unknown[]): unknown {
         const [format, locale] = args;
         if (this.locale || typeof locale === 'string') {