merge user/task service in firebase service

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

@@ -1,11 +1,10 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { DragDropService } from '../../services/drag-drop.service';
 import { CommonModule } from '@angular/common';
-import { Task } from '../../interfaces/task.interface';
-import { TaskService } from '../../services/task.service';
 import { TaskComponent } from './task/task.component';
 import { TaskEmptyComponent } from './task/task-empty/task-empty.component';
 import { FormsModule } from '@angular/forms';
+import { FirebaseService } from '../../services/firebase.service';
 
 @Component({
   selector: 'app-board',
@@ -17,7 +16,7 @@ import { FormsModule } from '@angular/forms';
 export class BoardComponent {
   constructor(
     public dragDropService: DragDropService,
-    private taskService: TaskService
+    private firebaseService: FirebaseService
   ) {}
   searchValue: string = '';
   searchInput: boolean = false;
@@ -30,27 +29,29 @@ export class BoardComponent {
 
   getTaskStatus(status: string) {
     if (this.updateSearchInput()) {
-      return this.taskService
+      return this.firebaseService
         .getFiltertTasks()
         .filter((task) => task.status === status);
     } else {
-      return this.taskService
+      return this.firebaseService
         .getAllTasks()
         .filter((task) => task.status === status);
     }
   }
 
   handleItemDropped(id: string, status: string): void {
-    const index = this.taskService.allTasks.findIndex((task) => task.id === id);
+    const index = this.firebaseService.allTasks.findIndex(
-    const filteredIndex = this.taskService.filteredTasks.findIndex(
+      (task) => task.id === id
+    );
+    const filteredIndex = this.firebaseService.filteredTasks.findIndex(
       (task) => task.id === id
     );
     if (index !== -1) {
-      this.taskService.allTasks[index].status = status;
+      this.firebaseService.allTasks[index].status = status;
       if (filteredIndex !== -1) {
-        this.taskService.filteredTasks[filteredIndex].status = status;
+        this.firebaseService.filteredTasks[filteredIndex].status = status;
       }
-      this.taskService.updateTask(id, index);
+      this.firebaseService.updateTask(id, index);
     }
   }
 
@@ -71,7 +72,7 @@ export class BoardComponent {
 
   searchTask(): void {
     this.updateSearchInput();
-    this.taskService.filteredTasks = this.taskService
+    this.firebaseService.filteredTasks = this.firebaseService
       .getAllTasks()
       .filter(
         (task) =>

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

@@ -1,9 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { DragDropService } from '../../../services/drag-drop.service';
-import { TaskService } from '../../../services/task.service';
-import { UserService } from '../../../services/user.service';
 import { Task } from '../../../interfaces/task.interface';
+import { FirebaseService } from '../../../services/firebase.service';
 
 @Component({
   selector: 'app-task',
@@ -22,7 +21,7 @@ export class TaskComponent {
 
   constructor(
     public dragDropService: DragDropService,
-    private userService: UserService
+    private firebaseService: FirebaseService
   ) {}
 
   // Subtasks
@@ -45,7 +44,7 @@ export class TaskComponent {
 
   userBadged(id: number) {
     const userId = String(id);
-    const user = this.userService
+    const user = this.firebaseService
       .getAllUsers()
       .find((user) => user.id === userId);
     if (user) {
@@ -63,7 +62,7 @@ export class TaskComponent {
 
   userBadgedColor(id: number) {
     const userId = String(id);
-    const user = this.userService
+    const user = this.firebaseService
       .getAllUsers()
       .find((user) => user.id === userId);
     if (user) {

src/app/components/contacts/contact-delete/contact-delete.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input } from '@angular/core';
 import { SharedService } from '../../../services/shared.service';
 import { TranslateModule } from '@ngx-translate/core';
-import { UserService } from '../../../services/user.service';
 import { Router } from '@angular/router';
+import { FirebaseService } from '../../../services/firebase.service';
 
 @Component({
   selector: 'app-contact-delete',
@@ -16,12 +16,12 @@ export class ContactDeleteComponent {
 
   constructor(
     private sharedService: SharedService,
-    private userService: UserService,
+    private firebaseService: FirebaseService,
     private router: Router
   ) {}
 
   deleteContact() {
-    this.userService.deleteUser(this.currentUserId);
+    this.firebaseService.deleteUser(this.currentUserId);
     this.router.navigate(['contacts']);
     this.sharedService.isDeleteContactDialogOpen = false;
     this.sharedService.isAnyDialogOpen = false;

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -22,17 +22,20 @@
       <div
         class="circle"
         [ngStyle]="{
-          'background-color': userService.getUserDetails(currentUserId, 'color')
+          'background-color': firebaseService.getUserDetails(
+            currentUserId,
+            'color'
+          )
         }"
       >
         <div class="initials">
-          {{ userService.getUserDetails(currentUserId, "initials") }}
+          {{ firebaseService.getUserDetails(currentUserId, "initials") }}
         </div>
       </div>
       <div class="word-wrap">
         <div class="name">
-          {{ userService.getUserDetails(currentUserId, "firstName") }}
+          {{ firebaseService.getUserDetails(currentUserId, "firstName") }}
-          {{ userService.getUserDetails(currentUserId, "lastName") }}
+          {{ firebaseService.getUserDetails(currentUserId, "lastName") }}
         </div>
         <div class="btns">
           <div class="btn btn-edit">
@@ -54,13 +57,19 @@
       <div class="info">
         <p>Email:</p>
         <a
-          [href]="'mail:' + userService.getUserDetails(currentUserId, 'email')"
+          [href]="
+            'mail:' + firebaseService.getUserDetails(currentUserId, 'email')
+          "
         >
-          {{ userService.getUserDetails(currentUserId, "email") }}
+          {{ firebaseService.getUserDetails(currentUserId, "email") }}
         </a>
         <p>Phone:</p>
-        <a [href]="'tel:' + userService.getUserDetails(currentUserId, 'phone')">
+        <a
-          {{ userService.getUserDetails(currentUserId, "phone") }}
+          [href]="
+            'tel:' + firebaseService.getUserDetails(currentUserId, 'phone')
+          "
+        >
+          {{ firebaseService.getUserDetails(currentUserId, "phone") }}
         </a>
       </div>
     </div>

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -1,11 +1,11 @@
 import { Component, HostListener, Input } from '@angular/core';
-import { UserService } from '../../../services/user.service';
 import { CommonModule } from '@angular/common';
 import { ContactsComponent } from '../contacts.component';
 import { Router } from '@angular/router';
 import { ContactEditComponent } from '../contact-edit/contact-edit.component';
 import { SharedService } from '../../../services/shared.service';
 import { ContactNavComponent } from '../contact-nav/contact-nav.component';
+import { FirebaseService } from '../../../services/firebase.service';
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
@@ -24,9 +24,9 @@ export class ContactDetailComponent {
   isMobileNavbarOpen: boolean = false;
 
   constructor(
-    public userService: UserService,
     private router: Router,
-    public sharedService: SharedService
+    public sharedService: SharedService,
+    public firebaseService: FirebaseService
   ) {}
 
   closeUserDetails() {

src/app/components/contacts/contact-edit/contact-edit.component.html

@@ -12,14 +12,14 @@
         <div
           class="circle"
           [ngStyle]="{
-            'background-color': userService.getUserDetails(
+            'background-color': firebaseService.getUserDetails(
               currentUserId,
               'color'
             )
           }"
         >
           <div class="initials">
-            {{ userService.getUserDetails(currentUserId, "initials") }}
+            {{ firebaseService.getUserDetails(currentUserId, "initials") }}
           </div>
         </div>
       </div>

src/app/components/contacts/contact-edit/contact-edit.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input } from '@angular/core';
 import { ContactFormComponent } from '../contact-form/contact-form.component';
 import { CommonModule } from '@angular/common';
-import { UserService } from '../../../services/user.service';
 import { BtnCloseComponent } from '../../../shared/components/buttons/btn-close/btn-close.component';
+import { FirebaseService } from '../../../services/firebase.service';
 
 @Component({
   selector: 'app-contact-edit',
@@ -14,5 +14,5 @@ import { BtnCloseComponent } from '../../../shared/components/buttons/btn-close/
 export class ContactEditComponent {
   @Input() currentUserId!: string;
 
-  constructor(public userService: UserService) {}
+  constructor(public firebaseService: FirebaseService) {}
 }

src/app/components/contacts/contact-form/contact-form.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
-import { UserService } from '../../../services/user.service';
 import { SharedService } from '../../../services/shared.service';
+import { FirebaseService } from '../../../services/firebase.service';
 
 @Component({
   selector: 'app-contact-form',
@@ -15,7 +15,7 @@ export class ContactFormComponent implements OnChanges {
   @Input() currentUserId!: string;
 
   constructor(
-    public userService: UserService,
+    private firebaseService: FirebaseService,
     private sharedService: SharedService
   ) {
     this.updateContactData();
@@ -35,23 +35,23 @@ export class ContactFormComponent implements OnChanges {
   }
 
   private updateContactData() {
-    this.contactData.firstName = this.userService
+    this.contactData.firstName = this.firebaseService
       .getUserDetails(this.currentUserId, 'firstName')
       .join(', ');
-    this.contactData.lastName = this.userService
+    this.contactData.lastName = this.firebaseService
       .getUserDetails(this.currentUserId, 'lastName')
       .join(', ');
-    this.contactData.email = this.userService
+    this.contactData.email = this.firebaseService
       .getUserDetails(this.currentUserId, 'email')
       .join(', ');
-    this.contactData.phone = this.userService
+    this.contactData.phone = this.firebaseService
       .getUserDetails(this.currentUserId, 'phone')
       .join(', ');
   }
 
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
-      this.userService.updateUserData(this.currentUserId, this.contactData);
+      this.firebaseService.updateUserData(this.currentUserId, this.contactData);
       this.closeEditDialog();
     }
   }

src/app/components/contacts/contacts.component.html

@@ -28,25 +28,25 @@
         <div
           class="circle"
           [ngStyle]="{
-            'background-color': userService.getUserDetails(user.id, 'color')
+            'background-color': firebaseService.getUserDetails(user.id, 'color')
           }"
         >
           <div class="initials">
-            {{ userService.getUserDetails(user.id, "initials") }}
+            {{ firebaseService.getUserDetails(user.id, "initials") }}
           </div>
         </div>
         <div class="details">
           <div class="name">
             <p>
-              {{ userService.getUserDetails(user.id, "firstName") }}
+              {{ firebaseService.getUserDetails(user.id, "firstName") }}
             </p>
             <span>,&nbsp;</span>
             <p class="last-name">
-              {{ userService.getUserDetails(user.id, "lastName") }}
+              {{ firebaseService.getUserDetails(user.id, "lastName") }}
             </p>
           </div>
           <div class="email">
-            {{ userService.getUserDetails(user.id, "email") }}
+            {{ firebaseService.getUserDetails(user.id, "email") }}
           </div>
         </div>
       </div>

src/app/components/contacts/contacts.component.ts

@@ -1,10 +1,10 @@
 import { Component, EventEmitter, HostListener, Output } from '@angular/core';
-import { UserService } from '../../services/user.service';
 import { User } from '../../interfaces/user.interface';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { ContactDetailComponent } from './contact-detail/contact-detail.component';
 import { SharedService } from '../../services/shared.service';
+import { FirebaseService } from '../../services/firebase.service';
 
 @Component({
   selector: 'app-contacts',
@@ -21,7 +21,7 @@ export class ContactsComponent {
   currentUserId: string = '';
 
   constructor(
-    public userService: UserService,
+    public firebaseService: FirebaseService,
     private route: ActivatedRoute,
     private sharedService: SharedService
   ) {}
@@ -50,7 +50,7 @@ export class ContactsComponent {
   }
 
   loadAllUserWithoutGuest(): User[] {
-    return this.userService
+    return this.firebaseService
       .getAllUsers()
       .filter((user) => user.initials !== 'G');
   }

src/app/components/summary/summary.component.html

@@ -96,14 +96,14 @@
       <p>{{ displayGreeting() }},</p>
       <span id="welcome-user"
         >{{
-          this.userService.getUserDetails(
+          this.firebaseService.getUserDetails(
-            userService.getCurrentUserId(),
+            firebaseService.getCurrentUserId(),
             "firstName"
           )
         }}<br />
         {{
-          this.userService.getUserDetails(
+          this.firebaseService.getUserDetails(
-            userService.getCurrentUserId(),
+            firebaseService.getCurrentUserId(),
             "lastName"
           )
         }}</span

src/app/components/summary/summary.component.ts

@@ -1,8 +1,7 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { TaskService } from '../../services/task.service';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { UserService } from '../../services/user.service';
+import { FirebaseService } from '../../services/firebase.service';
 
 @Component({
   selector: 'app-summary',
@@ -13,24 +12,23 @@ import { UserService } from '../../services/user.service';
 })
 export class SummaryComponent {
   constructor(
-    private taskService: TaskService,
+    public firebaseService: FirebaseService,
-    public userService: UserService,
     private translateService: TranslateService
   ) {}
 
   displayNumberOfAllTasks() {
-    return this.taskService.getAllTasks().length;
+    return this.firebaseService.getAllTasks().length;
   }
 
   displayNumberOfTaskStatus(query: string) {
-    const filteredTasks = this.taskService
+    const filteredTasks = this.firebaseService
       .getAllTasks()
       .filter((task) => task.status === query);
     return filteredTasks.length;
   }
 
   displayNumberOfTaskStatusUrgent() {
-    return this.taskService
+    return this.firebaseService
       .getAllTasks()
       .filter((task) => task.priority === 'urgent');
   }

src/app/services/firebase.service.ts

@@ -7,23 +7,57 @@ import {
   onSnapshot,
   updateDoc,
 } from '@angular/fire/firestore';
+import { Task } from '../interfaces/task.interface';
 import { User } from '../interfaces/user.interface';
-
 @Injectable({
   providedIn: 'root',
 })
-export class UserService implements OnDestroy {
+export class FirebaseService implements OnDestroy {
   firestore: Firestore = inject(Firestore);
 
+  allTasks: Task[] = [];
+  filteredTasks: Task[] = [];
   allUsers: User[] = [];
   isUserLogin: boolean = true;
 
+  unsubTask;
   unsubUser;
 
   constructor() {
+    this.unsubTask = this.subTaskList();
     this.unsubUser = this.subUserList();
   }
 
+  // ------------- TASKS ------------- //
+
+  subTaskList() {
+    return onSnapshot(collection(this.firestore, 'tasks'), (list) => {
+      this.allTasks = [];
+      list.forEach((element) => {
+        const taskWithId = { id: element.id, ...element.data() } as Task;
+        this.allTasks.push(taskWithId);
+      });
+    });
+  }
+
+  getAllTasks(): Task[] {
+    return this.allTasks;
+  }
+
+  getFiltertTasks(): Task[] {
+    return this.filteredTasks;
+  }
+
+  async updateTask(taskId: any, index: number) {
+    await updateDoc(doc(collection(this.firestore, 'tasks'), taskId), {
+      status: this.allTasks[index].status,
+    }).catch((err) => {
+      console.error(err);
+    });
+  }
+
+  // ------------- USERS ------------- //
+
   subUserList() {
     return onSnapshot(collection(this.firestore, 'users'), (list) => {
       this.allUsers = [];
@@ -69,6 +103,7 @@ export class UserService implements OnDestroy {
   }
 
   ngOnDestroy() {
+    this.unsubTask();
     this.unsubUser();
   }
 }

src/app/services/task.service.ts

@@ -1,54 +0,0 @@
-import { EventEmitter, Injectable, OnDestroy, inject } from '@angular/core';
-import {
-  Firestore,
-  collection,
-  doc,
-  onSnapshot,
-  updateDoc,
-} from '@angular/fire/firestore';
-import { Task } from '../interfaces/task.interface';
-@Injectable({
-  providedIn: 'root',
-})
-export class TaskService implements OnDestroy {
-  firestore: Firestore = inject(Firestore);
-
-  allTasks: Task[] = [];
-  filteredTasks: Task[] = [];
-
-  unsubTask;
-
-  constructor() {
-    this.unsubTask = this.subTaskList();
-  }
-
-  subTaskList() {
-    return onSnapshot(collection(this.firestore, 'tasks'), (list) => {
-      this.allTasks = [];
-      list.forEach((element) => {
-        const taskWithId = { id: element.id, ...element.data() } as Task;
-        this.allTasks.push(taskWithId);
-      });
-    });
-  }
-
-  getAllTasks(): Task[] {
-    return this.allTasks;
-  }
-
-  getFiltertTasks(): Task[] {
-    return this.filteredTasks;
-  }
-
-  async updateTask(taskId: any, index: number) {
-    await updateDoc(doc(collection(this.firestore, 'tasks'), taskId), {
-      status: this.allTasks[index].status,
-    }).catch((err) => {
-      console.error(err);
-    });
-  }
-
-  ngOnDestroy() {
-    this.unsubTask();
-  }
-}

src/app/shared/components/header/header.component.html

@@ -15,8 +15,8 @@
     </div>
     <div class="img-user" (click)="toggleNavbar()">
       {{
-        this.userService.getUserDetails(
+        this.firebaseService.getUserDetails(
-          userService.getCurrentUserId(),
+          firebaseService.getCurrentUserId(),
           "initials"
         )
       }}

src/app/shared/components/header/header.component.ts

@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 import { NavbarComponent } from '../navbar/navbar.component';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { UserService } from '../../../services/user.service';
+import { FirebaseService } from '../../../services/firebase.service';
 
 @Component({
   selector: 'app-header',
@@ -16,7 +16,7 @@ export class HeaderComponent {
   navbarVisible: boolean = false;
   navbarLanguageVisible: boolean = false;
 
-  constructor(public userService: UserService) {}
+  constructor(public firebaseService: FirebaseService) {}
 
   toggleNavbar() {
     this.navbarVisible = !this.navbarVisible;