From 4ca730697c7725dd7f241ab340e5e34107f9b071 Mon Sep 17 00:00:00 2001 From: softsimon Date: Mon, 10 Jan 2022 15:50:21 +0400 Subject: [PATCH] Adding current language to network dropdown links fixes #1094 --- frontend/src/app/app.module.ts | 2 + .../bisq-master-page.component.html | 10 ++--- .../bisq-master-page.component.ts | 6 ++- .../app/components/block/block.component.ts | 1 - .../language-selector.component.ts | 36 ++++------------ .../liquid-master-page.component.html | 8 ++-- .../liquid-master-page.component.ts | 4 ++ .../master-page/master-page.component.html | 6 +-- .../master-page/master-page.component.ts | 4 ++ .../mempool-blocks.component.ts | 1 - .../search-form/search-form.component.ts | 1 - frontend/src/app/services/language.service.ts | 41 +++++++++++++++++++ frontend/src/app/shared/shared.module.ts | 1 + 13 files changed, 76 insertions(+), 45 deletions(-) create mode 100644 frontend/src/app/services/language.service.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index d6adebbf1..fd7ab3a3d 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -58,6 +58,7 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component'; import { StorageService } from './services/storage.service'; import { HttpCacheInterceptor } from './services/http-cache.interceptor'; +import { LanguageService } from './services/language.service'; import { SponsorComponent } from './components/sponsor/sponsor.component'; import { PushTransactionComponent } from './components/push-transaction/push-transaction.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @@ -128,6 +129,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; AudioService, SeoService, StorageService, + LanguageService, { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true } ], bootstrap: [AppComponent] diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html index 777fa6680..d77f96423 100644 --- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html +++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html @@ -15,13 +15,13 @@
- Mainnet - Signet - Testnet + Mainnet + Signet + Testnet
Layer 2 Networks
- Liquid - Liquid Testnet + Liquid + Liquid Testnet
diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts index 4bb21a414..0f10a106d 100644 --- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts +++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { Observable } from 'rxjs'; +import { LanguageService } from 'src/app/services/language.service'; @Component({ selector: 'app-bisq-master-page', @@ -12,14 +13,17 @@ export class BisqMasterPageComponent implements OnInit { navCollapsed = false; env: Env; isMobile = window.innerWidth <= 767.98; - + urlLanguage: string; + constructor( private stateService: StateService, + private languageService: LanguageService, ) { } ngOnInit() { this.env = this.stateService.env; this.connectionState$ = this.stateService.connectionState$; + this.urlLanguage = this.languageService.getLanguageForUrl(); } collapse(): void { diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 2f08fee85..a3841a3a6 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -13,7 +13,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url. @Component({ selector: 'app-block', templateUrl: './block.component.html', - providers: [RelativeUrlPipe], styleUrls: ['./block.component.scss'] }) export class BlockComponent implements OnInit, OnDestroy { diff --git a/frontend/src/app/components/language-selector/language-selector.component.ts b/frontend/src/app/components/language-selector/language-selector.component.ts index f90a3a5e9..a677c0f23 100644 --- a/frontend/src/app/components/language-selector/language-selector.component.ts +++ b/frontend/src/app/components/language-selector/language-selector.component.ts @@ -1,8 +1,7 @@ -import { DOCUMENT } from '@angular/common'; import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; -import { Language, languages } from 'src/app/app.constants'; -import { StateService } from 'src/app/services/state.service'; +import { languages } from 'src/app/app.constants'; +import { LanguageService } from 'src/app/services/language.service'; @Component({ selector: 'app-language-selector', @@ -12,42 +11,21 @@ import { StateService } from 'src/app/services/state.service'; }) export class LanguageSelectorComponent implements OnInit { languageForm: FormGroup; - languages: Language[]; + languages = languages; constructor( private formBuilder: FormBuilder, - private stateService: StateService, - @Inject(DOCUMENT) private document: Document + private languageService: LanguageService, ) { } ngOnInit() { - this.languages = languages; - this.languageForm = this.formBuilder.group({ - language: [''] + language: ['en'] }); - this.setLanguageFromUrl(); - } - - setLanguageFromUrl() { - const urlLanguage = this.document.location.pathname.split('/')[1]; - if (this.languages.map((lang) => lang.code).indexOf(urlLanguage) > -1) { - this.languageForm.get('language').setValue(urlLanguage); - } else { - this.languageForm.get('language').setValue('en'); - } + this.languageForm.get('language').setValue(this.languageService.getLanguage()); } changeLanguage() { - const language = this.languageForm.get('language').value; - try { - document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`; - } catch (e) { } - - if (this.stateService.env.BASE_MODULE === 'mempool') { - this.document.location.href = `/${language}/${this.stateService.network}`; - } else { - this.document.location.href = `/${language}`; - } + this.languageService.setLanguage(this.languageForm.get('language').value); } } diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html index 58bd9bd73..b3635ceae 100644 --- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html +++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html @@ -16,11 +16,11 @@
- Mainnet - Signet - Testnet + Mainnet + Signet + Testnet
Layer 2 Networks
- Bisq + Bisq
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts index f71e63e46..65f07320d 100644 --- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts +++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { merge, Observable, of} from 'rxjs'; +import { LanguageService } from 'src/app/services/language.service'; @Component({ selector: 'app-liquid-master-page', @@ -14,15 +15,18 @@ export class LiquidMasterPageComponent implements OnInit { isMobile = window.innerWidth <= 767.98; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; network$: Observable; + urlLanguage: string; constructor( private stateService: StateService, + private languageService: LanguageService, ) { } ngOnInit() { this.env = this.stateService.env; this.connectionState$ = this.stateService.connectionState$; this.network$ = merge(of(''), this.stateService.networkChanged$); + this.urlLanguage = this.languageService.getLanguageForUrl(); } collapse(): void { diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index 85b8d250f..8d871e3b6 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -20,9 +20,9 @@
Layer 2 Networks
- Bisq - Liquid - Liquid Testnet + Bisq + Liquid + Liquid Testnet diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts index 32466afa7..fcff5629c 100644 --- a/frontend/src/app/components/master-page/master-page.component.ts +++ b/frontend/src/app/components/master-page/master-page.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { Observable, merge, of } from 'rxjs'; +import { LanguageService } from 'src/app/services/language.service'; @Component({ selector: 'app-master-page', @@ -14,15 +15,18 @@ export class MasterPageComponent implements OnInit { navCollapsed = false; isMobile = window.innerWidth <= 767.98; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; + urlLanguage: string; constructor( private stateService: StateService, + private languageService: LanguageService, ) { } ngOnInit() { this.env = this.stateService.env; this.connectionState$ = this.stateService.connectionState$; this.network$ = merge(of(''), this.stateService.networkChanged$); + this.urlLanguage = this.languageService.getLanguageForUrl(); } collapse(): void { diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 8db685248..5257d6a9e 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -12,7 +12,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url. selector: 'app-mempool-blocks', templateUrl: './mempool-blocks.component.html', styleUrls: ['./mempool-blocks.component.scss'], - providers: [RelativeUrlPipe], changeDetection: ChangeDetectionStrategy.OnPush, }) export class MempoolBlocksComponent implements OnInit, OnDestroy { diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts index b9cb1ee9c..40f2c1e88 100644 --- a/frontend/src/app/components/search-form/search-form.component.ts +++ b/frontend/src/app/components/search-form/search-form.component.ts @@ -13,7 +13,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url. selector: 'app-search-form', templateUrl: './search-form.component.html', styleUrls: ['./search-form.component.scss'], - providers: [RelativeUrlPipe], changeDetection: ChangeDetectionStrategy.OnPush }) export class SearchFormComponent implements OnInit { diff --git a/frontend/src/app/services/language.service.ts b/frontend/src/app/services/language.service.ts new file mode 100644 index 000000000..b96b37e8b --- /dev/null +++ b/frontend/src/app/services/language.service.ts @@ -0,0 +1,41 @@ +import { DOCUMENT } from '@angular/common'; +import { Inject, Injectable } from '@angular/core'; +import { languages } from 'src/app/app.constants'; +import { RelativeUrlPipe } from '../shared/pipes/relative-url/relative-url.pipe'; + +@Injectable({ + providedIn: 'root' +}) +export class LanguageService { + private language = 'en'; + private languages = languages; + constructor( + @Inject(DOCUMENT) private document: Document, + private relativeUrlPipe: RelativeUrlPipe, + ) { } + + getLanguage(): string { + return this.language; + } + + getLanguageForUrl() { + return this.language === 'en' ? '' : '/' + this.language; + } + + setLocalLanguage() { + const urlLanguage = this.document.location.pathname.split('/')[1]; + if (this.languages.map((lang) => lang.code).indexOf(urlLanguage) > -1) { + this.language = urlLanguage; + } else { + this.language = 'en'; + } + } + + setLanguage(language: string): void { + try { + document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`; + } catch (e) { } + + this.document.location.href = this.relativeUrlPipe.transform(`/${language}/`); + } +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index ead7b20c2..b29303c27 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -60,6 +60,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive'; ], providers: [ VbytesPipe, + RelativeUrlPipe, ], exports: [ NgbAccordionModule,