Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-03-24 15:39:43 +01:00
Code Issues Projects Releases Wiki Activity

Refactored message listener observable to handle angular change detection

Browse Source
This commit is contained in:
gbubemismith 2023-08-07 16:18:20 -04:00
parent 15c3a0d8a0
commit dd4343c980
No known key found for this signature in database
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/browser/src/platform/browser/browser-api.ts
View File

@ -1,3 +1,4 @@
import { NgZone } from "@angular/core";
import { Observable } from "rxjs";
import { DeviceType } from "@bitwarden/common/enums";
@ -212,9 +213,15 @@ export class BrowserApi {
}
}
static messageListener$() {
static messageListener$(zone?: NgZone) {
return new Observable<unknown>((subscriber) => {
const handler = (message: unknown) => subscriber.next(message);
const handler = (message: unknown) => {
if (zone) {
zone.run(() => subscriber.next(message));
} else {
subscriber.next(message);
}
};
chrome.runtime.onMessage.addListener(handler);
return () => chrome.runtime.onMessage.removeListener(handler);
});

15
apps/browser/src/vault/popup/components/fido2/fido2.component.ts
View File

@ -18,6 +18,7 @@ import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { Fido2KeyView } from "@bitwarden/common/vault/models/view/fido2-key.view";
import { BrowserApi } from "../../../../platform/browser/browser-api";
import {
BrowserFido2Message,
BrowserFido2UserInterfaceSession,
@ -57,16 +58,10 @@ export class Fido2Component implements OnInit, OnDestroy {
map((queryParamMap) => queryParamMap.get("sessionId"))
);
// Duplicated from BrowserApi.MessageListener$, but adds ngZone.run to make sure
// Angular change detection knows when a new value is emitted. Otherwise it is outside the zone.
// TODO: refactor so that this is reusable in other components to help others avoid this trap!
const messageListener$ = new Observable<unknown>((subscriber) => {
const handler = (message: unknown) => this.ngZone.run(() => subscriber.next(message)); // <-- the magic is here
chrome.runtime.onMessage.addListener(handler);
return () => chrome.runtime.onMessage.removeListener(handler);
}) as Observable<BrowserFido2Message>;
combineLatest([sessionId$, messageListener$])
combineLatest([
sessionId$,
BrowserApi.messageListener$(this.ngZone) as Observable<BrowserFido2Message>,
])
.pipe(takeUntil(this.destroy$))
.subscribe(([sessionId, message]) => {
this.sessionId = sessionId;