generated from amosproj/amos202Xss0Y-projname
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #221 from amosproj/feat/xd-136
feat: simple state management using localStorage
- Loading branch information
Showing
13 changed files
with
225 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
apps/frontend/src/models/services/theme-storage.service.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { fakeAsync, TestBed, tick } from '@angular/core/testing'; | ||
|
|
||
| import { ThemeStorageService } from './theme-storage.service'; | ||
|
|
||
| describe('ThemeStorageService', () => { | ||
| let service: ThemeStorageService; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [], | ||
| providers: [] | ||
| }); | ||
| service = TestBed.inject(ThemeStorageService); | ||
|
|
||
| jest.spyOn(Storage.prototype, 'setItem'); | ||
| Storage.prototype.setItem = jest.fn(); | ||
| }); | ||
|
|
||
| it('should be created', () => { | ||
| expect(service).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should set lightmode to false initially and change it when toggled', fakeAsync(() => { | ||
| // we need to wait for the effect to be done | ||
| tick(); | ||
| expect(service.getLightMode()()).toBeFalsy(); | ||
| expect(localStorage.setItem).toHaveBeenCalledWith('lightMode', 'false'); | ||
|
|
||
| service.toggleTheme(); | ||
|
|
||
| tick(); | ||
| expect(service.getLightMode()()).toBeTruthy(); | ||
| expect(localStorage.setItem).toHaveBeenCalledWith('lightMode', 'true'); | ||
| })); | ||
|
|
||
| }); |
40 changes: 40 additions & 0 deletions
40
apps/frontend/src/models/services/theme-storage.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { effect, Injectable, signal } from '@angular/core'; | ||
| import { themeSwitcher } from '@siemens/ix'; | ||
|
|
||
| /** | ||
| * Service that stores the current theme in the browsers localStorage as a boolean "lightMode" | ||
| */ | ||
| @Injectable({ | ||
| providedIn: 'root' | ||
| }) | ||
| export class ThemeStorageService { | ||
|
|
||
| // like this lightMode is false by default because getItem will return null | ||
| private lightMode = signal(window.localStorage.getItem('lightMode') === 'true'); | ||
|
|
||
| constructor() { | ||
| effect(() => { | ||
| const lm = this.lightMode(); | ||
| window.localStorage.setItem('lightMode', lm ? 'true' : 'false'); | ||
| themeSwitcher.setTheme(lm ? 'theme-classic-light' : 'theme-classic-dark'); | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * flips the lightMode signal and thus results in | ||
| * the "lightMode" in the localStorage to be changed | ||
| * and also calls the Siemens themeSwitcher | ||
| */ | ||
| toggleTheme() { | ||
| this.lightMode.update(value => !value); | ||
| } | ||
|
|
||
| /** | ||
| * returns the lightMode Signal for easy use in components | ||
| * f.e. to change an icon depending on the mode | ||
| */ | ||
| getLightMode() { | ||
| return this.lightMode; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export * from './lib/interfaces'; | ||
| export * from './lib/tokens'; | ||
| export * from './lib/services'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export * from './interfaces'; | ||
| export * from './tokens'; | ||
| export * from './services'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './local-storage.service'; |
53 changes: 53 additions & 0 deletions
53
libs/common/frontend/models/src/lib/services/local-storage.service.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { LocalStorageService } from './local-storage.service'; | ||
|
|
||
| describe('LocalStorageService', () => { | ||
| let service: LocalStorageService; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({}); | ||
| service = TestBed.inject(LocalStorageService); | ||
|
|
||
| jest.spyOn(Storage.prototype, 'setItem'); | ||
| Storage.prototype.setItem = jest.fn(); | ||
| }); | ||
|
|
||
| it('should be created', () => { | ||
| expect(service).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('register should set it to the default value if it is not set', () => { | ||
| service.register('test', 'false'); | ||
|
|
||
| expect(localStorage.setItem).toHaveBeenCalledWith('test', 'false'); | ||
| }); | ||
|
|
||
| it('register should not overwrite values if they are already set', () => { | ||
|
|
||
| Storage.prototype.getItem = jest.fn().mockReturnValue("true"); | ||
|
|
||
| service.register('test', 'false'); | ||
| expect(localStorage.setItem).toHaveBeenCalledTimes(0); | ||
| }); | ||
|
|
||
| it('set should correctly set the localStorage and signal', () => { | ||
| service.set('test', 'true'); | ||
|
|
||
| expect(localStorage.setItem).toHaveBeenCalledWith('test', 'true'); | ||
| expect(service.get('test')()).toBe(true); | ||
| }); | ||
|
|
||
| it('set should correctly update signal', () => { | ||
|
|
||
| service.set('test', 'true'); | ||
|
|
||
| const signal = service.get('test') | ||
| expect(signal()).toBe('true'); | ||
|
|
||
| service.set('test', 'false'); | ||
| expect(signal()).toBe('false'); | ||
| }); | ||
|
|
||
|
|
||
| }); |
58 changes: 58 additions & 0 deletions
58
libs/common/frontend/models/src/lib/services/local-storage.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { Injectable, signal } from '@angular/core'; | ||
|
|
||
| /** | ||
| * Manages string values in localStorage with reactive signals. | ||
| * Allows registering keys with default values, setting, and getting values reactively. | ||
| */ | ||
|
|
||
| @Injectable({ | ||
| providedIn: 'root' | ||
| }) | ||
| export class LocalStorageService { | ||
|
|
||
| private signals = new Map<string, ReturnType<typeof signal>>(); | ||
|
|
||
| /** | ||
| * Registers a key with a default value if not already set. | ||
| * @param key The localStorage key. | ||
| * @param defaultValue The default value. | ||
| */ | ||
| register(key: string, defaultValue: string) { | ||
| if (localStorage.getItem(key) === null) { | ||
| this.set(key, defaultValue); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Sets the value for a key and updates its signal. | ||
| * @param key The localStorage key. | ||
| * @param value The string value to set. | ||
| */ | ||
| set(key: string, value: string){ | ||
| localStorage.setItem(key, String(value)); | ||
| this.getOrCreateSignal(key).set(value); | ||
| } | ||
|
|
||
| /** | ||
| * Returns the signal for a key, creating it if necessary. | ||
| * @param key The localStorage key. | ||
| * @returns The signal for the key. | ||
| */ | ||
| get(key: string){ | ||
| return this.getOrCreateSignal(key); | ||
| } | ||
|
|
||
| /** | ||
| * Creates or retrieves a signal for a key. | ||
| * @param key The localStorage key. | ||
| * @returns The signal for the key. | ||
| */ | ||
| private getOrCreateSignal(key: string) { | ||
| if (!this.signals.has(key)) { | ||
| const initialValue = localStorage.getItem(key); | ||
| this.signals.set(key, signal(initialValue)); | ||
| } | ||
| return this.signals.get(key)!; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters