move isPageViewMedia to sharedService

src/app/components/board/board.component.ts

@@ -7,6 +7,7 @@ import { FormsModule } from '@angular/forms';
 import { FirebaseService } from '../../services/firebase.service';
 import { OverlayService } from '../../services/overlay.service';
 import { Router } from '@angular/router';
+import { SharedService } from '../../services/shared.service';
 
 @Component({
   selector: 'app-board',
@@ -20,6 +21,7 @@ export class BoardComponent {
     public dragDropService: DragDropService,
     public overlayService: OverlayService,
     private firebaseService: FirebaseService,
+    private sharedService: SharedService,
     private router: Router
   ) {}
   searchValue: string = '';
@@ -32,11 +34,9 @@ export class BoardComponent {
   }
 
   addNewTaskOverlay(status: string) {
-    if (window.innerWidth >= 650) {
-      this.overlayService.setOverlayData('newTaskOverlay', status);
-    } else {
-      this.router.navigate(['/add-task', status]);
-    }
+    this.sharedService.isPageViewMedia
+      ? this.router.navigate(['/add-task', status])
+      : this.overlayService.setOverlayData('newTaskOverlay', status);
   }
 
   getTaskStatus(status: string) {

src/app/components/board/task/task.component.html

@@ -13,6 +13,7 @@
         >
           {{ task.category }}
         </div>
+        @if (sharedService.isPageViewMedia) {
         <div class="menu-btn" (click)="handleMenuButtonClick($event, task.id)">
           <img
             class="menu-img"
@@ -20,6 +21,7 @@
             alt="menu"
           />
         </div>
+        }
       </div>
       <div class="headline">{{ task.title }}</div>
       <div class="description">

src/app/components/board/task/task.component.ts

@@ -6,6 +6,7 @@ import { FirebaseService } from '../../../services/firebase.service';
 import { OverlayService } from '../../../services/overlay.service';
 import { Router } from '@angular/router';
 import { TaskMenuComponent } from './task-menu/task-menu.component';
+import { SharedService } from '../../../services/shared.service';
 
 @Component({
   selector: 'app-task',
@@ -14,11 +15,8 @@ import { TaskMenuComponent } from './task-menu/task-menu.component';
   templateUrl: './task.component.html',
   styleUrl: './task.component.scss',
 })
-export class TaskComponent implements OnInit, OnDestroy {
+export class TaskComponent {
   @Input() task: Task = {} as Task;
-  private resizeListener!: () => void;
-
-  isPageViewMedia: boolean = window.innerWidth <= 650;
   isMenuOpen: boolean = false;
 
   categoryColors = new Map<string, string>([
@@ -30,22 +28,10 @@ export class TaskComponent implements OnInit, OnDestroy {
     public dragDropService: DragDropService,
     private firebaseService: FirebaseService,
     public overlayService: OverlayService,
+    public sharedService: SharedService,
     private router: Router
   ) {}
 
-  ngOnInit() {
-    this.resizeListener = this.onResize.bind(this);
-    window.addEventListener('resize', this.resizeListener);
-  }
-
-  ngOnDestroy() {
-    window.removeEventListener('resize', this.resizeListener);
-  }
-
-  onResize() {
-    this.isPageViewMedia = window.innerWidth <= 650;
-  }
-
   handleMenuButtonClick(event: MouseEvent, taskId: string) {
     event.stopPropagation();
     const targetElement = event.target as HTMLElement;
@@ -63,7 +49,7 @@ export class TaskComponent implements OnInit, OnDestroy {
     if (this.isMenuOpen) {
       this.toggleTaskMenu();
     }
-    this.isPageViewMedia
+    this.sharedService.isPageViewMedia
       ? this.router.navigate(['/task', taskId])
       : this.overlayService.setOverlayData('taskOverlay', taskId);
   }

src/app/services/shared.service.ts

@@ -7,7 +7,31 @@ export class SharedService {
   isAnyDialogOpen: boolean = false;
   isEditContactDialogOpen: boolean = false;
   isDeleteContactDialogOpen: boolean = false;
+  isPageViewMedia: boolean = window.innerWidth <= 650;
   currentUserId: string = '';
 
-  constructor() {}
+  private resizeListener!: () => void;
+
+  constructor() {
+    this.initResizeListener();
+  }
+
+  // CHECK VIEW WIDTH
+
+  private initResizeListener() {
+    this.resizeListener = this.onResize.bind(this);
+    window.addEventListener('resize', this.resizeListener);
+  }
+
+  private removeResizeListener() {
+    window.removeEventListener('resize', this.resizeListener);
+  }
+
+  private onResize() {
+    this.isPageViewMedia = window.innerWidth <= 650;
+  }
+
+  cleanup() {
+    this.removeResizeListener();
+  }
 }