clean code

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

@@ -15,7 +15,7 @@
             </div>
           </div>
           <div class="details">
-            <span>{{ todoTasksCount }}</span>
+            <span>{{ displayNumberOfTaskStatus("todo") }}</span>
             <p>To-do</p>
           </div>
         </div>
@@ -24,7 +24,7 @@
             <img src="./../../../assets/img/summary/rake.svg" alt="" />
           </div>
           <div class="details">
-            <span>{{ doneTasksCount }}</span>
+            <span>{{ displayNumberOfTaskStatus("done") }}</span>
             <p>Done</p>
           </div>
         </div>
@@ -35,7 +35,7 @@
           <div class="left">
             <img src="./../../../assets/img/summary/urgent.svg" alt="" />
             <div class="details">
-              <span>{{ urgentTasksCount }}</span>
+              <span>{{ displayNumberOfTaskStatusUrgent().length }}</span>
               <p>Done</p>
             </div>
           </div>
@@ -43,9 +43,9 @@
           <div class="right">
             <div class="date">
               <div>
-                @if (urgentTasksCount) {
-                <span>{{ urgentTasksDate }}</span>
-                <p>Upcoming Deadline</p>
+                @if (displayNumberOfTaskStatusUrgent().length) {
+                <span>{{ nextUrgentTasks() }}</span>
+                <p class="spacer">Upcoming Deadline</p>
                 } @else {
                 <p>No Deadline</p>
                 }
@@ -58,19 +58,19 @@
       <div class="bottom-frame">
         <div class="tasks" routerLink="/board">
           <div class="details">
-            <span>{{ allTasksCount }}</span>
+            <span>{{ displayNumberOfAllTasks() }}</span>
             <p>Task<br />in Board</p>
           </div>
         </div>
         <div class="tasks" routerLink="/board">
           <div class="details">
-            <span>{{ inprogressTasksCount }}</span>
+            <span>{{ displayNumberOfTaskStatus("inprogress") }}</span>
             <p>Task in<br />Progress</p>
           </div>
         </div>
         <div class="tasks" routerLink="/board">
           <div class="details">
-            <span>{{ awaitfeedbackTasksCount }}</span>
+            <span>{{ displayNumberOfTaskStatus("awaitfeedback") }}</span>
             <p>Awaiting<br />Feedback</p>
           </div>
         </div>

src/app/components/summary/summary.component.scss

@@ -155,6 +155,9 @@ section {
     font-size: 21px;
     font-weight: 700;
   }
+  .spacer {
+    padding-top: 12px;
+  }
 }
 
 /*------------- RESPONSIVE -------------*/

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { TaskService } from '../../services/task.service';
+import { Task } from '../../interfaces/task.interface';
 
 @Component({
   selector: 'app-summary',
@@ -10,58 +11,34 @@ import { TaskService } from '../../services/task.service';
   styleUrl: './summary.component.scss',
 })
 export class SummaryComponent {
-  allTasksCount: Number = 0;
-  todoTasksCount: Number = 0;
-  inprogressTasksCount: Number = 0;
-  awaitfeedbackTasksCount: Number = 0;
-  doneTasksCount: Number = 0;
-  urgentTasksCount: Number = 0;
-  urgentTasksDate: String = '';
+  constructor(private taskService: TaskService) {}
 
-  constructor(private taskService: TaskService) {
-    this.updateTasksCount();
-    this.updateAllTasksCount();
-    this.updateUrgentTasksCount();
+  displayNumberOfAllTasks() {
+    return this.taskService.getAllTasks().length;
   }
 
-  updateAllTasksCount() {
-    this.allTasksCount = this.taskService.allTasks.length;
-  }
-
-  updateTasksCount() {
-    this.todoTasksCount = this.countTasks('todo');
-    this.inprogressTasksCount = this.countTasks('inprogress');
-    this.awaitfeedbackTasksCount = this.countTasks('awaitfeedback');
-    this.doneTasksCount = this.countTasks('done');
-  }
-
-  countTasks(status: string): number {
-    const filteredTasks = this.taskService.allTasks.filter(
-      (task) => task.status === status
-    );
+  displayNumberOfTaskStatus(query: string) {
+    const filteredTasks = this.taskService
+      .getAllTasks()
+      .filter((task) => task.status === query);
     return filteredTasks.length;
   }
 
-  updateUrgentTasksCount() {
-    const filteredTasks = this.taskService.allTasks.filter(
-      (task) => task.priority === 'urgent'
-    );
-    this.urgentTasksCount = filteredTasks.length;
-    this.nextUrgentTasks(filteredTasks);
+  displayNumberOfTaskStatusUrgent() {
+    return this.taskService
+      .getAllTasks()
+      .filter((task) => task.priority === 'urgent');
   }
 
-  nextUrgentTasks(filteredTasks: any[]) {
-    if (filteredTasks.length >= 2) {
-      let timestamps = [];
-      for (let i = 0; i < filteredTasks.length; i++) {
-        timestamps.push(filteredTasks[i].timestamp);
-      }
-      this.urgentTasksDate = this.timeConverter(Math.min(...timestamps));
-    } else if (filteredTasks.length > 0) {
-      for (let i = 0; i < filteredTasks.length; i++) {
-        this.urgentTasksDate = this.timeConverter(filteredTasks[i].timestamp);
-      }
+  nextUrgentTasks() {
+    const urgentTasks = this.displayNumberOfTaskStatusUrgent();
+    if (urgentTasks.length >= 2) {
+      const timestamps = urgentTasks.map((task) => task.timestamp);
+      return this.timeConverter(Math.min(...timestamps));
+    } else if (urgentTasks.length > 0) {
+      return this.timeConverter(urgentTasks[0].timestamp);
     }
+    return;
   }
 
   timeConverter(timestamp: number) {