From 02ddbedbd3c7d52f43817d1addff11a1c94b49b6 Mon Sep 17 00:00:00 2001
From: Ivano Alvino <ivano.alvino@gmail.com>
Date: Wed, 1 Feb 2023 00:16:57 +0100
Subject: [PATCH] Persist and load theme settings in local storage

---
 .../theme-manager/theme-manager.service.ts    | 42 +++++++++++++++++++
 .../theme-selector.component.ts               | 11 ++++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/services/theme-manager/theme-manager.service.ts b/frontend/src/app/services/theme-manager/theme-manager.service.ts
index 3de0a80..0af3358 100644
--- a/frontend/src/app/services/theme-manager/theme-manager.service.ts
+++ b/frontend/src/app/services/theme-manager/theme-manager.service.ts
@@ -3,8 +3,20 @@ import {Injectable} from '@angular/core';
 @Injectable({ providedIn: 'root' })
 export class ThemeManagerService {
 
+  /**
+   * The key used to store the chosen theme in local storage.
+   */
+  private static readonly SAVED_THEME: string = "saved_theme_id";
+
+  /**
+   * The currently active theme.
+   */
   public activeTheme: ThemeEnum = ThemeEnum.INDIGO_PINK;
 
+  /**
+   * Set the given theme as the active one.
+   * @param theme The theme to set as active
+   */
   public setTheme(theme: ThemeEnum): void {
     let linkElementForKey: HTMLLinkElement;
 
@@ -39,9 +51,13 @@ export class ThemeManagerService {
         break;
     }
 
+    localStorage.setItem(ThemeManagerService.SAVED_THEME, theme.toString());
     this.activeTheme = theme;
   }
 
+  /**
+   * Remove the current class from the body element that is actually specifying the theme css to load.
+   */
   private removeCurrentThemeClassFromBodyElement(): void {
     switch (this.activeTheme) {
       case ThemeEnum.DEEP_PURPLE:
@@ -59,16 +75,28 @@ export class ThemeManagerService {
     }
   }
 
+  /**
+   * Find or create the <link> html element with the classname containing the given key.
+   * @param key The string that will allow to select a specific html link element.
+   */
   private getLinkElementForKey(key: string): HTMLLinkElement {
     return this.getExistingLinkElementByKey(key) || this.createLinkElementWithKey(key);
   }
 
+  /**
+   * Get the <link> html element with the classname containing the given key.
+   * @param key The string that will allow to select a specific html link element.
+   */
   private getExistingLinkElementByKey(key: string): HTMLLinkElement {
     return document.head.querySelector(
       `link[rel="stylesheet"].${this.getClassNameForKey(key)}`
     );
   }
 
+  /**
+   * Create a link element with a class containing the given key.
+   * @param key A string that will end up in a class in the html link element.
+   */
   private createLinkElementWithKey(key: string): HTMLLinkElement {
     const linkEl = document.createElement('link');
     linkEl.setAttribute('rel', 'stylesheet');
@@ -77,9 +105,23 @@ export class ThemeManagerService {
     return linkEl;
   }
 
+  /**
+   * Elaborate the given key and create a unique class name.
+   * @param key The string to use in the class name.
+   */
   private getClassNameForKey(key: string): string {
     return `style-manager-${key}`;
   }
+
+  /**
+   * Look for existing settings saved in local storage and load the theme.
+   */
+  public loadSavedTheme(): void {
+    const savedThemeId = localStorage.getItem(ThemeManagerService.SAVED_THEME);
+    if (savedThemeId) {
+      this.setTheme(parseInt(savedThemeId));
+    }
+  }
 }
 
 export enum ThemeEnum {
diff --git a/frontend/src/app/theme-selector/theme-selector.component.ts b/frontend/src/app/theme-selector/theme-selector.component.ts
index 9efff65..b6bccd1 100644
--- a/frontend/src/app/theme-selector/theme-selector.component.ts
+++ b/frontend/src/app/theme-selector/theme-selector.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ThemeEnum, ThemeManagerService} from "../services/theme-manager/theme-manager.service";
 
 @Component({
@@ -6,8 +6,11 @@ import {ThemeEnum, ThemeManagerService} from "../services/theme-manager/theme-ma
   templateUrl: './theme-selector.component.html',
   styleUrls: ['./theme-selector.component.scss']
 })
-export class ThemeSelectorComponent {
+export class ThemeSelectorComponent implements OnInit {
 
+  /**
+   * Allow the template to access enum values.
+   */
   public ThemeEnum = ThemeEnum;
 
   get selectedTheme(): ThemeEnum {
@@ -20,4 +23,8 @@ export class ThemeSelectorComponent {
 
   constructor(private ThemeManagerService: ThemeManagerService) {
   }
+
+  public ngOnInit(): void {
+    this.ThemeManagerService.loadSavedTheme();
+  }
 }