Improved subscription architecture

This commit is contained in:
squidfunk 2020-02-13 17:48:53 +01:00
parent e0e559b429
commit f4de690712
3 changed files with 12 additions and 9 deletions

View File

@ -80,7 +80,8 @@ export function mountSearch(
/* Mount search query */ /* Mount search query */
const query$ = useComponent<HTMLInputElement>("search-query") const query$ = useComponent<HTMLInputElement>("search-query")
.pipe( .pipe(
mountSearchQuery(handler) mountSearchQuery(handler),
shareReplay(1)
) )
/* Mount search reset */ /* Mount search reset */

View File

@ -69,7 +69,7 @@ export function mountSearchQuery(
data: value data: value
})) }))
) )
.subscribe(tx$) .subscribe(tx$.next.bind(tx$))
/* Toggle search on focus */ /* Toggle search on focus */
query$ query$

View File

@ -20,12 +20,13 @@
* IN THE SOFTWARE. * IN THE SOFTWARE.
*/ */
import { NEVER, OperatorFunction, pipe } from "rxjs" import { OperatorFunction, pipe } from "rxjs"
import { import {
mapTo,
startWith,
switchMap, switchMap,
switchMapTo, switchMapTo,
tap, tap
withLatestFrom
} from "rxjs/operators" } from "rxjs/operators"
import { watchSearchReset } from "observables" import { watchSearchReset } from "observables"
@ -41,12 +42,13 @@ import { useComponent } from "../../_"
* *
* @return Operator function * @return Operator function
*/ */
export function mountSearchReset(): OperatorFunction<HTMLElement, never> { export function mountSearchReset(): OperatorFunction<HTMLElement, void> {
const query$ = useComponent<HTMLElement>("search-query") const query$ = useComponent<HTMLElement>("search-query")
return pipe( return pipe(
switchMap(watchSearchReset), switchMap(watchSearchReset),
withLatestFrom(query$), switchMapTo(query$),
tap(([, el]) => el.focus()), tap(el => el.focus()),
switchMapTo(NEVER) mapTo(undefined),
startWith(undefined)
) )
} }