1. A Puzzle to Solve
I am faced with the challenge of implementing a dynamic language change flow for my blog. Here is an overview of how I envision it:
- The user initiates a language change by clicking a button that triggers an event (
Subject). - This event is then used to query
Firebasein order to fetch the appropriate page content based on the selected language.
If I handle each step independently, there might be an issue where the query does not get triggered when the user changes the language midway. This makes me think that a nested subscription/observable approach might be necessary. Am I on the right track?
2. Current State of My Code
In my attempts so far, nesting subscriptions did not yield the desired outcome. I suspect it could be due to scoping issues. Currently, this is the code snippet I am experimenting with:
this.headerService.langChanged.pipe(
map(
(newLang: string) => {
this.db
.collection<AboutMePage>(
this.aboutMeCollectionName,
ref => ref.where('lang', '==', newLang)
)
.valueChanges();
})
)
.subscribe(
value => {
this.aboutMe = value[0]
}
);
The headerService.langChanged is an instance of Subject<string>.
Is there an operator in rxjs specially suited for this scenario? concat seemed promising, but it waits for the previous Observable to complete, which is not ideal in this context. Additionally, passing parameters to the next observable adds another layer of complexity...