From 5eef948132fca6678dc4af2946e8fcd887e1a317 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 25 Mar 2020 21:16:01 +0300 Subject: [PATCH] fix(theme): save theme in local storage after theme changing --- src/app/@core/utils/theme.service.ts | 17 ++++++++++++++++ .../components/header/header.component.ts | 3 +++ src/app/themes-screen/starter.component.ts | 20 ++++--------------- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/app/@core/utils/theme.service.ts b/src/app/@core/utils/theme.service.ts index b52ef350..e1dcef33 100644 --- a/src/app/@core/utils/theme.service.ts +++ b/src/app/@core/utils/theme.service.ts @@ -1,6 +1,7 @@ import {Injectable, OnDestroy} from '@angular/core'; import {Observable} from 'rxjs'; import {takeWhile} from 'rxjs/operators'; +import {environment} from '../../../environments/environment'; @Injectable() export class CurrentThemeService implements OnDestroy { @@ -10,6 +11,22 @@ export class CurrentThemeService implements OnDestroy { subscriber.next(localStorage.theme); }).pipe(takeWhile(() => this.alive)); + setCurrentTheme(themeName: string): void { + const currentTheme = { + themeName: themeName, + expires_in: this.calculateExpiration(environment.currentThemeLife), + }; + + localStorage.setItem('theme', JSON.stringify(currentTheme)); + } + + calculateExpiration(iat: number): number { + const currentDate = new Date().getTime(); + const timestamp = iat || Math.floor(Date.now() / 1000); + + return Math.floor(timestamp + currentDate); + } + ngOnDestroy(): void { this.alive = false; } diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts index abbb64cb..a6432dbe 100644 --- a/src/app/@theme/components/header/header.component.ts +++ b/src/app/@theme/components/header/header.component.ts @@ -6,6 +6,7 @@ import { AnalyticsService, LayoutService } from '../../../@core/utils'; import { map, takeUntil } from 'rxjs/operators'; import { Subject, Observable } from 'rxjs'; import { RippleService } from '../../../@core/utils/ripple.service'; +import {CurrentThemeService} from '../../../@core/utils/theme.service'; @Component({ selector: 'ngx-header', @@ -59,6 +60,7 @@ export class HeaderComponent implements OnInit, OnDestroy { private breakpointService: NbMediaBreakpointsService, private rippleService: RippleService, private analytics: AnalyticsService, + private currentThemeService: CurrentThemeService, ) { this.materialTheme$ = this.themeService.onThemeChange() .pipe(map(theme => { @@ -99,6 +101,7 @@ export class HeaderComponent implements OnInit, OnDestroy { } changeTheme(themeName: string) { + this.currentThemeService.setCurrentTheme(themeName); this.themeService.changeTheme(themeName); } diff --git a/src/app/themes-screen/starter.component.ts b/src/app/themes-screen/starter.component.ts index 420acfab..2fd2b798 100644 --- a/src/app/themes-screen/starter.component.ts +++ b/src/app/themes-screen/starter.component.ts @@ -2,7 +2,7 @@ import {Component, OnDestroy} from '@angular/core'; import {NbMediaBreakpoint, NbThemeService} from '@nebular/theme'; import {Router} from '@angular/router'; import {AnalyticsService} from '../@core/utils'; -import { environment } from '../../environments/environment'; +import {CurrentThemeService} from '../@core/utils/theme.service'; @Component({ selector: 'ngx-starter', @@ -41,18 +41,13 @@ export class NgxStarterComponent implements OnDestroy { ]; constructor(private router: Router, - protected themeService: NbThemeService, + private themeService: NbThemeService, + private currentThemeService: CurrentThemeService, private analytics: AnalyticsService, ) {} navigate(themeName: string) { - const currentTheme = { - themeName: themeName, - expires_in: this.calculateExpiration(environment.currentThemeLife), - }; - - localStorage.setItem('theme', JSON.stringify(currentTheme)); - + this.currentThemeService.setCurrentTheme(themeName); this.themeService.changeTheme(themeName); this.router.navigate(['/pages/dashboard'], {queryParams: {theme: themeName}}); } @@ -63,11 +58,4 @@ export class NgxStarterComponent implements OnDestroy { ngOnDestroy() { } - - calculateExpiration(iat: number): number { - const currentDate = new Date().getTime(); - const timestamp = iat || Math.floor(Date.now() / 1000); - - return Math.floor(timestamp + currentDate); - } }