chore(): moved dark mode component in share module

Author: Tony133

src/app/app.module.ts

@@ -29,7 +29,6 @@ import { BasePageComponent } from './homepage/pages/page/page.component';
 import { PipesComponent } from './homepage/pages/pipes/pipes.component';
 import { SupportComponent } from './homepage/pages/support/support.component';
 import { SharedModule } from './shared/shared.module';
-import { DarkModeToggleComponent } from './homepage/dark-mode-toggle/dark-mode-toggle.component';
 
 @NgModule({
   imports: [
@@ -65,7 +64,6 @@ import { DarkModeToggleComponent } from './homepage/dark-mode-toggle/dark-mode-t
     EnterpriseComponent,
     SocialWrapperComponent,
     NewsletterComponent,
-    DarkModeToggleComponent,
   ],
   bootstrap: [AppComponent],
   providers: [],

src/app/homepage/dark-mode-toggle/dark-mode-toggle.component.html renamed to src/app/shared/components/dark-mode-toggle/dark-mode-toggle.component.html

@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { MediaMatcher } from '@angular/cdk/layout';
+import { StorageService } from '../../services/storage.service';
 
 @Component({
   selector: 'app-dark-mode-toggle',
@@ -14,6 +15,7 @@ export class DarkModeToggleComponent implements OnInit {
     @Inject(DOCUMENT)
     private readonly document: Document,
     private readonly mediaMatcher: MediaMatcher,
+    private readonly storageService: StorageService,
   ) {}
 
   ngOnInit() {
@@ -27,12 +29,12 @@ export class DarkModeToggleComponent implements OnInit {
 
   toggleDarkMode() {
     const isDarkMode = !this.isDarkMode;
-    localStorage.setItem('theme-mode', isDarkMode.toString());
+    this.storageService.set('theme-mode', isDarkMode.toString());
     this.setDarkMode(isDarkMode);
   }
 
   private getUserSettingsIsDarkMode(): boolean {
-    return localStorage.getItem('theme-mode') === 'true';
+    return this.storageService.get('theme-mode') === 'true';
   }
 
   private setDarkMode(isDarkMode: boolean) {

src/app/homepage/dark-mode-toggle/dark-mode-toggle.component.scss renamed to src/app/shared/components/dark-mode-toggle/dark-mode-toggle.component.scss

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StorageService {
+  set(key, val: unknown): void {
+    localStorage.setItem(key, JSON.stringify(val));
+  }
+
+  /**
+   * Returns the localStorage item for the given key, if any.
+   * Returns null elsewhere
+   */
+  get(key: string): unknown | null {
+    const result = localStorage.getItem(key);
+
+    return result ? JSON.parse(result) : null;
+  }
+
+  remove(key: string): void {
+    const hasStorageKey = this.get(key);
+
+    if (hasStorageKey) {
+      localStorage.removeItem(key);
+    }
+  }
+}

src/app/homepage/dark-mode-toggle/dark-mode-toggle.component.spec.ts renamed to src/app/shared/components/dark-mode-toggle/dark-mode-toggle.component.spec.ts

@@ -1,5 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { StorageService } from './services/storage.service';
+import { DarkModeToggleComponent } from './components/dark-mode-toggle/dark-mode-toggle.component';
 import { BannerCoursesAuthComponent } from './components/banner-courses-auth/banner-courses-auth.component';
 import { BannerCoursesGraphQLCodeFirstComponent } from './components/banner-courses-graphql-cf/banner-courses-graphql-cf.component';
 import { BannerDevtoolsComponent } from './components/banner-devtools/banner-devtools.component';
@@ -24,6 +26,7 @@ import { ExtensionPipe } from './pipes/extension.pipe';
     BannerCoursesGraphQLCodeFirstComponent,
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
+    DarkModeToggleComponent,
   ],
   exports: [
     ExtensionPipe,
@@ -36,6 +39,8 @@ import { ExtensionPipe } from './pipes/extension.pipe';
     BannerCoursesGraphQLCodeFirstComponent,
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
+    DarkModeToggleComponent,
   ],
+  providers: [StorageService],
 })
 export class SharedModule {}