Replace Transloco translate() with i18n.selectTranslate() where possible (#3319)

Author: Nateowami

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { Component, DestroyRef, Inject, OnDestroy, OnInit } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router } from '@angular/router';
 import Bugsnag from '@bugsnag/js';
-import { translate } from '@ngneat/transloco';
 import { cloneDeep } from 'lodash-es';
 import { CookieService } from 'ngx-cookie-service';
 import { SystemRole } from 'realtime-server/lib/esm/common/models/system-role';
@@ -356,12 +355,12 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
     if (this.currentUser == null) {
       return;
     } else if (!this.isAppOnline) {
-      this.noticeService.show(translate('app.action_not_available_offline'));
+      this.noticeService.show(this.i18n.translateStatic('app.action_not_available_offline'));
     } else {
       this.authService
         .changePassword(this.currentUser.email)
         .then(() => {
-          this.noticeService.show(translate('app.password_reset_email_sent'));
+          this.noticeService.show(this.i18n.translateStatic('app.password_reset_email_sent'));
         })
         .catch(() => {
           this.dialogService.message('app.cannot_change_password');
@@ -373,7 +372,7 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
     if (this.isAppOnline) {
       this.userService.editDisplayName(false);
     } else {
-      this.noticeService.show(translate('app.action_not_available_offline'));
+      this.noticeService.show(this.i18n.translateStatic('app.action_not_available_offline'));
     }
   }
 

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking-overview/checking-overview.component.ts

@@ -1,6 +1,5 @@
 import { Component, DestroyRef, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { translate } from '@ngneat/transloco';
 import { Canon } from '@sillsdev/scripture';
 import { saveAs } from 'file-saver';
 import Papa from 'papaparse';
@@ -270,14 +269,16 @@ export class CheckingOverviewComponent extends DataLoadingComponent implements O
   }
 
   questionCountLabel(count: number): string {
-    return translate('checking_overview.question_count_label', { count: count });
+    return this.i18n.translateStatic('checking_overview.question_count_label', { count: count });
   }
 
   timeArchivedStamp(date: string | undefined): string {
     if (date == null) {
       return '';
     }
-    return translate('checking_overview.time_archived_stamp', { timeStamp: this.i18n.formatDate(new Date(date)) });
+    return this.i18n.translateStatic('checking_overview.time_archived_stamp', {
+      timeStamp: this.i18n.formatDate(new Date(date))
+    });
   }
 
   bookAnswerCount(text: TextInfo): number {
@@ -306,7 +307,9 @@ export class CheckingOverviewComponent extends DataLoadingComponent implements O
 
   answerCountLabel(count?: number): string {
     return count != null && count > 0
-      ? translate('checking_overview.answer_count_label', { count: this.l10nNumberPipe.transform(count) })
+      ? this.i18n.translateStatic('checking_overview.answer_count_label', {
+          count: this.l10nNumberPipe.transform(count)
+        })
       : '';
   }
 

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts

@@ -10,7 +10,6 @@ import {
   ViewChildren
 } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { translate } from '@ngneat/transloco';
 import { VerseRef } from '@sillsdev/scripture';
 import { cloneDeep } from 'lodash-es';
 import { Operation } from 'realtime-server/lib/esm/common/models/project-rights';
@@ -454,9 +453,9 @@ export class CheckingAnswersComponent implements OnInit {
         answer
       });
     } else if (likeAnswerResponse === LikeAnswerResponse.DeniedOwnAnswer) {
-      this.noticeService.show(translate('checking_answers.cannot_like_own_answer'));
+      this.noticeService.show(this.i18n.translateStatic('checking_answers.cannot_like_own_answer'));
     } else if (likeAnswerResponse === LikeAnswerResponse.DeniedNoPermission) {
-      this.noticeService.show(translate('checking_answers.no_permission_to_like'));
+      this.noticeService.show(this.i18n.translateStatic('checking_answers.no_permission_to_like'));
     }
   }
 

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.ts

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { translate } from '@ngneat/transloco';
 import { cloneDeep, sortBy } from 'lodash-es';
 import { Operation } from 'realtime-server/lib/esm/common/models/project-rights';
 import { Answer } from 'realtime-server/lib/esm/scriptureforge/models/answer';
@@ -8,6 +7,7 @@ import { SFProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/
 import { SF_PROJECT_RIGHTS, SFProjectDomain } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-rights';
 import { debounceTime } from 'rxjs/operators';
 import { DialogService } from 'xforge-common/dialog.service';
+import { I18nService } from 'xforge-common/i18n.service';
 import { SubscriptionDisposable } from 'xforge-common/subscription-disposable';
 import { UserService } from 'xforge-common/user.service';
 import { QuestionDoc } from '../../../../core/models/question-doc';
@@ -44,7 +44,8 @@ export class CheckingCommentsComponent extends SubscriptionDisposable implements
 
   constructor(
     private readonly dialogService: DialogService,
-    private userService: UserService
+    private userService: UserService,
+    private readonly i18n: I18nService
   ) {
     super();
   }
@@ -64,9 +65,9 @@ export class CheckingCommentsComponent extends SubscriptionDisposable implements
     }
 
     if (unread > 0) {
-      return translate('checking_comments.show_more_comments_and_unread', { count, unread });
+      return this.i18n.translateStatic('checking_comments.show_more_comments_and_unread', { count, unread });
     } else {
-      return translate('checking_comments.show_more_comments', { count });
+      return this.i18n.translateStatic('checking_comments.show_more_comments', { count });
     }
   }
 

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-question/checking-question.component.ts

@@ -9,7 +9,6 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { translate } from '@ngneat/transloco';
 import { VerseRef } from '@sillsdev/scripture';
 import { AudioTiming } from 'realtime-server/lib/esm/scriptureforge/models/audio-timing';
 import { getTextAudioId, TextAudio } from 'realtime-server/lib/esm/scriptureforge/models/text-audio';
@@ -113,7 +112,7 @@ export class CheckingQuestionComponent extends SubscriptionDisposable implements
     return this._questionDoc.data.text
       ? this._questionDoc.data.text
       : this._questionDoc.data.audioUrl != null
-        ? translate('checking_questions.listen_to_question', {
+        ? this.i18n.translateStatic('checking_questions.listen_to_question', {
             referenceForDisplay: this.referenceForDisplay
           })
         : '';

src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.ts

@@ -1,7 +1,6 @@
 import { Component, DestroyRef, Inject, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
-import { translate } from '@ngneat/transloco';
 import { VerseRef } from '@sillsdev/scripture';
 import { cloneDeep } from 'lodash-es';
 import { Question } from 'realtime-server/lib/esm/scriptureforge/models/question';
@@ -44,8 +43,8 @@ export class QuestionDialogComponent implements OnInit {
   @ViewChild(TextAndAudioComponent) textAndAudio?: TextAndAudioComponent;
   modeLabel =
     this.data && this.data.questionDoc != null
-      ? translate('question_dialog.edit_question')
-      : translate('question_dialog.new_question');
+      ? this.i18n.translateStatic('question_dialog.edit_question')
+      : this.i18n.translateStatic('question_dialog.new_question');
   parentAndStartMatcher = new ParentAndStartErrorStateMatcher();
   versesForm: FormGroup = new FormGroup(
     {
@@ -91,19 +90,19 @@ export class QuestionDialogComponent implements OnInit {
   }
 
   get scriptureInputErrorMessages(): { startError: string; endError: string } {
-    let start: string = translate('question_dialog.required_with_asterisk');
+    let start: string = this.i18n.translateStatic('question_dialog.required_with_asterisk');
     if (this.scriptureStart.hasError('verseFormat')) {
-      start = translate('question_dialog.example_verse');
+      start = this.i18n.translateStatic('question_dialog.example_verse');
     } else if (this.scriptureStart.hasError('verseRange')) {
-      start = translate('question_dialog.must_be_inside_verse_range');
+      start = this.i18n.translateStatic('question_dialog.must_be_inside_verse_range');
     }
     let end: string = '';
     if (this.scriptureEnd.hasError('verseFormat')) {
-      end = translate('question_dialog.example_verse');
+      end = this.i18n.translateStatic('question_dialog.example_verse');
     } else if (this.scriptureEnd.hasError('verseRange')) {
-      end = translate('question_dialog.must_be_inside_verse_range');
+      end = this.i18n.translateStatic('question_dialog.must_be_inside_verse_range');
     } else if (this.versesForm.hasError('verseDifferentBookOrChapter')) {
-      end = translate('question_dialog.must_be_same_book_and_chapter');
+      end = this.i18n.translateStatic('question_dialog.must_be_same_book_and_chapter');
     }
     return { startError: start, endError: end };
   }

src/SIL.XForge.Scripture/ClientApp/src/app/core/translation-engine.service.ts

@@ -8,6 +8,7 @@ import { SFProjectUserConfig } from 'realtime-server/lib/esm/scriptureforge/mode
 import { getTextDocId } from 'realtime-server/lib/esm/scriptureforge/models/text-data';
 import { Observable } from 'rxjs';
 import { filter, share } from 'rxjs/operators';
+import { I18nService } from 'xforge-common/i18n.service';
 import { NoticeService } from 'xforge-common/notice.service';
 import { OfflineData, OfflineStore } from 'xforge-common/offline-store';
 import { OnlineStatusService } from 'xforge-common/online-status.service';
@@ -16,6 +17,7 @@ import { HttpClient } from '../machine-api/http-client';
 import { RemoteTranslationEngine } from '../machine-api/remote-translation-engine';
 import { EDITED_SEGMENTS, EditedSegmentData } from './models/edited-segment-data';
 import { SFProjectService } from './sf-project.service';
+
 /**
  * A service to access features for translation suggestions and training the translation engine
  */
@@ -38,7 +40,8 @@ export class TranslationEngineService {
     private readonly machineHttp: HttpClient,
     private readonly noticeService: NoticeService,
     private readonly router: Router,
-    private destroyRef: DestroyRef
+    private destroyRef: DestroyRef,
+    private readonly i18n: I18nService
   ) {
     this.onlineStatus$ = this.onlineStatusService.onlineStatus$.pipe(
       filter(online => online),
@@ -57,7 +60,7 @@ export class TranslationEngineService {
     if (!this.translationEngines.has(projectId)) {
       this.translationEngines.set(
         projectId,
-        new RemoteTranslationEngine(projectId, this.machineHttp, this.noticeService, this.router)
+        new RemoteTranslationEngine(projectId, this.machineHttp, this.noticeService, this.router, this.i18n)
       );
     }
     return this.translationEngines.get(projectId)!;

src/SIL.XForge.Scripture/ClientApp/src/app/machine-api/remote-translation-engine.spec.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { TranslationSources, WordGraph } from '@sillsdev/machine';
 import { of, throwError } from 'rxjs';
 import { anything, instance, mock, when } from 'ts-mockito';
+import { I18nService } from 'xforge-common/i18n.service';
 import { NoticeService } from 'xforge-common/notice.service';
 import { configureTestingModule, TestTranslocoModule } from 'xforge-common/test-utils';
 import { BuildDto } from './build-dto';
@@ -404,6 +405,7 @@ class TestEnvironment {
   readonly client: RemoteTranslationEngine;
   readonly mockedNoticeService: NoticeService;
   readonly mockedRouter: Router;
+  readonly mockedI18nService: I18nService;
   readonly ngZone: NgZone;
 
   constructor() {
@@ -425,11 +427,13 @@ class TestEnvironment {
     );
     this.mockedNoticeService = mock(NoticeService);
     this.mockedRouter = mock(Router);
+    this.mockedI18nService = mock(I18nService);
     this.client = new RemoteTranslationEngine(
       'project01',
       instance(this.mockedHttpClient),
       instance(this.mockedNoticeService),
-      instance(this.mockedRouter)
+      instance(this.mockedRouter),
+      instance(this.mockedI18nService)
     );
 
     this.ngZone = TestBed.inject(NgZone);

src/SIL.XForge.Scripture/ClientApp/src/app/machine-api/remote-translation-engine.ts

@@ -1,5 +1,4 @@
 import { Router } from '@angular/router';
-import { translate } from '@ngneat/transloco';
 import {
   createRange,
   InteractiveTranslationEngine,
@@ -13,6 +12,7 @@ import {
 } from '@sillsdev/machine';
 import { lastValueFrom, Observable, of, throwError } from 'rxjs';
 import { catchError, expand, filter, map, mergeMap, share, startWith, takeWhile } from 'rxjs/operators';
+import { I18nService } from 'xforge-common/i18n.service';
 import { NoticeService } from 'xforge-common/notice.service';
 import { AlignedWordPairDto } from './aligned-word-pair-dto';
 import { BuildDto } from './build-dto';
@@ -35,7 +35,8 @@ export class RemoteTranslationEngine implements InteractiveTranslationEngine {
     public readonly projectId: string,
     private readonly httpClient: HttpClient,
     private readonly noticeService: NoticeService,
-    private readonly router: Router
+    private readonly router: Router,
+    private readonly i18n: I18nService
   ) {}
 
   async translate(segment: string): Promise<TranslationResult> {
@@ -97,14 +98,14 @@ export class RemoteTranslationEngine implements InteractiveTranslationEngine {
     } catch (err: any) {
       if (err.status === 403 || err.status === 404 || err.status === 409) {
         this.noticeService.showError(
-          translate('error_messages.suggestion_engine_requires_retrain'),
-          translate('error_messages.go_to_retrain'),
+          this.i18n.translateStatic('error_messages.suggestion_engine_requires_retrain'),
+          this.i18n.translateStatic('error_messages.go_to_retrain'),
           () => {
             this.router.navigate(['projects', this.projectId, 'translate']);
           }
         );
       } else {
-        this.noticeService.showError(translate('error_messages.failed_to_retrieve_suggestions'));
+        this.noticeService.showError(this.i18n.translateStatic('error_messages.failed_to_retrieve_suggestions'));
       }
     }
 

src/SIL.XForge.Scripture/ClientApp/src/app/my-projects/my-projects.component.ts

@@ -1,11 +1,10 @@
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
 import { Component, DestroyRef, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { translate } from '@ngneat/transloco';
 import { isPTUser } from 'realtime-server/lib/esm/common/models/user';
 import { isResource } from 'realtime-server/lib/esm/scriptureforge/models/sf-project';
 import { Observable } from 'rxjs';
-import { en } from 'xforge-common/i18n.service';
+import { en, I18nService } from 'xforge-common/i18n.service';
 import { UserDoc } from 'xforge-common/models/user-doc';
 import { NoticeService } from 'xforge-common/notice.service';
 import { OnlineStatusService } from 'xforge-common/online-status.service';
@@ -53,6 +52,7 @@ export class MyProjectsComponent implements OnInit {
     private readonly permissions: PermissionsService,
     private readonly noticeService: NoticeService,
     private readonly router: Router,
+    private readonly i18n: I18nService,
     private destroyRef: DestroyRef
   ) {}
 
@@ -109,11 +109,11 @@ export class MyProjectsComponent implements OnInit {
     const isTranslateAccessible = this.permissions.canAccessTranslate(sfProject);
     const isCheckingAccessible = this.permissions.canAccessCommunityChecking(sfProject) ?? false;
 
-    const drafting = isTranslateAccessible ? translate('my_projects.drafting') : '';
+    const drafting = isTranslateAccessible ? this.i18n.translateStatic('my_projects.drafting') : '';
     const checking = isCheckingAccessible
       ? isTranslateAccessible
-        ? ' • ' + translate('app.community_checking')
-        : translate('app.community_checking')
+        ? ' • ' + this.i18n.translateStatic('app.community_checking')
+        : this.i18n.translateStatic('app.community_checking')
       : '';
 
     return `${drafting}${checking}`;
@@ -126,7 +126,7 @@ export class MyProjectsComponent implements OnInit {
       await this.projectService.onlineAddCurrentUser(projectId);
       this.router.navigate(['projects', projectId]);
     } catch {
-      this.noticeService.show(translate('my_projects.failed_to_join_project'));
+      this.noticeService.show(this.i18n.translateStatic('my_projects.failed_to_join_project'));
     } finally {
       this.noticeService.loadingFinished(this.constructor.name);
       this.joiningProjects.pop();
@@ -137,11 +137,11 @@ export class MyProjectsComponent implements OnInit {
     try {
       this.noticeService.loadingStarted(this.constructor.name);
       await this.projectService.onlineSyncUserRole(projectId);
-      this.noticeService.show(translate('my_projects.user_role_updated'));
+      this.noticeService.show(this.i18n.translateStatic('my_projects.user_role_updated'));
       const project = this.userParatextProjects.find(project => project.projectId === projectId);
       if (project != null) project.hasUserRoleChanged = false;
     } catch {
-      this.noticeService.showError(translate('my_projects.failed_to_update_user_role'));
+      this.noticeService.showError(this.i18n.translateStatic('my_projects.failed_to_update_user_role'));
     } finally {
       this.noticeService.loadingFinished(this.constructor.name);
     }