diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments-list/admin-comments-list.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments-list/admin-comments-list.component.ts index d45c86b0..e177637c 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments-list/admin-comments-list.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments-list/admin-comments-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { User } from '../../../core/models/User'; import { Comment } from '../../../core/models/Comment'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; @@ -6,12 +6,14 @@ import { CustomToastrService } from '../../../core/services/custom-toastr.servic import { PageInfo } from '../../..//core/models/PageInfo'; import { CommentsService } from '../../../core/services/posts-services/comments.service'; import { Messages } from '../../../core/data/Mesages'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-admin-comments-list', templateUrl: './admin-comments-list.component.html', styleUrls: ['./admin-comments-list.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AdminCommentsListComponent implements OnInit { /** @@ -51,10 +53,12 @@ export class AdminCommentsListComponent implements OnInit { /** * @param _commentService CommentService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _commentsService: CommentsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -87,7 +91,7 @@ export class AdminCommentsListComponent implements OnInit { * @param page number * @returns void */ - private _getComments(page: number = 0): void { + private async _getComments(page: number = 0): Promise { const sortParameters = { sortBy: null, orderBy: null, @@ -100,15 +104,22 @@ export class AdminCommentsListComponent implements OnInit { tag: null, sortParameters: sortParameters }; - this._commentsService.list(null, model).subscribe( - (response: any) => { - this.comments = response.comments; - this.isLoaded = true; + + this._commentsService.list(null, model) + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.comments = [...response.comments]; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; - }); + } + }); /*!isNaN(postId) ? this._commentService.getCommentsByPostId(postId) : this._commentService.list(nu);*/ diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments-table/admin-comments-table.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments-table/admin-comments-table.component.ts index 384758d7..d003b6b9 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments-table/admin-comments-table.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments-table/admin-comments-table.component.ts @@ -1,21 +1,19 @@ -import { GlobalService } from '../../../core/services/global-service/global-service.service'; -import { UsersService } from '../../../core/services/users-services/users-service.service'; import { CommentsService } from '../../../core/services/posts-services/comments.service'; -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { Comment } from '../../../core/models/Comment'; import { User } from '../../../core/models/User'; -import { GeneralServiceService } from '../../../core'; -import { ActivatedRoute } from '@angular/router'; import { Messages } from '../../../core/data/Mesages'; import { CustomToastrService } from '../../../core/services/custom-toastr.service'; import { PageInfo } from '../../../core/models/PageInfo'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-admin-comments-table', templateUrl: './admin-comments-table.component.html', styleUrls: ['./admin-comments-table.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AdminCommentsTableComponent implements OnInit { /** @@ -55,10 +53,12 @@ export class AdminCommentsTableComponent implements OnInit { /** * @param _commentsService CommentsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _commentsService: CommentsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -90,7 +90,7 @@ export class AdminCommentsTableComponent implements OnInit { * @param page number * @returns void */ - private _getComments(page: number = 0): void { + private async _getComments(page: number = 0): Promise { const sortParameters = { sortBy: null, orderBy: null, @@ -103,15 +103,23 @@ export class AdminCommentsTableComponent implements OnInit { tag: null, sortParameters: sortParameters }; - this._commentsService.list(null, model).subscribe( - (response: any) => { - this.comments = response.comments; - this.isLoaded = true; + + this._commentsService.list(null, model) + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.comments = [...response.comments]; + this.pageInfo = { ...response.pageInfo }; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; - }); + } + }); /*!isNaN(postId) ? this._commentService.getCommentsByPostId(postId) : this._commentService.list(nu);*/ diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments.module.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments.module.ts index 6e326ae7..27efcbf2 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments.module.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/admin-comments.module.ts @@ -7,6 +7,7 @@ import { CommentsActivityComponent } from './comments-activity/comments-activity import { NgxChartsModule } from '@swimlane/ngx-charts'; import { AdminCommentsListComponent } from './admin-comments-list/admin-comments-list.component'; import { AdminCommentsTableComponent } from './admin-comments-table/admin-comments-table.component'; +import { DefaultPagesModule } from '../../user-portal/default-pages/default-pages.module'; @NgModule({ declarations: [ @@ -19,7 +20,8 @@ import { AdminCommentsTableComponent } from './admin-comments-table/admin-commen AdminCommentsRoutingModule, NgxChartsModule, CommentsModule, - CoreModule + CoreModule, + DefaultPagesModule ], exports: [ CommentsActivityComponent, diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/comments-activity/comments-activity.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/comments-activity/comments-activity.component.ts index f270f3bc..37430569 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/comments-activity/comments-activity.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-comments/comments-activity/comments-activity.component.ts @@ -1,15 +1,17 @@ -import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { ChartOptions } from './../../../core/models/chart/ChartOptions'; import { ChartOptionsData } from './../../../core/data/chart/ChartOptionsData'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; import { CustomToastrService } from '../../../core/services/custom-toastr.service'; import { CommentsService } from '../../../core/services/posts-services/comments.service'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-comments-activity', templateUrl: './comments-activity.component.html', styleUrls: ['./comments-activity.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class CommentsActivityComponent implements OnInit { /** @@ -30,25 +32,34 @@ export class CommentsActivityComponent implements OnInit { /** * @inheritdoc */ - ngOnInit(): void { - this._commentService.commentsActivity().subscribe( - (response: any) => { - this.chartOptions.Data[0] = response; - this.chartOptions = this.chartOptions; - this.isLoaded = true; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + async ngOnInit(): Promise { + this._commentService.commentsActivity() + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.chartOptions.Data[0] = response; + this.chartOptions = this.chartOptions; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } /** * @param _commentService CommentService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _commentService: CommentsService, - private _customToastrService: CustomToastrService) { + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef) { } /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-list/admin-posts-list.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-list/admin-posts-list.component.ts index c38fb1c6..73923100 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-list/admin-posts-list.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-list/admin-posts-list.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; @Component({ selector: 'app-admin-posts-list', templateUrl: './admin-posts-list.component.html', styleUrls: ['./admin-posts-list.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AdminPostsListComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-table/admin-posts-table.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-table/admin-posts-table.component.ts index c4130c51..a681a07e 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-table/admin-posts-table.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-table/admin-posts-table.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core"; import { PageInfo } from "../../../core/models/PageInfo"; import { Post } from "../../../core/models/Post"; import { CustomToastrService } from "../../../core/services/custom-toastr.service"; @@ -6,12 +6,14 @@ import { PageViewDto } from "../../../core/Dto/PageViewDto"; import { ErrorResponse } from "../../../core/responses/ErrorResponse"; import { PostsService } from "../../../core/services/posts-services/posts.service"; import { Router } from "@angular/router"; +import { finalize } from "rxjs"; @Component({ selector: 'app-admin-posts-table', templateUrl: './admin-posts-table.component.html', styleUrls: ['./admin-posts-table.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AdminPostsTableComponent implements OnInit { /** @@ -39,11 +41,13 @@ export class AdminPostsTableComponent implements OnInit { * @param _router Router * @param _customToastrService CustomToastrService * @param _postsService: PostsService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _router: Router, private _customToastrService: CustomToastrService, - private _postsService: PostsService + private _postsService: PostsService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -81,7 +85,7 @@ export class AdminPostsTableComponent implements OnInit { /** * Get all posts */ - private _getPosts(page = 1): void { + private async _getPosts(page = 1): Promise { const sortParameters = { sortBy: null, orderBy: null, @@ -96,16 +100,21 @@ export class AdminPostsTableComponent implements OnInit { }; this._postsService.list(model) - .subscribe( - (response: PageViewDto) => { - this.posts = response.posts; - this.pageInfo = response.pageInfo; + .pipe( + finalize(() => { this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.posts = [...response.posts]; + this.pageInfo = { ...response.pageInfo }; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; - }); + } + }); } /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-table/change-status/change-status.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-table/change-status/change-status.component.ts index 41bf2b04..c99a4c19 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-table/change-status/change-status.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/admin-posts-table/change-status/change-status.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, ContentChild, ElementRef, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, Input, ContentChild, ElementRef, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'; import { Messages } from './../../../../core/data/Mesages'; import { CustomToastrService } from './../../../../core/services/custom-toastr.service'; @@ -6,7 +6,8 @@ import { CustomToastrService } from './../../../../core/services/custom-toastr.s selector: 'app-change-status', templateUrl: './change-status.component.html', styleUrls: ['./change-status.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class ChangeStatusComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/posts-activity-chart/posts-activity-chart.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/posts-activity-chart/posts-activity-chart.component.ts index 45fc5862..3e434186 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/posts-activity-chart/posts-activity-chart.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-posts/posts-activity-chart/posts-activity-chart.component.ts @@ -1,15 +1,17 @@ +import { finalize } from 'rxjs'; import { ChartOptions } from '../../../core/models/chart/ChartOptions'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; import { CustomToastrService } from '../../../core/services/custom-toastr.service'; import { PostsService } from '../../../core/services/posts-services/posts.service'; import { ChartOptionsData } from './../../../core/data/chart/ChartOptionsData'; -import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'app-posts-activity-chart', templateUrl: './posts-activity-chart.component.html', styleUrls: ['./posts-activity-chart.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class PostsActivityChartComponent implements OnInit { /** @@ -30,25 +32,34 @@ export class PostsActivityChartComponent implements OnInit { /** * @inheritdoc */ - ngOnInit(): void { - this._postsService.postsActivity().subscribe( - (response: any) => { + async ngOnInit(): Promise { + this._postsService.postsActivity() + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { this.chartOptions.Data[0] = response; this.chartOptions = this.chartOptions; - this.isLoaded = true; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } /** * @param _postService PostService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _postsService: PostsService, - private _customToastrService: CustomToastrService) { + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef) { } /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/admin-tags-list/admin-tags-list.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/admin-tags-list/admin-tags-list.component.ts index 24ee85ec..1e6ce908 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/admin-tags-list/admin-tags-list.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/admin-tags-list/admin-tags-list.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; @Component({ selector: 'app-admin-tags-list', templateUrl: './admin-tags-list.component.html', styleUrls: ['./admin-tags-list.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AdminTagsListComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/admin-tags-table/admin-tags-table.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/admin-tags-table/admin-tags-table.component.ts index 0a61c0d2..57b93ed7 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/admin-tags-table/admin-tags-table.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/admin-tags-table/admin-tags-table.component.ts @@ -1,14 +1,16 @@ import { TagsService } from '../../../core/services/posts-services/tags.service'; -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { Tag } from '../../../core/models/Tag'; import { CustomToastrService } from '../../../core/services/custom-toastr.service'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-admin-tags-table', templateUrl: './admin-tags-table.component.html', styleUrls: ['./admin-tags-table.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AdminTagsTableComponent implements OnInit { public tags: Tag[] = []; @@ -21,10 +23,12 @@ export class AdminTagsTableComponent implements OnInit { /** * @param _tagsService TagsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _tagsService: TagsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -38,7 +42,7 @@ export class AdminTagsTableComponent implements OnInit { * Get all tags. * @param page number */ - private _getTags(page: number = 0): void { + private async _getTags(page: number = 0): Promise { const sortParameters = { sortBy: null, orderBy: null, @@ -52,15 +56,20 @@ export class AdminTagsTableComponent implements OnInit { sortParameters: sortParameters }; this._tagsService.list(model) - .subscribe( - (response: any) => { - this.tags = response.tags; - this.isLoaded = true; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; - });; + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.tags = response.tags; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } + }); } /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/tags-activity-chart/tags-activity-chart.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/tags-activity-chart/tags-activity-chart.component.ts index 5ac31dd5..7ee06a54 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/tags-activity-chart/tags-activity-chart.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-tags/tags-activity-chart/tags-activity-chart.component.ts @@ -1,15 +1,17 @@ -import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { ChartOptions } from './../../../core/models/chart/ChartOptions'; import { ChartOptionsData } from './../../../core/data/chart/ChartOptionsData'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; import { CustomToastrService } from '../../../core/services/custom-toastr.service'; import { TagsService } from '../../../core/services/posts-services/tags.service'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-tags-activity-chart', templateUrl: './tags-activity-chart.component.html', styleUrls: ['./tags-activity-chart.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class TagsActivityChartComponent implements OnInit { /** @@ -30,25 +32,34 @@ export class TagsActivityChartComponent implements OnInit { /** * @inheritdoc */ - ngOnInit(): void { - this._tagsService.tagsActivity().subscribe( - (response: any) => { - this.chartOptions.Data[0] = response; - this.chartOptions = this.chartOptions; - this.isLoaded = true; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); - }); + async ngOnInit(): Promise { + this._tagsService.tagsActivity() + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.chartOptions.Data[0] = response; + this.chartOptions = this.chartOptions; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } + }); } /** * @param _tagsService UsersService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _tagsService: TagsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-users/users-activity-chart/users-activity-chart.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-users/users-activity-chart/users-activity-chart.component.ts index 1fe2c71a..fcb41f7f 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-users/users-activity-chart/users-activity-chart.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/admin-users/users-activity-chart/users-activity-chart.component.ts @@ -1,15 +1,17 @@ -import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { ChartOptions } from './../../../core/models/chart/ChartOptions'; import { ChartOptionsData } from './../../../core/data/chart/ChartOptionsData'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; import { CustomToastrService } from '../../../core/services/custom-toastr.service'; import { UsersService } from '../../../core/services/users-services/users-service.service'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-users-activity-chart', templateUrl: './users-activity-chart.component.html', styleUrls: ['./users-activity-chart.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class UsersActivityChartComponent implements OnInit { /** @@ -30,25 +32,34 @@ export class UsersActivityChartComponent implements OnInit { /** * @inheritdoc */ - ngOnInit(): void { - this._usersService.usersActivity().subscribe( - (response: any) => { + async ngOnInit(): Promise { + this._usersService.usersActivity() + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { this.chartOptions.Data[0] = response; this.chartOptions = this.chartOptions; - this.isLoaded = true; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } /** * @param _usersService UsersService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _usersService: UsersService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/default-pages/icons-cards/icons-cards.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/default-pages/icons-cards/icons-cards.component.ts index 4aa20273..bfc23396 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/default-pages/icons-cards/icons-cards.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/default-pages/icons-cards/icons-cards.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; @Component({ selector: 'app-icons-cards', templateUrl: './icons-cards.component.html', styleUrls: ['./icons-cards.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class IconsCardsComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/default-pages/index/index.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/default-pages/index/index.component.ts index bdeb2195..5aac3a55 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/default-pages/index/index.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/default-pages/index/index.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; @Component({ selector: 'app-index', templateUrl: './index.component.html', styleUrls: ['./index.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class IndexComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/layout-component/layout-component.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/layout-component/layout-component.component.ts index 78423011..616cacf5 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/layout-component/layout-component.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/admin-portal/layout-component/layout-component.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { GlobalService } from './../../core/services/global-service/global-service.service'; import { User } from './../../core/models/User'; import { UsersService } from '../../core/services/users-services/users-service.service'; @@ -7,7 +7,8 @@ import { UsersService } from '../../core/services/users-services/users-service.s selector: 'app-layout-component', templateUrl: './layout-component.component.html', styleUrls: ['./layout-component.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class LayoutComponentComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/add-post/add-post.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/add-post/add-post.component.ts index 04aa6da2..4e5fda45 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/add-post/add-post.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/add-post/add-post.component.ts @@ -1,6 +1,6 @@ import { TagsService } from './../../../core/services/posts-services/tags.service'; import { PostsService } from './../../../core/services/posts-services/posts.service'; -import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'; +import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { PostForm } from '../../../core/forms/posts/PostForm'; import { Router } from '@angular/router'; @@ -13,12 +13,14 @@ import { Tag } from './../../../core/models/Tag'; import { Messages } from './../../../core/data/Mesages'; import { CustomToastrService } from './../../../core/services/custom-toastr.service'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AddPostComponent implements OnInit { /** @@ -81,6 +83,7 @@ export class AddPostComponent implements OnInit { * @param _postsService PostsService, * @param _tagsService TagsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ public constructor( private _router: Router, @@ -88,7 +91,8 @@ export class AddPostComponent implements OnInit { private _globalService: GlobalService, private _postsService: PostsService, private _tagsService: TagsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -182,21 +186,22 @@ export class AddPostComponent implements OnInit { * * @param post Post */ - add() { + async add(): Promise { if (this.postForm.valid) { this.postForm.value.id = 0; this.postForm.value.tags = this.tagsList; this.postForm.value.authorId = this.user?.id; this._postsService.add({ ...this.postForm.value - }).subscribe( - () => { + }).subscribe({ + next: () => { this._customToastrService.displaySuccessMessage(Messages.POST_CREATED_SUCCESSFULLY); this._router.navigate(['/']); }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } } @@ -211,14 +216,21 @@ export class AddPostComponent implements OnInit { * Get available tags. * @returns void */ - private _getTags(): void { - this._tagsService.list().subscribe( - (response: Tag[]) => { + private async _getTags(): Promise { + this._tagsService.list() + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: Tag[]) => { this.availableTags = response; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/add-comment/add-comment.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/add-comment/add-comment.component.ts index faeffbe8..4898ff7f 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/add-comment/add-comment.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/add-comment/add-comment.component.ts @@ -1,5 +1,5 @@ import { CommentsService } from './../../../../core/services/posts-services/comments.service'; -import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; +import { Component, OnInit, Input, EventEmitter, Output, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { CommentForm } from './../../../../core/forms/posts/CommentForm'; import { Comment } from '../../../../core/models/Comment'; @@ -13,7 +13,8 @@ import { UsersService } from '../../../../core/services/users-services/users-ser selector: 'app-add-comment', templateUrl: './add-comment.component.html', styleUrls: ['./add-comment.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AddCommentComponent implements OnInit { /** @@ -41,11 +42,13 @@ export class AddCommentComponent implements OnInit { * @param _commentsService CommentsService * @param _usersService UsersService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _commentsService: CommentsService, private _usersService: UsersService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -62,7 +65,7 @@ export class AddCommentComponent implements OnInit { * Add Comment * @returns void */ - addComment(): void { + async addComment(): Promise { if (this._usersService.isLoggedIn() && this.commentForm.valid) { const comment: Comment = new Comment (); comment.postId = this.postId; @@ -75,13 +78,15 @@ export class AddCommentComponent implements OnInit { comment.name = this.commentForm.get('name')?.value; } - this._commentsService.add(comment).subscribe( - (response: any) => { - this.onAdd.emit(response.json()); + this._commentsService.add(comment) + .subscribe({ + next: (response: any) => { + this.onAdd.emit(response.json()); this._customToastrService.displaySuccessMessage(Messages.COMMENT_CREATED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); this.onAdd.emit(null); } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/comments-list/comments-list.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/comments-list/comments-list.component.ts index dc5c831f..f4406110 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/comments-list/comments-list.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/comments-list/comments-list.component.ts @@ -1,5 +1,5 @@ import { CommentsService } from './../../../../core/services/posts-services/comments.service'; -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { Comment } from './../../../../core/models/Comment'; import { UsersService } from '../../../../core/services/users-services/users-service.service'; import { GlobalService } from './../../../../core/services/global-service/global-service.service'; @@ -8,12 +8,14 @@ import { Messages } from './../../../../core/data/Mesages'; import { CustomToastrService } from './../../../../core/services/custom-toastr.service'; import { ErrorResponse } from '../../../../core/responses/ErrorResponse'; import { PageInfo } from '../../../../core/models/PageInfo'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-comments-list', templateUrl: './comments-list.component.html', styleUrls: ['./comments-list.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class CommentsListComponent implements OnInit { /** @@ -67,18 +69,20 @@ export class CommentsListComponent implements OnInit { * @param _usersService UsersService * @param _globalService GlobalService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _commentsService: CommentsService, private _usersService: UsersService, private _globalService: GlobalService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** * @inheritdoc */ - ngOnInit() { + async ngOnInit(): Promise { // this._getCommentsForCurrentPost(); this.loggedIn = this._usersService.isLoggedIn(); @@ -97,14 +101,22 @@ export class CommentsListComponent implements OnInit { pageSize: 10, displayType: null }; + if(this.postId) { this._commentsService.list(this.postId, sortParameters) - .subscribe((response: any) => { - this.comments = response.comments; - this.pageInfo = response.pageInfo; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.comments = response.comments; + this.pageInfo = response.pageInfo; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -162,14 +174,16 @@ export class CommentsListComponent implements OnInit { * @param comment Comment * @returns void */ - deleteAction(comment: Comment): void { - this._commentsService.delete(comment.id).subscribe( - (response: any) => { - this.onDeleteCommentAction(response.id); - this._customToastrService.displaySuccessMessage(Messages.COMMENT_DELETED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + async deleteAction(comment: Comment): Promise { + this._commentsService.delete(comment.id) + .subscribe({ + next: (response: any) => { + this.onDeleteCommentAction(response.id); + this._customToastrService.displaySuccessMessage(Messages.COMMENT_DELETED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/edit-comment/edit-comment.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/edit-comment/edit-comment.component.ts index 024a33e4..7eaea4c3 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/edit-comment/edit-comment.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/comments/edit-comment/edit-comment.component.ts @@ -1,5 +1,5 @@ import { CommentsService } from './../../../../core/services/posts-services/comments.service'; -import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; +import { Component, OnInit, Input, EventEmitter, Output, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { CommentForm } from './../../../../core/forms/posts/CommentForm'; import { Comment } from '../../../../core/models/Comment'; @@ -14,7 +14,8 @@ import { ErrorResponse } from '../../../../core/responses/ErrorResponse'; selector: 'app-edit-comment', templateUrl: './edit-comment.component.html', styleUrls: ['./edit-comment.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class EditCommentComponent implements OnInit { /** @@ -47,12 +48,14 @@ export class EditCommentComponent implements OnInit { * @param _usersService UsersService * @param _globalService GlobalService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _commentsService: CommentsService, private _usersService: UsersService, private _globalService: GlobalService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -85,18 +88,20 @@ export class EditCommentComponent implements OnInit { * @param comment Comment * @returns void */ - public edit(): void { + public async edit(): Promise { if (this.user?.id === this.comment?.userId && this.commentForm.valid && this.comment) { this.comment.commentBody = this.commentForm.get('content')?.value; - this._commentsService.edit(this.comment.id, this.comment).subscribe( - (response: any) => { - this.onEdit.emit(response); - this._customToastrService.displaySuccessMessage(Messages.COMMENT_EDITED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._commentsService.edit(this.comment.id, this.comment) + .subscribe({ + next: (response: any) => { + this.onEdit.emit(response); + this._customToastrService.displaySuccessMessage(Messages.COMMENT_EDITED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/edit-post/edit-post.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/edit-post/edit-post.component.ts index 5f325e16..57a556e9 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/edit-post/edit-post.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/edit-post/edit-post.component.ts @@ -1,5 +1,5 @@ import { PostsService } from './../../../core/services/posts-services/posts.service'; -import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { FormGroup } from '@angular/forms'; import { PostForm } from '../../../core/forms/posts/PostForm'; @@ -15,12 +15,14 @@ import { CustomToastrService } from './../../../core/services/custom-toastr.serv import { Messages } from './../../../core/data/Mesages'; import { SelectedTag } from '../../../core/models/SelectedTag'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-edit-post', templateUrl: './edit-post.component.html', styleUrls: ['./edit-post.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class EditPostComponent implements OnInit { /** @@ -99,6 +101,7 @@ export class EditPostComponent implements OnInit { * @param _globalService GlobalService * @param _tagsService TagsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _activatedRoute: ActivatedRoute, @@ -107,7 +110,8 @@ export class EditPostComponent implements OnInit { private _usersService: UsersService, private _globalService: GlobalService, private _tagsService: TagsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -154,7 +158,7 @@ export class EditPostComponent implements OnInit { * @param post Post * @returns void */ - edit(post: Post): void { + async edit(post: Post): Promise { if (this.isCurrentUserPost && this.postForm.valid && this._postId @@ -162,13 +166,15 @@ export class EditPostComponent implements OnInit { post.id = this._postId; post.tags = this.post?.tags; post.authorId = this.user?.id; - this._postsService.edit(this._postId, post).subscribe( - () => { - this._customToastrService.displaySuccessMessage(Messages.POST_EDITED_SUCCESSFULLY); - this._router.navigate(['/blog/post/' + this._postId]); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.edit(this._postId, post) + .subscribe({ + next: (response: any) => { + this._customToastrService.displaySuccessMessage(Messages.POST_EDITED_SUCCESSFULLY); + this._router.navigate(['/blog/post/' + this._postId]); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -176,15 +182,17 @@ export class EditPostComponent implements OnInit { /** * Delete post action. */ - deleteAction(): void { + async deleteAction(): Promise { if (this.isCurrentUserPost && this._postId && this._globalService._currentUser) { - this._postsService.delete(this._postId, this._globalService._currentUser.id).subscribe( - () => { - this._customToastrService.displaySuccessMessage(Messages.POST_DELETED_SUCCESSFULLY); - this._router.navigate(['/blog']); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.delete(this._postId, this._globalService._currentUser.id) + .subscribe({ + next: () => { + this._customToastrService.displaySuccessMessage(Messages.POST_DELETED_SUCCESSFULLY); + this._router.navigate(['/blog']); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -263,24 +271,31 @@ export class EditPostComponent implements OnInit { * Get post. * @returns void */ - private _getPost(): void { + private async _getPost(): Promise { if(this._postId) { - this._postsService.showPost(this._postId).subscribe( - (response: any) => { - this.post = response.post; - if(this.post) { - this.post.tags = response.tags; - if (! this.isLoggedIn || this.user?.id !== this.post.authorId) { - this._router.navigateByUrl('/'); + this._postsService.showPost(this._postId) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.post = response.post; + if(this.post) { + this.post.tags = response.tags; + if (! this.isLoggedIn || this.user?.id !== this.post.authorId) { + this._router.navigateByUrl('/'); + } + if (this.user?.id === this.post.authorId) { + this.isCurrentUserPost = true; + } + this._setFormData(); } - if (this.user?.id === this.post.authorId) { - this.isCurrentUserPost = true; - } - this._setFormData(); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); } - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); }); } } @@ -289,13 +304,20 @@ export class EditPostComponent implements OnInit { * Get available tags. * @returns void */ - private _getTags(): void { - this._tagsService.list().subscribe( - (response: Tag[]) => { - this.availableTags = response; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + private async _getTags(): Promise { + this._tagsService.list() + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: Tag[]) => { + this.availableTags = response; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/my-posts/my-posts.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/my-posts/my-posts.component.ts index b9bf8e06..91300b8d 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/my-posts/my-posts.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/my-posts/my-posts.component.ts @@ -1,7 +1,7 @@ import { GeneralServiceService } from './../../../core/services/general-service.service'; import { PostsService } from './../../../core/services/posts-services/posts.service'; import { PageInfo } from './../../../core/models/PageInfo'; -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { GlobalService } from './../../../core/services/global-service/global-service.service'; import { SearchForm } from './../../../core/forms/SearchForm'; import { FormGroup } from '@angular/forms'; @@ -12,12 +12,14 @@ import { Post } from './../../../core/models/Post'; import { Messages } from './../../../core/data/Mesages'; import { CustomToastrService } from './../../../core/services/custom-toastr.service'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-my-posts', templateUrl: './my-posts.component.html', styleUrls: ['./my-posts.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class MyPostsComponent implements OnInit { /** @@ -91,6 +93,7 @@ export class MyPostsComponent implements OnInit { * @param _usersService UsersService * @param _customToastrService CustomToastrService * @param _generalService GeneralServiceService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _globalService: GlobalService, @@ -99,7 +102,8 @@ export class MyPostsComponent implements OnInit { private _postsService: PostsService, private _usersService: UsersService, private _customToastrService: CustomToastrService, - private _generalService: GeneralServiceService + private _generalService: GeneralServiceService, + private _changeDetectorRef: ChangeDetectorRef ) { } @@ -136,16 +140,18 @@ export class MyPostsComponent implements OnInit { * @param postId number * @returns void */ - public deleteAction(postId: number): void { + public async deleteAction(postId: number): Promise { const post = this.posts.find(p => p.id === postId); if (this.isLoggedIn && this.posts[postId].author.id === this.user?.id && this._globalService._currentUser) { - this._postsService.delete(postId, this._globalService._currentUser.id).subscribe( - (response: any) => { - this._customToastrService.displaySuccessMessage(Messages.POST_DELETED_SUCCESSFULLY); - this._onDeleteCommentAction(response.id); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.delete(postId, this._globalService._currentUser.id) + .subscribe({ + next: (response: any) => { + this._customToastrService.displaySuccessMessage(Messages.POST_DELETED_SUCCESSFULLY); + this._onDeleteCommentAction(response.id); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -155,16 +161,18 @@ export class MyPostsComponent implements OnInit { * @param id number * @returns void */ - public like(id: number): void { + public async like(id: number): Promise { if (this.isLoggedIn) { - this._postsService.like(id).subscribe( - (response: any) => { - const ind = this.posts.findIndex(post => post.id === id); - this.posts[ind] = response; - this.posts = this.posts; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.like(id) + .subscribe({ + next: (response: any) => { + const ind = this.posts.findIndex(post => post.id === id); + this.posts[ind] = response; + this.posts = this.posts; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -174,16 +182,18 @@ export class MyPostsComponent implements OnInit { * @param id number * @returns void */ - public dislike(id: number): void { + public async dislike(id: number): Promise { if (this.isLoggedIn) { - this._postsService.dislike(id).subscribe( - (response: any) => { - const ind = this.posts.findIndex(post => post.id === id); - this.posts[ind] = response; - this.posts = this.posts; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.dislike(id) + .subscribe({ + next: (response: any) => { + const ind = this.posts.findIndex(post => post.id === id); + this.posts[ind] = response; + this.posts = this.posts; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -202,7 +212,7 @@ export class MyPostsComponent implements OnInit { * @param search string * @returns void */ - search(search: string): void { + async search(search: string): Promise { this.isLoaded = false; const model = { search: search, @@ -210,15 +220,21 @@ export class MyPostsComponent implements OnInit { sortParameters: null, }; if(this._userId) { - this._postsService.userPosts(this._userId, model).subscribe( - (response: any) => { - this.posts = response.posts; - this.pageInfo = this.pageInfo; - this.isLoaded = true; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; + this._postsService.userPosts(this._userId, model) + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.posts = response.posts; + this.pageInfo = this.pageInfo; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -227,7 +243,7 @@ export class MyPostsComponent implements OnInit { * Sort posts by parameter. * @returns void */ - sort() { + async sort(): Promise { const sortParameters = { sortBy: this.sortBy, orderBy: this.orderBy, @@ -241,14 +257,20 @@ export class MyPostsComponent implements OnInit { sortParameters: sortParameters, }; if(this._userId) { - this._postsService.userPosts(this._userId, model).subscribe( - (response: any) => { - this.posts = response.posts; - this.pageInfo = response.pageInfo; - - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.userPosts(this._userId, model) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.posts = response.posts; + this.pageInfo = response.pageInfo; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -257,7 +279,7 @@ export class MyPostsComponent implements OnInit { * Get all posts. * @returns void */ - private _getPosts(page = 1): void { + private async _getPosts(page = 1): Promise { const sortParameters = { sortBy: null, orderBy: null, @@ -270,15 +292,23 @@ export class MyPostsComponent implements OnInit { tag: this._searchFilter, sortParameters: sortParameters, }; + if(this._userId) { - this._postsService.userPosts(this._userId, model).subscribe( - (response: any) => { - this.posts = response.posts; - this.pageInfo = response.pageInfo; - this.isLoaded = true; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.userPosts(this._userId, model) + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.posts = response.posts; + this.pageInfo = response.pageInfo; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/popular-posts/popular-posts.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/popular-posts/popular-posts.component.ts index dacd42f1..845fcbb8 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/popular-posts/popular-posts.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/popular-posts/popular-posts.component.ts @@ -1,16 +1,18 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { Post } from './../../../core/models/Post'; import { PostsService } from './../../../core/services/posts-services/posts.service'; import { PageViewDto } from '../../../core/Dto/PageViewDto'; import { PageInfo } from '../../../core/models/PageInfo'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; import { CustomToastrService } from '../../../core/services/custom-toastr.service'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-popular-posts', templateUrl: './popular-posts.component.html', styleUrls: ['./popular-posts.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class PopularPostsComponent implements OnInit { /** @@ -40,10 +42,12 @@ export class PopularPostsComponent implements OnInit { /** * @param _postsService PostsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _postsService: PostsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -57,7 +61,7 @@ export class PopularPostsComponent implements OnInit { * Get all posts. * @returns void */ - private _getPosts(page = 1): void { + private async _getPosts(page = 1): Promise { const sortParameters = { sortBy: this.sortBy, orderBy: this.orderBy, @@ -71,13 +75,19 @@ export class PopularPostsComponent implements OnInit { }; this._postsService.list(model) - .subscribe( - (response: PageViewDto) => { + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { this.posts = response.posts; this.pageInfo = response.pageInfo; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/posts-list/posts-list.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/posts-list/posts-list.component.ts index a180c1bb..54725c15 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/posts-list/posts-list.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/posts-list/posts-list.component.ts @@ -1,7 +1,7 @@ import { PostsService } from './../../../core/services/posts-services/posts.service'; -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { GeneralServiceService } from './../../../core'; -import { ActivatedRoute, Params } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; import { Post } from './../../../core/models/Post'; import { User } from './../../../core/models/User'; import { GlobalService } from './../../../core/services/global-service/global-service.service'; @@ -11,14 +11,15 @@ import { SearchForm } from './../../../core/forms/SearchForm'; import { PageInfo } from './../../../core/models/PageInfo'; import { CustomToastrService } from './../../../core/services/custom-toastr.service'; import { Messages } from './../../../core/data/Mesages'; -import { PageViewDto } from '../../../core/Dto/PageViewDto'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-posts-list', templateUrl: './posts-list.component.html', styleUrls: ['./posts-list.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class PostsListComponent implements OnInit { /** @@ -87,6 +88,7 @@ export class PostsListComponent implements OnInit { * @param _usersService UsersService * @param _postsService: PostsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _globalService: GlobalService, @@ -94,7 +96,8 @@ export class PostsListComponent implements OnInit { private _activatedRoute: ActivatedRoute, private _usersService: UsersService, private _postsService: PostsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } @@ -117,16 +120,18 @@ export class PostsListComponent implements OnInit { * @param postId number * @returns void */ - deleteAction(postId: number): void { + async deleteAction(postId: number): Promise { const postItem = this.posts.find(post => post.id === postId); if (this.loggedIn && this._globalService._currentUser && postItem?.authorId === this._globalService._currentUser?.id) { - this._postsService.delete(postId, this._globalService._currentUser.id).subscribe( - (response: any) => { - this._customToastrService.displaySuccessMessage(Messages.POST_DELETED_SUCCESSFULLY); - this._onDeleteCommentAction(response.id); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.delete(postId, this._globalService._currentUser.id) + .subscribe({ + next: (response: any) => { + this._customToastrService.displaySuccessMessage(Messages.POST_DELETED_SUCCESSFULLY); + this._onDeleteCommentAction(response.id); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -136,16 +141,18 @@ export class PostsListComponent implements OnInit { * @param id number * @returns void */ - public like(id: number): void { + public async like(id: number): Promise { if (this.loggedIn) { - this._postsService.like(id).subscribe( - (response: any) => { - const ind = this.posts.findIndex(post => post.id === id); - this.posts[ind] = response; - this.posts = this.posts; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.like(id) + .subscribe({ + next: (response: any) => { + const ind = this.posts.findIndex(post => post.id === id); + this.posts[ind] = response; + this.posts = this.posts; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -155,16 +162,18 @@ export class PostsListComponent implements OnInit { * @param id number * @returns void */ - public dislike(id: number): void { + public async dislike(id: number): Promise { if (this.loggedIn) { - this._postsService.dislike(id).subscribe( - (response: any) => { - const ind = this.posts.findIndex(post => post.id === id); - this.posts[ind] = response; - this.posts = this.posts; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.dislike(id) + .subscribe({ + next: (response: any) => { + const ind = this.posts.findIndex(post => post.id === id); + this.posts[ind] = response; + this.posts = this.posts; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -184,22 +193,28 @@ export class PostsListComponent implements OnInit { * @param search string * @returns void */ - public search(search: string): void { + public async search(search: string): Promise { this.isLoaded = false; const model = { search: search, tag: this._searchFilter, sortParameters: null, }; - this._postsService.list(model).subscribe( - (response: any) => { - this.posts = response.posts; - this.pageInfo = this.pageInfo; - this.isLoaded = true; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; + this._postsService.list(model) + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.posts = [...response.posts]; + this.pageInfo = { ...response.pageInfo }; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } @@ -207,7 +222,7 @@ export class PostsListComponent implements OnInit { * Sort posts by parameter. * @returns void */ - public sort(): void { + public async sort(): Promise { const sortParameters = { sortBy: this.sortBy, orderBy: this.orderBy, @@ -220,23 +235,29 @@ export class PostsListComponent implements OnInit { tag: this._searchFilter, sortParameters: sortParameters, }; - this._postsService.list(model).subscribe( - (response: any) => { - this.posts = response.posts; - this.pageInfo = response.pageInfo; - - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.list(model) + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.posts = [...response.posts]; + this.pageInfo = { ...response.pageInfo }; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); - } /** * Get all posts. * @returns void */ - private _getPosts(page = 1): void { + private async _getPosts(page = 1): Promise { const sortParameters = { sortBy: null, orderBy: null, @@ -251,16 +272,21 @@ export class PostsListComponent implements OnInit { }; this._postsService.list(model) - .subscribe( - (response: PageViewDto) => { - this.posts = response.posts; - this.pageInfo = response.pageInfo; + .pipe( + finalize(() => { this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.posts = [...response.posts]; + this.pageInfo = { ...response.pageInfo }; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; - }); + } + }); } /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/posts-table/posts-table.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/posts-table/posts-table.component.ts index cadca71e..eb47f35e 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/posts-table/posts-table.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/posts-table/posts-table.component.ts @@ -1,17 +1,18 @@ -import { Component, OnInit, Input, Output, output } from "@angular/core"; -import EventEmitter from "events"; +import { Component, OnInit, Input, Output, output, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core"; import { PageViewDto } from "../../../core/Dto/PageViewDto"; import { PageInfo } from "../../../core/models/PageInfo"; import { Post } from "../../../core/models/Post"; import { ErrorResponse } from "../../../core/responses/ErrorResponse"; import { CustomToastrService } from "../../../core/services/custom-toastr.service"; import { PostsService } from "../../../core/services/posts-services/posts.service"; +import { finalize } from "rxjs"; @Component({ selector: 'app-posts-table', templateUrl: './posts-table.component.html', styleUrls: ['./posts-table.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class PostsTableComponent implements OnInit { /** @@ -46,10 +47,12 @@ export class PostsTableComponent implements OnInit { /** * @param _postsService PostsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _postsService: PostsService, - private _customToastrService: CustomToastrService) { } + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef) { } /** @inheritdoc */ ngOnInit() { @@ -61,7 +64,7 @@ export class PostsTableComponent implements OnInit { * @param page number * @returns void */ - private _getPosts(page: number = 1): void { + private async _getPosts(page: number = 1): Promise { const sortParameters = { sortBy: null, orderBy: null, @@ -74,30 +77,41 @@ export class PostsTableComponent implements OnInit { sortParameters: sortParameters, }; if (this.userId != null) { - this._postsService.userPosts(this.userId, model).subscribe( - (response: any) => { - this.posts = response.posts; - this.pageInfo = response.pageInfo; - this.postsCount.emit(this.pageInfo.totalItems); - this.isLoaded = true; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; + this._postsService.userPosts(this.userId, model) + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.posts = response.posts; + this.pageInfo = response.pageInfo; + this.postsCount.emit(this.pageInfo.totalItems); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } else { this._postsService.list(model) - .subscribe( - (response: PageViewDto) => { + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { this.posts = response.posts; this.pageInfo = response.pageInfo; this.postsCount.emit(this.pageInfo.totalItems); - this.isLoaded = true; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - this.isLoaded = true; - }); + } + }); } this.pageInfo.totalItems = this.posts.length; diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/right-sidebar/right-sidebar.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/right-sidebar/right-sidebar.component.ts index 5f7facf0..c55bb98b 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/right-sidebar/right-sidebar.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/right-sidebar/right-sidebar.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; @Component({ selector: 'app-right-sidebar', templateUrl: './right-sidebar.component.html', styleUrls: ['./right-sidebar.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class RightSidebarComponent implements OnInit { diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/show/show.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/show/show.component.ts index 6c453d7b..8dee114a 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/show/show.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/posts/show/show.component.ts @@ -1,5 +1,5 @@ import { PostsService } from './../../../core/services/posts-services/posts.service'; -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { GeneralServiceService } from './../../../core'; import { UsersService } from '../../../core/services/users-services/users-service.service'; @@ -9,12 +9,14 @@ import { Post } from './../../../core/models/Post'; import { CustomToastrService } from './../../../core/services/custom-toastr.service'; import { PageInfo } from '../../../core/models/PageInfo'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-show', templateUrl: './show.component.html', styleUrls: ['./show.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class ShowComponent implements OnInit { /** @@ -64,6 +66,7 @@ export class ShowComponent implements OnInit { * @param _globalService GlobalService * @param _router Router * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _generalService: GeneralServiceService, @@ -72,7 +75,8 @@ export class ShowComponent implements OnInit { private _usersService: UsersService, private _globalService: GlobalService, private _router: Router, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -93,14 +97,16 @@ export class ShowComponent implements OnInit { * @param id number * @returns void */ - public like(id: number): void { + public async like(id: number): Promise { if(this.postId) { - this._postsService.like(this.postId).subscribe( - (response: any) => { - this.post = response; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.like(this.postId) + .subscribe({ + next: (response: any) => { + this.post = response; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -110,14 +116,16 @@ export class ShowComponent implements OnInit { * @param id number * @returns void */ - public dislike(id: number): void { + public async dislike(id: number): Promise { if(this.postId) { - this._postsService.dislike(this.postId).subscribe( - (response: any) => { - this.post = response; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.dislike(this.postId) + .subscribe({ + next: (response: any) => { + this.post = response; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -125,14 +133,16 @@ export class ShowComponent implements OnInit { /** * Delete post. */ - public deleteAction() { + public async deleteAction(): Promise { if (this.loggedIn && this.post && this.post?.authorId === this.user?.id) { - this._postsService.delete(this.post.id, this.user.id).subscribe( - () => { - this._router.navigateByUrl('/blog'); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._postsService.delete(this.post.id, this.user.id) + .subscribe({ + next: (response: any) => { + this._router.navigateByUrl('/blog'); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } @@ -147,20 +157,27 @@ export class ShowComponent implements OnInit { /** * Get post by id. */ - private _getPost() { + private async _getPost(): Promise { if(this.postId) { - this._postsService.showPost(this.postId).subscribe( - (response: any) => { - this.post = response.post; - if(this.post) { - this.post.tags = response.tags; - this.post.comments = response.comments.comments; + this._postsService.showPost(this.postId) + .pipe( + finalize(() => { + this.isLoaded = true; + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.post = response.post; + if(this.post) { + this.post.tags = response.tags; + this.post.comments = response.comments.comments; + } + this.pageInfo = response.comments.pageInfo; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); } - this.pageInfo = response.comments.pageInfo; - this.isLoaded = true; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/add-tag/add-tag.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/add-tag/add-tag.component.ts index 45332673..ec862cf3 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/add-tag/add-tag.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/add-tag/add-tag.component.ts @@ -1,6 +1,6 @@ import { TagsService } from './../../../core/services/posts-services/tags.service'; import { Tag } from './../../../core/models/Tag'; -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { TagForm } from './../../../core/forms/posts/TagForm'; import { User } from './../../../core/models/User'; @@ -14,7 +14,8 @@ import { ErrorResponse } from '../../../core/responses/ErrorResponse'; selector: 'app-add-tag', templateUrl: './add-tag.component.html', styleUrls: ['./add-tag.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AddTagComponent implements OnInit { /** @@ -65,18 +66,18 @@ export class AddTagComponent implements OnInit { * * @param tag Tag */ - public add(tag: Tag): void { + public async add(tag: Tag): Promise { if (this.tagForm.valid) { - this._tagsService.add(...this.tagForm.value).subscribe( - () => { - //this._customToastrService.displaySuccessMessage(Messages.TAG_CREATED_SUCCESSFULLY); - this._router.navigate(['/admin/tags']); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); - }); - - + this._tagsService.add(...this.tagForm.value) + .subscribe({ + next: (response: any) => { + //this._customToastrService.displaySuccessMessage(Messages.TAG_CREATED_SUCCESSFULLY); + this._router.navigate(['/admin/tags']); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } + }); } } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/edit-tag/edit-tag.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/edit-tag/edit-tag.component.ts index 79a1b6b4..c5959f3d 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/edit-tag/edit-tag.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/edit-tag/edit-tag.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { TagForm } from './../../../core/forms/posts/TagForm'; import { User } from './../../../core/models/User'; @@ -8,14 +8,15 @@ import { GlobalService } from './../../../core/services/global-service/global-se import { TagsService } from './../../../core/services/posts-services/tags.service'; import { Tag } from './../../../core/models/Tag'; import { CustomToastrService } from './../../../core/services/custom-toastr.service'; -import { Messages } from './../../../core/data/Mesages'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-edit-tag', templateUrl: './edit-tag.component.html', styleUrls: ['./edit-tag.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class EditTagComponent implements OnInit { /** @@ -50,6 +51,7 @@ export class EditTagComponent implements OnInit { * @param _globalService GlobalService * @param _tagsService TagsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _activatedRoute: ActivatedRoute, @@ -57,7 +59,8 @@ export class EditTagComponent implements OnInit { private _usersService: UsersService, private _globalService: GlobalService, private _tagsService: TagsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -86,18 +89,19 @@ export class EditTagComponent implements OnInit { * * @param tag Tag */ - public edit(tag: Tag): void { + public async edit(tag: Tag): Promise { if (this.tagForm.valid && this.tag && this._tagId) { this.tag.title = tag['title']; this._tagsService.edit(this._tagId, this.tag) - .subscribe( - () => { + .subscribe({ + next: (response: any) => { //this._customToastrService.displaySuccessMessage(Messages.TAG_EDITED_SUCCESSFULLY); this._router.navigate(['/admin/tags']); }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } } @@ -111,17 +115,23 @@ export class EditTagComponent implements OnInit { /** * Get tag by id. */ - private _getTag(): void { + private async _getTag(): Promise { if(this._tagId) { this._tagsService.getTag(this._tagId) - .subscribe( - (response: any) => { + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { this.tag = response; this._setFormData(); }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/popular-tags/popular-tags.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/popular-tags/popular-tags.component.ts index 10e69d97..280aaf29 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/popular-tags/popular-tags.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/popular-tags/popular-tags.component.ts @@ -1,20 +1,24 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { Tag } from './../../../core/models/Tag'; import { TagsService } from './../../../core/services/posts-services/tags.service'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; import { CustomToastrService } from '../../../core/services/custom-toastr.service'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-popular-tags', templateUrl: './popular-tags.component.html', styleUrls: ['./popular-tags.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class PopularTagsComponent implements OnInit { public tags: Tag[] = []; + constructor( private _tagsService: TagsService, - private _customToastrService: CustomToastrService) { + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef) { } ngOnInit() { @@ -25,7 +29,7 @@ export class PopularTagsComponent implements OnInit { * Get all tags. * @returns void */ - private _getTags(page = 1): void { + private async _getTags(page = 1): Promise { const sortParameters = { sortBy: null, orderBy: null, @@ -37,13 +41,20 @@ export class PopularTagsComponent implements OnInit { search: null, sortParameters: sortParameters }; + this._tagsService.list(model) - .subscribe( - (response: any) => { + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { this.tags = response.tags; }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/tags-list/tags-list.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/tags-list/tags-list.component.ts index d19b8b36..150a08f8 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/tags-list/tags-list.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/shared/tags/tags-list/tags-list.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; @Component({ selector: 'app-tags-list', templateUrl: './tags-list.component.html', styleUrls: ['./tags-list.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class TagsListComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/about/about.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/about/about.component.ts index 13824cb9..201057f5 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/about/about.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/about/about.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AboutComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/contacts/contacts.component.html b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/contacts/contacts.component.html index 58eeb30b..3c609c43 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/contacts/contacts.component.html +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/contacts/contacts.component.html @@ -27,7 +27,7 @@

Контактна інформація!

Форма зворотнього звязку

-
+
@if(!isLoggedIn) { diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/contacts/contacts.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/contacts/contacts.component.ts index 1378eb94..75e70c0a 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/contacts/contacts.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/contacts/contacts.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { MessageForm } from '../../../core/forms/MessageForm'; import { Messages } from '../../../core/data/Mesages'; @@ -14,7 +14,8 @@ import { UsersService } from '../../../core/services/users-services/users-servic selector: 'app-contacts', templateUrl: './contacts.component.html', styleUrls: ['./contacts.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class ContactsComponent implements OnInit { /** @@ -61,14 +62,16 @@ export class ContactsComponent implements OnInit { * @param message any * @returns void */ - public sendMessage(message: any): void { + public async sendMessage(message: any): Promise { message['messageType'] = MessageType.MessageForAdmins; - this._messagesService.sendMessage(message).subscribe( - () => { - this._customToastrService.displaySuccessMessage(Messages.MESSAGE_SENDED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._messagesService.sendMessage(message) + .subscribe({ + next: (response: any) => { + this._customToastrService.displaySuccessMessage(Messages.MESSAGE_SENDED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/default-pages.module.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/default-pages.module.ts index d210b85b..025a4f28 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/default-pages.module.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/default-pages/default-pages.module.ts @@ -12,6 +12,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; FormsModule, ReactiveFormsModule, ], - declarations: [AboutComponent, ContactsComponent] + declarations: [AboutComponent, ContactsComponent], + exports: [AboutComponent, ContactsComponent] }) export class DefaultPagesModule { } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/layout-component/layout-component.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/layout-component/layout-component.component.ts index 0fab8a3b..47aa70d6 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/layout-component/layout-component.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/layout-component/layout-component.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { GlobalService } from './../../core/services/global-service/global-service.service'; import { UsersService } from '../../core/services/users-services/users-service.service'; import { User } from './../../core/models/User'; @@ -7,7 +7,8 @@ import { User } from './../../core/models/User'; selector: 'app-layout-component', templateUrl: './layout-component.component.html', styleUrls: ['./layout-component.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class LayoutComponentComponent implements OnInit { /** diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-email/change-email.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-email/change-email.component.ts index b5f934a1..7970c76b 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-email/change-email.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-email/change-email.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { User } from './../../../core/models/User'; import { FormGroup } from '@angular/forms'; import { ProfileForm } from './../../../core/forms/user/ProfileForm'; @@ -12,12 +12,14 @@ import { Messages } from './../../../core/data/Mesages'; import { ProfileViewDto } from '../../../core/Dto/ProfileViewDto'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; import { AccountsService } from '../../../core/services/users-services/account.sevice'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-change-email', templateUrl: './change-email.component.html', styleUrls: ['./change-email.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class ChangeEmailComponent implements OnInit { /** @@ -46,13 +48,15 @@ export class ChangeEmailComponent implements OnInit { * @param _usersService UsersService * @param _accountsService: AccountsService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _router: Router, private _globalService: GlobalService, private _usersService: UsersService, private _accountsService: AccountsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -76,14 +80,21 @@ export class ChangeEmailComponent implements OnInit { * @param id number * @returns void */ - private _getProfile(id: number): void { - this._usersService.getProfile(id).subscribe( - (response: any) => { - this.user = response; - this._setFormData(); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + private async _getProfile(id: number): Promise { + this._usersService.getProfile(id) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.user = response; + this._setFormData(); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } @@ -91,7 +102,7 @@ export class ChangeEmailComponent implements OnInit { * Change user email. * @param profileModel any */ - edit(profileModel: any): void { + async edit(profileModel: any): Promise { if(this.user && this._globalService._currentUser && this._globalService._currentUser?.profile) { const profile = new ProfileViewDto( profileModel.email, @@ -100,21 +111,29 @@ export class ChangeEmailComponent implements OnInit { this.user.phoneNumber, this._globalService._currentUser?.password, this.user.profile?.about); - this._usersService.updateProfile(this._globalService._currentUser?.profile?.id, profile).subscribe( - (result: any) => { - if(this._globalService._currentUser && this._globalService._currentUser.profile) { - this._globalService._currentUser.userName = result.firstName + ' ' + result.lastName; - this._globalService._currentUser.email = result.email; - this._globalService._currentUser.firstName = result.firstName; - this._globalService._currentUser.lastName = result.lastName; - this._globalService._currentUser.phoneNumber = result.phoneNumber; - this._globalService._currentUser.profile.about = result.about; + + this._usersService.updateProfile(this._globalService._currentUser?.profile?.id, profile) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (result: any) => { + if(this._globalService._currentUser && this._globalService._currentUser.profile) { + this._globalService._currentUser.userName = result.firstName + ' ' + result.lastName; + this._globalService._currentUser.email = result.email; + this._globalService._currentUser.firstName = result.firstName; + this._globalService._currentUser.lastName = result.lastName; + this._globalService._currentUser.phoneNumber = result.phoneNumber; + this._globalService._currentUser.profile.about = result.about; + } + // this._usersService.saveUser(JSON.stringify(this._globalService._currentUser));*/ + this._customToastrService.displaySuccessMessage(Messages.EMAIL_CHANGED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); } - // this._usersService.saveUser(JSON.stringify(this._globalService._currentUser));*/ - this._customToastrService.displaySuccessMessage(Messages.EMAIL_CHANGED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); }); } } @@ -123,13 +142,15 @@ export class ChangeEmailComponent implements OnInit { * Verify email. * @returns void. */ - public verifyEmail(): void { - this._accountsService.sendConfirmationEmail().subscribe( - () => { - this._customToastrService.displaySuccessMessage(Messages.EMAIL_VERIFIED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + public async verifyEmail(): Promise { + this._accountsService.sendConfirmationEmail() + .subscribe({ + next: () => { + this._customToastrService.displaySuccessMessage(Messages.EMAIL_VERIFIED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-password/change-password.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-password/change-password.component.ts index 1c32c387..eb5ce5c8 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-password/change-password.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-password/change-password.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { User } from './../../../core/models/User'; import { FormGroup } from '@angular/forms'; import { TinyMCEOptionsObject } from './../../../core/models/TinyMCEOptionsObject'; @@ -11,12 +11,14 @@ import { CustomToastrService } from './../../../core/services/custom-toastr.serv import { ChangePasswordDto } from '../../../core/Dto/ChangePasswordDto'; import { ChangePasswordForm } from '../../../core/forms/user/ChangePasswordForm'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-change-password', templateUrl: './change-password.component.html', styleUrls: ['./change-password.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class ChangePasswordComponent implements OnInit { /** @@ -44,12 +46,14 @@ export class ChangePasswordComponent implements OnInit { * @param _globalService GlobalService * @param _usersService UsersService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _router: Router, private _globalService: GlobalService, private _usersService: UsersService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -73,14 +77,21 @@ export class ChangePasswordComponent implements OnInit { * @param id number * @returns void */ - private _getProfile(id: number): void { - this._usersService.getProfile(id).subscribe( - (response: any) => { - this.user = response; - this._setFormData(); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + private async _getProfile(id: number): Promise { + this._usersService.getProfile(id) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.user = response; + this._setFormData(); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } @@ -88,7 +99,7 @@ export class ChangePasswordComponent implements OnInit { * Change user email. * @param profileModel any */ - edit(profileModel: any): void { + async edit(profileModel: any): Promise { if (profileModel.oldPassword !== null && profileModel.newPassword !== null && profileModel.confirmPassword != null @@ -99,13 +110,15 @@ export class ChangePasswordComponent implements OnInit { const profile = new ChangePasswordDto( profileModel.oldPassword, profileModel.newPassword); - this._usersService.changePassword(profile).subscribe( - () => { - // this._usersService.saveUser(JSON.stringify(this._globalService._currentUser));*/ - this._customToastrService.displaySuccessMessage(Messages.PASSWORD_CHANGED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._usersService.changePassword(profile) + .subscribe({ + next: (response: any) => { + // this._usersService.saveUser(JSON.stringify(this._globalService._currentUser));*/ + this._customToastrService.displaySuccessMessage(Messages.PASSWORD_CHANGED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-phone-number/change-phone-number.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-phone-number/change-phone-number.component.ts index 19ddcebc..5f443bff 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-phone-number/change-phone-number.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/personal-info/change-phone-number/change-phone-number.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { User } from './../../../core/models/User'; import { FormGroup } from '@angular/forms'; import { ProfileForm } from './../../../core/forms/user/ProfileForm'; @@ -11,12 +11,14 @@ import { CustomToastrService } from './../../../core/services/custom-toastr.serv import { Messages } from './../../../core/data/Mesages'; import { ProfileViewDto } from '../../../core/Dto/ProfileViewDto'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-change-phone-number', templateUrl: './change-phone-number.component.html', styleUrls: ['./change-phone-number.component.scss'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class ChangePhoneNumberComponent implements OnInit { /** @@ -44,12 +46,14 @@ export class ChangePhoneNumberComponent implements OnInit { * @param _globalService GlobalService * @param _usersService UsersService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _router: Router, private _globalService: GlobalService, private _usersService: UsersService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -74,13 +78,20 @@ export class ChangePhoneNumberComponent implements OnInit { * @returns void */ private _getProfile(id: number): void { - this._usersService.getProfile(id).subscribe( - (response: any) => { - this.user = response; - this._setFormData(); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._usersService.getProfile(id) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.user = response; + this._setFormData(); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } @@ -89,7 +100,7 @@ export class ChangePhoneNumberComponent implements OnInit { * @param profileModel any * @returns void */ - edit(profileModel: any): void { + async edit(profileModel: any): Promise { if(this.user && this._globalService._currentUser?.profile) { const profile = new ProfileViewDto( this.user.email ?? '', @@ -98,21 +109,29 @@ export class ChangePhoneNumberComponent implements OnInit { profileModel.phoneNumber, undefined, this.user.profile?.about); - this._usersService.updateProfile(this._globalService._currentUser.profile.id, profile).subscribe( - (result: any) => { - if(this._globalService._currentUser?.profile) { - this._globalService._currentUser.userName = result.firstName + ' ' + result.lastName; - this._globalService._currentUser.email = result.email; - this._globalService._currentUser.firstName = result.firstName; - this._globalService._currentUser.lastName = result.lastName; - this._globalService._currentUser.phoneNumber = result.phoneNumber; - this._globalService._currentUser.profile.about = result.about; + + this._usersService.updateProfile(this._globalService._currentUser.profile.id, profile) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (result: any) => { + if(this._globalService._currentUser?.profile) { + this._globalService._currentUser.userName = result.firstName + ' ' + result.lastName; + this._globalService._currentUser.email = result.email; + this._globalService._currentUser.firstName = result.firstName; + this._globalService._currentUser.lastName = result.lastName; + this._globalService._currentUser.phoneNumber = result.phoneNumber; + this._globalService._currentUser.profile.about = result.about; + } + // this._usersService.saveUser(JSON.stringify(this._globalService._currentUser));*/ + this._customToastrService.displaySuccessMessage(Messages.PHONE_NUMBER_CHANGED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); } - // this._usersService.saveUser(JSON.stringify(this._globalService._currentUser));*/ - this._customToastrService.displaySuccessMessage(Messages.PHONE_NUMBER_CHANGED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/profile/edit-profile/edit-profile.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/profile/edit-profile/edit-profile.component.ts index e959ddae..967afbca 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/profile/edit-profile/edit-profile.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/profile/edit-profile/edit-profile.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { User } from './../../../core/models/User'; import { Router } from '@angular/router'; import { GlobalService } from './../../../core/services/global-service/global-service.service'; @@ -11,12 +11,14 @@ import { Messages } from './../../../core/data/Mesages'; import { CustomToastrService } from './../../../core/services/custom-toastr.service'; import { ProfileViewDto } from '../../../core/Dto/ProfileViewDto'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-edit-profile', templateUrl: './edit-profile.component.html', styleUrls: ['./edit-profile.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class EditProfileComponent implements OnInit { /** @@ -44,12 +46,14 @@ export class EditProfileComponent implements OnInit { * @param _globalService GlobalService * @param _usersService UsersService * @param _customToastrService CustomToastrService + * @param _changeDetectorRef: ChangeDetectorRef */ constructor( private _router: Router, private _globalService: GlobalService, private _usersService: UsersService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -74,13 +78,20 @@ export class EditProfileComponent implements OnInit { * @returns void */ private _getProfile(id: number): void { - this._usersService.getProfile(id).subscribe( - (response: any) => { - this.user = response; - this._setFormData(); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + this._usersService.getProfile(id) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.user = response; + this._setFormData(); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } @@ -89,7 +100,7 @@ export class EditProfileComponent implements OnInit { * @param profileModel any * @returns void */ - edit(profileModel: any): void { + async edit(profileModel: any): Promise { if(this.user && this._globalService._currentUser?.profile) { const profile = new ProfileViewDto( this.user.email ?? '', @@ -98,21 +109,28 @@ export class EditProfileComponent implements OnInit { this.user.phoneNumber, undefined, profileModel.about); - this._usersService.updateProfile(this._globalService._currentUser.profile.id, profile).subscribe( - (result: any) => { - if(this._globalService._currentUser?.profile) { - this._globalService._currentUser.userName = result.firstName + ' ' + result.lastName; - this._globalService._currentUser.email = result.email; - this._globalService._currentUser.firstName = result.firstName; - this._globalService._currentUser.lastName = result.lastName; - this._globalService._currentUser.phoneNumber = result.phoneNumber; - this._globalService._currentUser.profile.about = result.about; + this._usersService.updateProfile(this._globalService._currentUser.profile.id, profile) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (result: any) => { + if(this._globalService._currentUser?.profile) { + this._globalService._currentUser.userName = result.firstName + ' ' + result.lastName; + this._globalService._currentUser.email = result.email; + this._globalService._currentUser.firstName = result.firstName; + this._globalService._currentUser.lastName = result.lastName; + this._globalService._currentUser.phoneNumber = result.phoneNumber; + this._globalService._currentUser.profile.about = result.about; + } + // this._usersService.saveUser(JSON.stringify(this._globalService._currentUser));*/ + this._customToastrService.displaySuccessMessage(Messages.PROFILE_EDITED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); } - // this._usersService.saveUser(JSON.stringify(this._globalService._currentUser));*/ - this._customToastrService.displaySuccessMessage(Messages.PROFILE_EDITED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/profile/profile-page/profile-page.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/profile/profile-page/profile-page.component.ts index 7ba64d32..294d11a7 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/profile/profile-page/profile-page.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/profile/profile-page/profile-page.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { GeneralServiceService } from './../../../core'; import { ActivatedRoute, Router } from '@angular/router'; import { User } from './../../../core/models/User'; @@ -8,12 +8,14 @@ import { CustomToastrService } from './../../../core/services/custom-toastr.serv import { Messages } from './../../../core/data/Mesages'; import { ErrorResponse } from '../../../core/responses/ErrorResponse'; import { AccountsService } from '../../../core/services/users-services/account.sevice'; +import { finalize } from 'rxjs'; @Component({ selector: 'app-profile-page', templateUrl: './profile-page.component.html', styleUrls: ['./profile-page.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class ProfilePageComponent implements OnInit { /** @@ -70,7 +72,8 @@ export class ProfilePageComponent implements OnInit { private _globalService: GlobalService, private _usersService: UsersService, private _accountsService: AccountsService, - private _customToastrService: CustomToastrService + private _customToastrService: CustomToastrService, + private _changeDetectorRef: ChangeDetectorRef ) { } /** @@ -105,13 +108,20 @@ export class ProfilePageComponent implements OnInit { * @param id number * @returns void */ - private _getProfile(id: number): void { - this._usersService.getProfile(id).subscribe( - (response: any) => { - this.user = response; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + private async _getProfile(id: number): Promise { + this._usersService.getProfile(id) + .pipe( + finalize(() => { + this._changeDetectorRef.markForCheck(); + }) + ) + .subscribe({ + next: (response: any) => { + this.user = response; + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } @@ -135,13 +145,15 @@ export class ProfilePageComponent implements OnInit { * Verify email. * @returns void. */ - public verifyEmail(): void { - this._accountsService.sendConfirmationEmail().subscribe( - () => { - this._customToastrService.displaySuccessMessage(Messages.EMAIL_VERIFIED_SUCCESSFULLY); - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); + public async verifyEmail(): Promise { + this._accountsService.sendConfirmationEmail() + .subscribe({ + next: () => { + this._customToastrService.displaySuccessMessage(Messages.EMAIL_VERIFIED_SUCCESSFULLY); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } }); } } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/user/authorization/authorization.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/user/authorization/authorization.component.ts index 9b21cdf2..309e5c36 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/user/authorization/authorization.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/user/authorization/authorization.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { AuthorizationForm } from './../../../core/forms/user/AuthorizationForm'; import { Router } from '@angular/router'; @@ -14,7 +14,8 @@ import { AccountsService } from '../../../core/services/users-services/account.s selector: 'app-authorization', templateUrl: './authorization.component.html', styleUrls: ['./authorization.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class AuthorizationComponent implements OnInit { /** @@ -51,18 +52,19 @@ export class AuthorizationComponent implements OnInit { * @param dataForAuthorize any * @returns void */ - authorization(dataForAuthorize: any): void { + async authorization(dataForAuthorize: any): Promise { if (this.authorizationForm.valid) { this._usersService.login(dataForAuthorize) - .subscribe( - (jwt: JwtToken) => { + .subscribe({ + next: (jwt: JwtToken) => { if (jwt) { this.succesLogin(jwt); } }, - (error: ErrorResponse) => { + error: (error: ErrorResponse) => { this._customToastrService.displayErrorMessage(error); - }); + } + }); } } @@ -70,29 +72,31 @@ export class AuthorizationComponent implements OnInit { * Save user data if login success * @param jwt JwtToken */ - public succesLogin(jwt: JwtToken | null): void { - if(typeof jwt === 'string') { - const jwtString = jwt; - jwt = null; - const parsedJwtString = JSON.parse(jwtString); - jwt = new JwtToken(parsedJwtString['auth_token'], parsedJwtString['refresh_token'], parsedJwtString['expires_in']); - } - if(jwt) { - this._usersService.saveToken(jwt.AccessToken, jwt.RefreshToken); - if(this._globalService._currentUser) { - this._accountService.initialize(this._globalService._currentUser.id).subscribe( - (initializationData: any) => { - this._customToastrService.displaySuccessMessage(Messages.AUTHORIZED_SUCCESSFULLY); - this._router.navigate(['/']) - .then(() => { - this._globalService.initializeData(initializationData); - });; - }, - (error: ErrorResponse) => { - this._customToastrService.displayErrorMessage(error); - }); - } - } + public async succesLogin(jwt: JwtToken | null): Promise { + if(typeof jwt === 'string') { + const jwtString = jwt; + jwt = null; + const parsedJwtString = JSON.parse(jwtString); + jwt = new JwtToken(parsedJwtString['auth_token'], parsedJwtString['refresh_token'], parsedJwtString['expires_in']); + } + if(jwt) { + this._usersService.saveToken(jwt.AccessToken, jwt.RefreshToken); + if(this._globalService._currentUser) { + this._accountService.initialize(this._globalService._currentUser.id) + .subscribe({ + next: (initializationData: any) => { + this._customToastrService.displaySuccessMessage(Messages.AUTHORIZED_SUCCESSFULLY); + this._router.navigate(['/']) + .then(() => { + this._globalService.initializeData(initializationData); + }); + }, + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } + }); + } + } // this._subscription.add(initializeSubscription); // this._globalService.setIsLoadedData(false); } diff --git a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/user/registration/registration.component.ts b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/user/registration/registration.component.ts index ed388ca1..b33d21f6 100644 --- a/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/user/registration/registration.component.ts +++ b/BlogWebApp/Blog.Web/ClientApp/src/app/user-portal/user/registration/registration.component.ts @@ -1,17 +1,18 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { Messages } from './../../../core/data/Mesages'; import { CustomToastrService } from './../../../core/services/custom-toastr.service'; import { RegistrationForm } from '../../../core/forms/user/RegistrationForm'; -import { GlobalService } from '../../../core/services/global-service/global-service.service'; import { UsersService } from '../../../core/services/users-services/users-service.service'; import { Router } from '@angular/router'; +import { ErrorResponse } from '../../../core/responses/ErrorResponse'; @Component({ selector: 'app-registration', templateUrl: './registration.component.html', styleUrls: ['./registration.component.css'], - standalone: false + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush }) export class RegistrationComponent implements OnInit { /** @@ -42,7 +43,7 @@ export class RegistrationComponent implements OnInit { /** * Register user. */ - register() { + async register(): Promise { if ( this.registrationForm.valid && this.registrationForm.value.password === this.registrationForm.value.confirmPassword) { @@ -50,13 +51,16 @@ export class RegistrationComponent implements OnInit { roles.push('User'); this.registrationForm.value.roles = roles; this._usersService.registration(this.registrationForm.value) - .subscribe( - (response) => { + .subscribe({ + next: () => { // this._logIn(registerModel); // this.isLoginRequestSend = false; this._customToastrService.displaySuccessMessage(Messages.REGISTERED_SUCCESSFULLY); }, - (errorMessage) => {}); + error: (error: ErrorResponse) => { + this._customToastrService.displayErrorMessage(error); + } + }); } } }