[Refactor] Use rxjs first instead of unsubscribe from queryParams (#1229)

* Use rxjs first instead of unsubscribe

* Use rxjs first instead of unsubscribe

* Update jslib

* Update jslib

* Downgrade jslib to before breaking changes

bitwarden_license/src/app/providers/clients/clients.component.ts

@@ -7,6 +7,8 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
@@ -66,11 +68,8 @@ export class ClientsComponent implements OnInit {
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

bitwarden_license/src/app/providers/manage/people.component.ts

@@ -7,6 +7,8 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
@@ -81,7 +83,7 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
                 if (qParams.viewEvents != null) {
                     const user = this.users.filter(u => u.id === qParams.viewEvents);
@@ -89,9 +91,6 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
                         this.events(user[0]);
                     }
                 }
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

bitwarden_license/src/app/providers/setup/setup.component.ts

@@ -11,6 +11,8 @@ import {
     ToasterService,
 } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 
@@ -41,12 +43,7 @@ export class SetupComponent implements OnInit {
 
     ngOnInit() {
         document.body.classList.remove('layout_frontend');
-        let fired = false;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
             const error = qParams.providerId == null || qParams.email == null || qParams.token == null;
 
             if (error) {

src/app/accounts/login.component.ts

@@ -4,6 +4,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
@@ -42,7 +44,7 @@ export class LoginComponent extends BaseLoginComponent {
     }
 
     async ngOnInit() {
-        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                 this.email = qParams.email;
             }
@@ -53,9 +55,6 @@ export class LoginComponent extends BaseLoginComponent {
                     { route: '/settings/create-organization', qParams: { plan: qParams.org } });
             }
             await super.ngOnInit();
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
 
         const invite = await this.stateService.get<any>('orgInvitation');

src/app/accounts/register.component.ts

@@ -4,6 +4,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
@@ -44,7 +46,7 @@ export class RegisterComponent extends BaseRegisterComponent {
     }
 
     async ngOnInit() {
-        const queryParamsSub = this.route.queryParams.subscribe(qParams => {
+        this.route.queryParams.pipe(first()).subscribe(qParams => {
             this.referenceData = new ReferenceEventRequest();
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                 this.email = qParams.email;
@@ -68,9 +70,6 @@ export class RegisterComponent extends BaseRegisterComponent {
             if (this.referenceData.id === '') {
                 this.referenceData.id = null;
             }
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
         const invite = await this.stateService.get<any>('orgInvitation');
         if (invite != null) {

src/app/accounts/sso.component.ts

@@ -4,6 +4,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
@@ -37,7 +39,7 @@ export class SsoComponent extends BaseSsoComponent {
 
     async ngOnInit() {
         super.ngOnInit();
-        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.identifier != null) {
                 this.identifier = qParams.identifier;
             } else {
@@ -46,9 +48,6 @@ export class SsoComponent extends BaseSsoComponent {
                     this.identifier = storedIdentifier;
                 }
             }
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
     }
 

src/app/accounts/verify-email-token.component.ts

@@ -7,6 +7,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -25,12 +27,7 @@ export class VerifyEmailTokenComponent implements OnInit {
         private apiService: ApiService, private userService: UserService) { }
 
     ngOnInit() {
-        let fired = false;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
             if (qParams.userId != null && qParams.token != null) {
                 try {
                     await this.apiService.postAccountVerifyEmailToken(

src/app/accounts/verify-recover-delete.component.ts

@@ -7,6 +7,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -31,12 +33,7 @@ export class VerifyRecoverDeleteComponent implements OnInit {
     }
 
     ngOnInit() {
-        let fired = false;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
             if (qParams.userId != null && qParams.token != null && qParams.email != null) {
                 this.userId = qParams.userId;
                 this.token = qParams.token;

src/app/common/base.accept.component.ts

@@ -12,6 +12,8 @@ import {
     ToasterService,
 } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -35,12 +37,7 @@ export abstract class BaseAcceptComponent implements OnInit {
     abstract unauthedHandler(qParams: any): Promise<void>;
 
     ngOnInit() {
-        let fired = false;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
             await this.stateService.remove('loginRedirect');
 
             let error = this.requiredParameters.some(e => qParams?.[e] == null || qParams[e] === '');

src/app/organizations/manage/collections.component.ts

@@ -7,6 +7,8 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CollectionService } from 'jslib-common/abstractions/collection.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
@@ -57,11 +59,8 @@ export class CollectionsComponent implements OnInit {
         this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
             await this.load();
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

src/app/organizations/manage/groups.component.ts

@@ -9,6 +9,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -60,11 +62,8 @@ export class GroupsComponent implements OnInit {
                 return;
             }
             await this.load();
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

src/app/organizations/manage/people.component.ts

@@ -5,6 +5,8 @@ import {
     ViewContainerRef,
 } from '@angular/core';
 
+import { first } from 'rxjs/operators';
+
 import {
     ActivatedRoute,
     Router,
@@ -120,7 +122,7 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
                 if (qParams.viewEvents != null) {
                     const user = this.users.filter(u => u.id === qParams.viewEvents);
@@ -128,9 +130,6 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
                         this.events(user[0]);
                     }
                 }
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

src/app/organizations/manage/policies.component.ts

@@ -9,6 +9,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { PolicyType } from 'jslib-common/enums/policyType';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -58,7 +60,7 @@ export class PoliciesComponent implements OnInit {
             await this.load();
 
             // Handle policies component launch from Event message
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 if (qParams.policyId != null) {
                     const policyIdFromEvents: string = qParams.policyId;
                     for (const orgPolicy of this.orgPolicies) {
@@ -73,10 +75,6 @@ export class PoliciesComponent implements OnInit {
                         }
                     }
                 }
-
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

src/app/organizations/vault/vault.component.ts

@@ -12,6 +12,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -65,12 +67,12 @@ export class VaultComponent implements OnInit, OnDestroy {
             this.platformUtilsService.isSelfHost() ? 'trashCleanupWarningSelfHosted' : 'trashCleanupWarning'
         );
 
-        const queryParams = this.route.parent.params.subscribe(async params => {
+        this.route.parent.params.pipe(first()).subscribe(async params => {
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.groupingsComponent.organization = this.organization;
             this.ciphersComponent.organization = this.organization;
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.ciphersComponent.searchText = this.groupingsComponent.searchText = qParams.search;
                 if (!this.organization.canViewAllCollections) {
                     await this.syncService.fullSync(false);
@@ -118,15 +120,7 @@ export class VaultComponent implements OnInit, OnDestroy {
                         this.viewEvents(cipher[0]);
                     }
                 }
-
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
-
-            if (queryParams != null) {
-                queryParams.unsubscribe();
-            }
         });
     }
 

src/app/settings/create-organization.component.ts

@@ -5,6 +5,8 @@ import {
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { PlanType } from 'jslib-common/enums/planType';
 import { ProductType } from 'jslib-common/enums/productType';
 
@@ -20,7 +22,7 @@ export class CreateOrganizationComponent implements OnInit {
     constructor(private route: ActivatedRoute) { }
 
     ngOnInit() {
-        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.plan === 'families') {
                 this.orgPlansComponent.plan = PlanType.FamiliesAnnually;
                 this.orgPlansComponent.product = ProductType.Families;
@@ -31,9 +33,6 @@ export class CreateOrganizationComponent implements OnInit {
                 this.orgPlansComponent.plan = PlanType.EnterpriseAnnually;
                 this.orgPlansComponent.product = ProductType.Enterprise;
             }
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
     }
 }

src/app/vault/vault.component.ts

@@ -12,6 +12,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { CipherType } from 'jslib-common/enums/cipherType';
 
 import { CipherView } from 'jslib-common/models/view/cipherView';
@@ -81,7 +83,7 @@ export class VaultComponent implements OnInit, OnDestroy {
             this.platformUtilsService.isSelfHost() ? 'trashCleanupWarningSelfHosted' : 'trashCleanupWarning'
         );
 
-        const queryParamsSub = this.route.queryParams.subscribe(async params => {
+        this.route.queryParams.pipe(first()).subscribe(async params => {
             await this.syncService.fullSync(false);
 
             this.showUpdateKey = !(await this.cryptoService.hasEncKey());
@@ -139,10 +141,6 @@ export class VaultComponent implements OnInit, OnDestroy {
                     }
                 });
             });
-
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
     }