Skip to content

Commit 37bb492

Browse files
billyjovbillyjov
committed
fix(client): add some refactoring
1 parent 771b08d commit 37bb492

File tree

5 files changed

+85
-58
lines changed

5 files changed

+85
-58
lines changed

‎src/client/todolist/src/app/core/task-observer/task-observer.service.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Injectable } from '@angular/core';
22

3-
import { BehaviorSubject, Observable } from 'rxjs';
3+
import { BehaviorSubject ,Subject, Observable } from 'rxjs';
44

55
import { Task } from 'src/app/tasks/shared/models/task.model';
66

@@ -9,7 +9,7 @@ import { Task } from 'src/app/tasks/shared/models/task.model';
99
})
1010
export class TaskObserverService {
1111

12-
private allTasksSubject = new BehaviorSubject<Task[]>([]);
12+
private allTasksSubject = new Subject<Task[]>();
1313
constructor() { }
1414

1515
public emitAllTasks(tasks: Task[]): void {

‎src/client/todolist/src/app/tasks/add-tasks/add-tasks.component.ts

+37-23
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3-
import { DatePipe } from '@angular/common';
1+
import { DatePipe } from "@angular/common";
2+
import { Component, OnDestroy, OnInit } from "@angular/core";
3+
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
44

5-
import { Task } from 'src/app/tasks/shared/models/task.model';
6-
import { TasksHttpService } from 'src/app/tasks/shared/services/tasks-http.service';
5+
import { Subscription } from "rxjs";
6+
7+
import { Task } from "src/app/tasks/shared/models/task.model";
8+
import { TasksHttpService } from "src/app/tasks/shared/services/tasks-http.service";
79

810
@Component({
9-
selector: 'app-add-tasks',
10-
templateUrl: './add-tasks.component.html',
11-
styleUrls: ['./add-tasks.component.scss']
11+
selector: "app-add-tasks",
12+
templateUrl: "./add-tasks.component.html",
13+
styleUrls: ["./add-tasks.component.scss"],
1214
})
13-
export class AddTasksComponent implements OnInit {
14-
15+
export class AddTasksComponent implements OnInit, OnDestroy {
1516
public taskForm: FormGroup;
1617
public isEditMode: boolean;
1718
public isSubmitted: boolean;
18-
private datePipe: DatePipe = new DatePipe('en-US');
19+
private datePipe: DatePipe = new DatePipe("en-US");
20+
private subscriptions: Subscription = new Subscription();
1921

2022
constructor(
2123
private formBuilder: FormBuilder,
2224
private tasksHttpService: TasksHttpService
23-
) { }
25+
) {}
2426

2527
ngOnInit() {
2628
this.buildTaskForm();
@@ -29,6 +31,10 @@ export class AddTasksComponent implements OnInit {
2931
});
3032
}
3133

34+
ngOnDestroy(): void {
35+
this.subscriptions.unsubscribe();
36+
}
37+
3238
public submitTaskForm(): void {
3339
this.isSubmitted = true;
3440
if (this.taskForm.invalid) {
@@ -39,7 +45,7 @@ export class AddTasksComponent implements OnInit {
3945
}
4046

4147
public getActualDate(): string {
42-
const today = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
48+
const today = this.datePipe.transform(new Date(), "yyyy-MM-dd");
4349
return today;
4450
}
4551

@@ -48,7 +54,10 @@ export class AddTasksComponent implements OnInit {
4854
}
4955

5056
private addTask(): void {
51-
this.taskForm.value.dueDate = this.datePipe.transform(this.taskForm.value.dueDate, 'yyyy-MM-dd');
57+
this.taskForm.value.dueDate = this.datePipe.transform(
58+
this.taskForm.value.dueDate,
59+
"yyyy-MM-dd"
60+
);
5261
const newTask: Task = this.taskForm.value;
5362

5463
this.tasksHttpService.createTask(newTask).subscribe((task: Task) => {
@@ -59,12 +68,17 @@ export class AddTasksComponent implements OnInit {
5968
}
6069

6170
private updateTask(): void {
62-
this.taskForm.value.dueDate = this.datePipe.transform(this.taskForm.value.dueDate, 'yyyy-MM-dd');
63-
this.tasksHttpService.updateTask(this.taskForm.value).subscribe((updatedTask: Task) => {
64-
if (updatedTask) {
65-
this.updateTaskList();
66-
}
67-
});
71+
this.taskForm.value.dueDate = this.datePipe.transform(
72+
this.taskForm.value.dueDate,
73+
"yyyy-MM-dd"
74+
);
75+
this.tasksHttpService
76+
.updateTask(this.taskForm.value)
77+
.subscribe((updatedTask: Task) => {
78+
if (updatedTask) {
79+
this.updateTaskList();
80+
}
81+
});
6882
this.isEditMode = false;
6983
}
7084

@@ -75,9 +89,9 @@ export class AddTasksComponent implements OnInit {
7589

7690
private buildTaskForm(): void {
7791
this.taskForm = this.formBuilder.group({
78-
id: [''],
79-
title: ['', Validators.required],
80-
dueDate: [this.getActualDate()]
92+
id: [""],
93+
title: ["", Validators.required],
94+
dueDate: [this.getActualDate()],
8195
});
8296
}
8397
}

‎src/client/todolist/src/app/tasks/list-tasks/list-tasks.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</tr>
99
</thead>
1010
<tbody>
11-
<tr *ngFor="let task of tasks; let i = index" [ngClass]="{'is-done': task.done}">
11+
<tr *ngFor="let task of tasks$ | async; let i = index" [ngClass]="{'is-done': task.done}">
1212
<td>
1313
<div class="custom-control custom-checkbox">
1414
<input type="checkbox" class="custom-control-input" [checked]="task.done"

‎src/client/todolist/src/app/tasks/list-tasks/list-tasks.component.ts

+42-29
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,82 @@
1-
import { Component, OnInit, Input } from '@angular/core';
2-
import { DatePipe } from '@angular/common';
3-
import { FormGroup } from '@angular/forms';
1+
import { DatePipe } from "@angular/common";
2+
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
3+
import { FormGroup } from "@angular/forms";
44

5-
import { Task } from 'src/app/tasks/shared/models/task.model';
6-
import { TasksHttpService } from 'src/app/tasks/shared/services/tasks-http.service';
7-
import { TaskObserverService } from 'src/app/core/task-observer/task-observer.service';
5+
import { Subscription } from "rxjs";
6+
7+
import { TaskObserverService } from "src/app/core/task-observer/task-observer.service";
8+
import { Task } from "src/app/tasks/shared/models/task.model";
9+
import { TasksHttpService } from "src/app/tasks/shared/services/tasks-http.service";
810

911
@Component({
10-
selector: 'app-list-tasks',
11-
templateUrl: './list-tasks.component.html',
12-
styleUrls: ['./list-tasks.component.scss']
12+
selector: "app-list-tasks",
13+
templateUrl: "./list-tasks.component.html",
14+
styleUrls: ["./list-tasks.component.scss"],
1315
})
14-
export class ListTasksComponent implements OnInit {
15-
16+
export class ListTasksComponent implements OnInit, OnDestroy {
1617
public tasks: Task[];
18+
public tasks$ = this.tasksHttpService.getAllTasks();
19+
private subscriptions: Subscription = new Subscription();
1720

1821
@Input()
1922
public taskForm: FormGroup;
2023

2124
constructor(
2225
private tasksHttpService: TasksHttpService,
2326
private taskObserverService: TaskObserverService
24-
) { }
27+
) {}
2528

2629
ngOnInit() {
2730
this.tasksHttpService.retrieveAllTasks();
2831
this.initTaskLists();
2932
}
3033

34+
ngOnDestroy(): void {
35+
this.subscriptions.unsubscribe();
36+
}
37+
3138
public editTask(task: Task): void {
32-
const datePipe = new DatePipe('en-US');
33-
const formatedDueDate = datePipe.transform(task.dueDate, 'yyyy-MM-dd');
39+
const datePipe = new DatePipe("en-US");
40+
const formatedDueDate = datePipe.transform(task.dueDate, "yyyy-MM-dd");
3441
this.taskForm.setValue({
3542
id: task.id,
3643
title: task.title,
37-
dueDate: formatedDueDate
44+
dueDate: formatedDueDate,
3845
});
3946
this.tasksHttpService.isEditMode.next(true);
4047
}
4148

4249
public removeTask(task: Task): void {
43-
this.tasksHttpService.deleteTask(task).subscribe((response: Task) => {
44-
if (response) {
45-
this.tasksHttpService.retrieveAllTasks();
46-
}
47-
});
50+
this.subscriptions.add(
51+
this.tasksHttpService.deleteTask(task).subscribe((response: Task) => {
52+
if (response) {
53+
this.tasksHttpService.retrieveAllTasks();
54+
}
55+
})
56+
);
4857
}
4958

5059
public markAsDone(isChecked, task: Task): void {
5160
task.done = isChecked.target.checked;
52-
this.tasksHttpService.updateTask(task).subscribe((response: Task) => {
53-
if (response) {
54-
this.tasksHttpService.retrieveAllTasks();
55-
}
56-
});
61+
this.subscriptions.add(
62+
this.tasksHttpService.updateTask(task).subscribe((response: Task) => {
63+
if (response) {
64+
this.tasksHttpService.retrieveAllTasks();
65+
}
66+
})
67+
);
5768
}
5869

5970
public isEmptyTasks(): boolean {
6071
return this.tasks.length === 0;
6172
}
6273

6374
private initTaskLists(): void {
64-
this.tasksHttpService.getAllTasks().subscribe((allTasks: Task[]) => {
65-
this.tasks = allTasks;
66-
this.taskObserverService.emitAllTasks(allTasks);
67-
});
75+
this.subscriptions.add(
76+
this.tasksHttpService.getAllTasks().subscribe((allTasks: Task[]) => {
77+
this.tasks = allTasks;
78+
this.taskObserverService.emitAllTasks(allTasks);
79+
})
80+
);
6881
}
6982
}

‎src/client/todolist/src/app/tasks/shared/services/tasks-http.service.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Injectable } from '@angular/core';
2-
import { BehaviorSubject, Observable } from 'rxjs';
2+
import { BehaviorSubject, Observable, Subject } from 'rxjs';
33

44
import { Task } from 'src/app/tasks/shared/models/task.model';
55
import { ApiService } from 'src/app/core/api/api.service';
@@ -9,7 +9,7 @@ import { ApiService } from 'src/app/core/api/api.service';
99
})
1010
export class TasksHttpService {
1111

12-
private taskSubject: BehaviorSubject<Task[]>;
12+
private taskSubject: Subject<Task[]>;
1313
private editModeSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
1414

1515
constructor(private apiService: ApiService) {
@@ -26,7 +26,7 @@ export class TasksHttpService {
2626
});
2727
}
2828

29-
public getAllTasks(): BehaviorSubject<Task[]> {
29+
public getAllTasks(): Subject<Task[]> {
3030
return this.taskSubject;
3131
}
3232

0 commit comments

Comments
 (0)