Skip to content

Commit 8ee4c91

Browse files
MutugiiiMutugiii
committed
remove component resize listeners in favor of shared device state
1 parent 434a165 commit 8ee4c91

26 files changed

Lines changed: 199 additions & 242 deletions

‎src/app/chat/chat-sidebar/chat-sidebar.component.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
1+
import { Component, OnInit, OnDestroy } from '@angular/core';
22
import { NonNullableFormBuilder, FormGroup, Validators, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
33
import { MatDialog } from '@angular/material/dialog';
44
import { Subject } from 'rxjs';
@@ -99,7 +99,9 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
9999
private searchService: SearchService,
100100
private userService: UserService
101101
) {
102-
this.deviceType = this.deviceInfoService.getDeviceType();
102+
this.deviceInfoService.watchDeviceType().pipe(takeUntil(this.onDestroy$)).subscribe((deviceType) => {
103+
this.deviceType = deviceType;
104+
});
103105
this.lastRenderedConversation = -1;
104106
}
105107

@@ -116,10 +118,6 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
116118
this.recordSearch(true);
117119
}
118120

119-
@HostListener('window:resize') OnResize() {
120-
this.deviceType = this.deviceInfoService.getDeviceType();
121-
}
122-
123121
subscribeToNewChats() {
124122
this.chatService.newChatAdded$
125123
.pipe(takeUntil(this.onDestroy$))

‎src/app/community/community.component.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, OnDestroy, ViewEncapsulation, HostListener } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
22
import { ActivatedRoute, ParamMap, Router, RouterLink } from '@angular/router';
33
import { MatDialog } from '@angular/material/dialog';
44
import { NonNullableFormBuilder, FormControl, FormGroup, FormsModule } from '@angular/forms';
@@ -168,7 +168,9 @@ export class CommunityComponent implements OnInit, OnDestroy {
168168
private fb: NonNullableFormBuilder,
169169
private configurationCheckService: ConfigurationCheckService
170170
) {
171-
this.deviceType = this.deviceInfoService.getDeviceType();
171+
this.deviceInfoService.watchDeviceType().pipe(takeUntil(this.onDestroy$)).subscribe((deviceType) => {
172+
this.deviceType = deviceType;
173+
});
172174
}
173175

174176
ngOnInit() {
@@ -216,10 +218,6 @@ export class CommunityComponent implements OnInit, OnDestroy {
216218
});
217219
}
218220

219-
@HostListener('window:resize') onResize() {
220-
this.deviceType = this.deviceInfoService.getDeviceType();
221-
}
222-
223221
ngOnDestroy() {
224222
this.onDestroy$.next();
225223
this.onDestroy$.complete();

‎src/app/courses/courses.component.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, AfterViewInit, ViewChild, OnDestroy, HostListener, Input, OnChanges, ViewEncapsulation } from '@angular/core';
1+
import { Component, OnInit, AfterViewInit, ViewChild, OnDestroy, Input, OnChanges, ViewEncapsulation } from '@angular/core';
22
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
33
import { MatPaginator, PageEvent } from '@angular/material/paginator';
44
import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -176,13 +176,10 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
176176
this.setupList(this.courses.data, shelf.courseIds);
177177
});
178178
this.dialogsLoadingService.start();
179-
this.deviceType = this.deviceInfoService.getDeviceType();
180-
this.isMobile = this.deviceType === DeviceType.MOBILE || this.deviceType === DeviceType.SMALL_MOBILE;
181-
}
182-
183-
@HostListener('window:resize') OnResize() {
184-
this.deviceType = this.deviceInfoService.getDeviceType();
185-
this.isMobile = this.deviceType === DeviceType.MOBILE || this.deviceType === DeviceType.SMALL_MOBILE;
179+
this.deviceInfoService.watchDeviceType().pipe(takeUntil(this.onDestroy$)).subscribe((deviceType) => {
180+
this.deviceType = deviceType;
181+
this.isMobile = deviceType === DeviceType.MOBILE || deviceType === DeviceType.SMALL_MOBILE;
182+
});
186183
}
187184

188185
ngOnInit() {

‎src/app/courses/progress-courses/courses-progress-leader.component.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
1+
import { Component, OnInit, OnDestroy } from '@angular/core';
22
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
33
import { MatDialog } from '@angular/material/dialog';
44
import { Subject } from 'rxjs';
@@ -69,7 +69,9 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
6969
private stateService: StateService,
7070
private deviceInfoService: DeviceInfoService
7171
) {
72-
this.deviceType = this.deviceInfoService.getDeviceType();
72+
this.deviceInfoService.watchDeviceType().pipe(takeUntil(this.onDestroy$)).subscribe((deviceType) => {
73+
this.deviceType = deviceType;
74+
});
7375
}
7476

7577
ngOnInit() {
@@ -94,11 +96,6 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
9496
this.onDestroy$.complete();
9597
}
9698

97-
@HostListener('window:resize')
98-
onResize() {
99-
this.deviceType = this.deviceInfoService.getDeviceType();
100-
}
101-
10299
setProgress(course) {
103100
this.coursesService.findProgress([ course._id ], { allUsers: true }).subscribe((progress) => {
104101
this.progress = progress;

‎src/app/courses/view-courses/courses-view.component.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
22
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
33
import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
44
import { Subject } from 'rxjs';
@@ -66,11 +66,9 @@ export class CoursesViewComponent implements OnInit, OnDestroy {
6666
private stateService: StateService,
6767
private deviceInfoService: DeviceInfoService
6868
) {
69-
this.deviceType = this.deviceInfoService.getDeviceType();
70-
}
71-
72-
@HostListener('window:resize') OnResize() {
73-
this.deviceType = this.deviceInfoService.getDeviceType();
69+
this.deviceInfoService.watchDeviceType().pipe(takeUntil(this.onDestroy$)).subscribe((deviceType) => {
70+
this.deviceType = deviceType;
71+
});
7472
}
7573

7674
ngOnInit() {

‎src/app/dashboard/dashboard-tile.component.ts‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import {
2-
Component, Input, ElementRef, ViewChild, Output, EventEmitter, AfterViewChecked,
3-
ChangeDetectorRef, HostBinding, HostListener, OnInit, forwardRef
4-
} from '@angular/core';
1+
import {
2+
Component, Input, ElementRef, ViewChild, Output, EventEmitter, AfterViewChecked,
3+
ChangeDetectorRef, DestroyRef, HostBinding, OnInit, forwardRef, inject
4+
} from '@angular/core';
5+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
56
import { tap } from 'rxjs/operators';
67
import { PlanetMessageService } from '../shared/planet-message.service';
78
import { UserService } from '../shared/user.service';
@@ -48,7 +49,8 @@ export class DashboardTileTitleComponent {
4849
NgStyle, MatIconButton, PlanetLoadingSpinnerComponent, TruncateTextPipe
4950
]
5051
})
51-
export class DashboardTileComponent implements AfterViewChecked, OnInit {
52+
export class DashboardTileComponent implements AfterViewChecked, OnInit {
53+
private readonly destroyRef = inject(DestroyRef);
5254
@Input() cardTitle: string;
5355
private _cardType: string;
5456
@Input() set cardType(value: string) {
@@ -80,24 +82,23 @@ export class DashboardTileComponent implements AfterViewChecked, OnInit {
8082
@HostBinding('class.accordion-expanded') get isExpandedClass() {
8183
return this.isExpanded;
8284
}
83-
@HostListener('window:resize')
84-
onResize() {
85-
this.deviceType = this.deviceInfoService.getDeviceType();
86-
if (this.cardType === 'myLife' && this.deviceType === DeviceType.MOBILE) {
87-
this.isExpanded = true;
88-
}
89-
}
90-
91-
constructor(
85+
constructor(
9286
private planetMessageService: PlanetMessageService,
9387
private userService: UserService,
9488
private teamsService: TeamsService,
95-
private dialog: MatDialog,
96-
private cd: ChangeDetectorRef,
97-
private deviceInfoService: DeviceInfoService
98-
) {
99-
this.deviceType = this.deviceInfoService.getDeviceType();
100-
}
89+
private dialog: MatDialog,
90+
private cd: ChangeDetectorRef,
91+
private deviceInfoService: DeviceInfoService
92+
) {
93+
this.deviceInfoService.watchDeviceType()
94+
.pipe(takeUntilDestroyed(this.destroyRef))
95+
.subscribe((deviceType) => {
96+
this.deviceType = deviceType;
97+
if (this.cardType === 'myLife' && (deviceType === DeviceType.SMALL_MOBILE || deviceType === DeviceType.MOBILE)) {
98+
this.isExpanded = true;
99+
}
100+
});
101+
}
101102

102103
ngOnInit() {
103104
if (this.cardType === 'myLife' && (this.deviceType === DeviceType.SMALL_MOBILE || this.deviceType === DeviceType.MOBILE)) {

‎src/app/dashboard/dashboard.component.ts‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, OnDestroy, HostBinding, HostListener } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, HostBinding } from '@angular/core';
22
import { MatDialog } from '@angular/material/dialog';
33
import { finalize, map, catchError, switchMap, auditTime, takeUntil } from 'rxjs/operators';
44
import { of, forkJoin, Subject, combineLatest } from 'rxjs';
@@ -59,14 +59,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
5959
return this.deviceType === DeviceType.MOBILE;
6060
}
6161

62-
@HostListener('window:resize')
63-
onResize() {
64-
this.deviceType = this.deviceInfoService.getDeviceType();
65-
this.isMobile = this.deviceType === DeviceType.SMALL_MOBILE || this.deviceType === DeviceType.MOBILE;
66-
this.updateMyLifeItemsFormat();
67-
}
68-
69-
constructor(
62+
constructor(
7063
private userService: UserService,
7164
private couchService: CouchService,
7265
private submissionsService: SubmissionsService,
@@ -84,16 +77,19 @@ export class DashboardComponent implements OnInit, OnDestroy {
8477
});
8578
this.couchService.currentTime().subscribe((date) => this.dateNow = date);
8679
this.coursesService.requestCourses();
87-
combineLatest(
88-
this.coursesService.coursesListener$(),
89-
this.certificationsService.getCertifications()
90-
).pipe(auditTime(500), takeUntil(this.onDestroy$)).subscribe(([ courses, certifications ]) => {
91-
this.setBadgesCourses(courses, certifications);
92-
});
93-
this.deviceType = this.deviceInfoService.getDeviceType();
94-
this.isMobile = this.deviceType === DeviceType.SMALL_MOBILE || this.deviceType === DeviceType.MOBILE;
95-
this.initMyLifeItems();
96-
}
80+
combineLatest(
81+
this.coursesService.coursesListener$(),
82+
this.certificationsService.getCertifications()
83+
).pipe(auditTime(500), takeUntil(this.onDestroy$)).subscribe(([ courses, certifications ]) => {
84+
this.setBadgesCourses(courses, certifications);
85+
});
86+
this.deviceInfoService.watchDeviceType().pipe(takeUntil(this.onDestroy$)).subscribe((deviceType) => {
87+
this.deviceType = deviceType;
88+
this.isMobile = deviceType === DeviceType.SMALL_MOBILE || deviceType === DeviceType.MOBILE;
89+
this.updateMyLifeItemsFormat();
90+
});
91+
this.initMyLifeItems();
92+
}
9793

9894
ngOnInit() {
9995
this.displayName = this.user.firstName !== undefined ? `${this.user.firstName} ${this.user.lastName}` : this.user.name;

‎src/app/feedback/feedback.component.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, HostListener } from '@angular/core';
1+
import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
22
import { Router, RouterLink } from '@angular/router';
33
import { combineLatest, Subject } from 'rxjs';
44
import { takeUntil } from 'rxjs/operators';
@@ -100,11 +100,9 @@ export class FeedbackComponent implements OnInit, AfterViewInit, OnDestroy {
100100
private usersService: UsersService,
101101
private deviceInfoService: DeviceInfoService
102102
) {
103-
this.deviceType = this.deviceInfoService.getDeviceType();
104-
}
105-
106-
@HostListener('window:resize') OnResize() {
107-
this.deviceType = this.deviceInfoService.getDeviceType();
103+
this.deviceInfoService.watchDeviceType().pipe(takeUntil(this.onDestroy$)).subscribe((deviceType) => {
104+
this.deviceType = deviceType;
105+
});
108106
}
109107

110108
ngOnInit() {

‎src/app/home/home.component.ts‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, ViewChild, ElementRef, DoCheck, AfterViewChecked, HostListener, OnDestroy } from '@angular/core';
1+
import { Component, OnInit, ViewChild, ElementRef, DoCheck, AfterViewChecked, OnDestroy } from '@angular/core';
22
import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
33
import { trigger, state, style, animate, transition } from '@angular/animations';
44
import { MatDialog } from '@angular/material/dialog';
@@ -94,18 +94,20 @@ export class HomeComponent implements OnInit, DoCheck, AfterViewChecked, OnDestr
9494
private stateService: StateService,
9595
private deviceInfoService: DeviceInfoService,
9696
private notificationsService: NotificationsService
97-
) {
98-
this.userService.userChange$.pipe(takeUntil(this.onDestroy$))
99-
.subscribe(() => {
100-
this.onUserUpdate();
101-
this.getNotification();
102-
});
103-
this.couchService.get('_node/nonode@nohost/_config/planet').subscribe((res: any) => this.layout = res.layout || 'classic');
104-
this.onlineStatus = this.stateService.configuration.registrationRequest;
105-
this.deviceType = this.deviceInfoService.getDeviceType();
106-
this.isMobile = this.deviceType === DeviceType.MOBILE || this.deviceType === DeviceType.SMALL_MOBILE;
107-
this.isAndroid = this.deviceInfoService.isAndroid();
108-
}
97+
) {
98+
this.userService.userChange$.pipe(takeUntil(this.onDestroy$))
99+
.subscribe(() => {
100+
this.onUserUpdate();
101+
this.getNotification();
102+
});
103+
this.couchService.get('_node/nonode@nohost/_config/planet').subscribe((res: any) => this.layout = res.layout || 'classic');
104+
this.onlineStatus = this.stateService.configuration.registrationRequest;
105+
this.deviceInfoService.watchDeviceType().pipe(takeUntil(this.onDestroy$)).subscribe((deviceType) => {
106+
this.deviceType = deviceType;
107+
this.isMobile = deviceType === DeviceType.MOBILE || deviceType === DeviceType.SMALL_MOBILE;
108+
});
109+
this.isAndroid = this.deviceInfoService.isAndroid();
110+
}
109111

110112
ngOnInit() {
111113
this.getNotification();
@@ -124,9 +126,9 @@ export class HomeComponent implements OnInit, DoCheck, AfterViewChecked, OnDestr
124126
this.subscribeToLogoutClick();
125127
}
126128

127-
ngDoCheck() {
128-
this.onResize();
129-
}
129+
ngDoCheck() {
130+
this.syncToolbarLayout();
131+
}
130132

131133
ngAfterViewChecked() {
132134
const toolbarElement = this.toolbar.nativeElement;
@@ -151,14 +153,12 @@ export class HomeComponent implements OnInit, DoCheck, AfterViewChecked, OnDestr
151153
this.onDestroy$.complete();
152154
}
153155

154-
@HostListener('window:resize') onResize() {
155-
const isScreenTooNarrow = window.innerWidth < this.classicToolbarWidth;
156-
if (this.forceModern !== isScreenTooNarrow) {
157-
this.forceModern = isScreenTooNarrow;
158-
}
159-
this.deviceType = this.deviceInfoService.getDeviceType();
160-
this.isMobile = this.deviceType === DeviceType.MOBILE || this.deviceType === DeviceType.SMALL_MOBILE;
161-
}
156+
syncToolbarLayout() {
157+
const isScreenTooNarrow = window.innerWidth < this.classicToolbarWidth;
158+
if (this.forceModern !== isScreenTooNarrow) {
159+
this.forceModern = isScreenTooNarrow;
160+
}
161+
}
162162

163163
openLanguageSelector(): void {
164164
this.languageComponent?.openMenu();

‎src/app/manager-dashboard/certifications/certifications.component.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Component, OnInit, AfterViewInit, ViewChild, HostListener } from '@angular/core';
1+
import { Component, DestroyRef, OnInit, AfterViewInit, ViewChild, inject } from '@angular/core';
2+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
23
import { MatPaginator } from '@angular/material/paginator';
34
import { MatSort, MatSortHeader } from '@angular/material/sort';
45
import { SelectionModel } from '@angular/cdk/collections';
@@ -38,6 +39,7 @@ import { MatInput } from '@angular/material/input';
3839
]
3940
})
4041
export class CertificationsComponent implements OnInit, AfterViewInit {
42+
private readonly destroyRef = inject(DestroyRef);
4143

4244
certifications = new MatTableDataSource();
4345
selection = new SelectionModel(true, []);
@@ -57,11 +59,11 @@ export class CertificationsComponent implements OnInit, AfterViewInit {
5759
private deviceInfoService: DeviceInfoService,
5860
private dialogsLoadingService: DialogsLoadingService
5961
) {
60-
this.deviceType = this.deviceInfoService.getDeviceType();
61-
}
62-
63-
@HostListener('window:resize') OnResize() {
64-
this.deviceType = this.deviceInfoService.getDeviceType();
62+
this.deviceInfoService.watchDeviceType()
63+
.pipe(takeUntilDestroyed(this.destroyRef))
64+
.subscribe((deviceType) => {
65+
this.deviceType = deviceType;
66+
});
6567
}
6668

6769
ngOnInit() {

0 commit comments

Comments
 (0)