How to reuse code and make it more flexible?

Question

I have the follwing code:

combineLatest(...this.filtersList.map((f) => f.filtersChanges)).subscribe(
            (selectedFilters: Filter[]) => {
                const filterUrlCombiner = new FilterUrlCombiner();
                const filterUrlBuilders = selectedFilters
                    .filter(Boolean)
                    .map((filter) => new FilterUrlBuilder(filter, ComparingOperation.eq));
                const filterUrls = filterUrlBuilders.map((filter) => filter.buildStringUrl()).filter(Boolean);

                this.filterBy = filterUrlCombiner.combineUrl(filterUrls);
                this.settingsService.setExecutionFiltersSettings(selectedFilters);
            },
            (error) => {
                console.log('ERROR: ' + error);
            },
        );

This code listens changes from filters filtersChanges and returns them latest values as array.

Then array is handled by FilterUrlCombiner and FilterUrlBuilder as finish result I get string URL in this.filterBy with all parameters from array.

I need to reuse the code wrapped in subscribe() in another place, but I dont want copy/past. How to reuse code and make it more flexible?

So you mean to say you want to reuse this method `combineLatest()` else where, right? Like in component A and in component B and C etc? Currently your login is in component A, correct? — Wahab Shah, Jul 06 '20 at 19:29
No I want to resuse only part of code in `subscribe()` lI think to do the following, create a function `export function getUrlFilters(selectedFilters: Filter[]) { // PUT HERE EVERYTHIN EMBEDDED IN SUBSCRIBE } ` — , Jul 06 '20 at 19:31

ruth · Accepted Answer · 2020-07-06T19:40:12.100

1

You're essentially passing callback functions to next and error parameters of the subscription. You could define the callbacks separately and invoke them from the subscription.

combineLatest(...this.filtersList.map((f) => f.filtersChanges)).subscribe(
    this.onNext.bind(this),
    this.onError.bind(this)
);

onNext(selectedFilters: Filter[]) {
    const filterUrlCombiner = new FilterUrlCombiner();
    const filterUrlBuilders = selectedFilters
        .filter(Boolean)
        .map((filter) => new FilterUrlBuilder(filter, ComparingOperation.eq));
    const filterUrls = filterUrlBuilders.map((filter) => filter.buildStringUrl()).filter(Boolean);

    this.filterBy = filterUrlCombiner.combineUrl(filterUrls);
    this.settingsService.setExecutionFiltersSettings(selectedFilters);
}

onError(error: any) {
    console.log('ERROR: ' + error);
}

You need to use the bind() function to pass in the meaning of this keyword to point to the class member variables. More info here on how to access this keyword in callbacks.

edited Jul 06 '20 at 19:40

answered Jul 06 '20 at 19:35

ruth

29,535
4
30
57

How does this help to OP *use the code in another place*? – R. Richards Jul 06 '20 at 19:47
`onNext(selectedFilters: Filter[]) {}` I can reuse it anywhere – Jul 06 '20 at 19:48
@R.Richards: He wants to reuse the callbacks in another subscription perhaps or invoke them directly. Also if you were the one deleted the OP's original comment, it'd be better if you could provide a feedback before going ahead deleting comments. – ruth Jul 06 '20 at 19:50
1

I guess I should have been clearer in my question. What I really meant is: How does this help to OP use the code in another **class**? But, if that doesn't matter in this situation, the question is moot.I don't know anything about any deleted comments on this post. "Thank you" type of comments do get removed rather quickly around here. – R. Richards Jul 06 '20 at 19:57

How to reuse code and make it more flexible?

1 Answers1