RxJS Challenge: Неделя 1

Для отслеживания изменения фокуса нам понадобятся события focusin и focusout, поскольку focus/blur не всплывают. Мы будем получать элемент через target и relatedTarget, потому что в момент этих событий мы еще не можем проверить document.activeElement — в коллбэке событий там будет body. Если текущий элемент вне отслеживаемой зоны, будем выдавать null. Так же подобную логику можно вынести в сервис — его потом будет удобно использовать в директивах. Поскольку мы не знаем момент, когда пользователь подпишется на наш стрим, добавим такую конструкцию для получения начального значения при подписке: defer(() => of(documentRef.activeElement)). Остается только собрать все потоки в merge:

@Injectable() export class FocusWithinService extends Observable<Element | null> {   constructor(     @Inject(DOCUMENT) documentRef: Document,     { nativeElement }: ElementRef<HTMLElement>   ) {     const focusedElement$ = merge(       defer(() => of(documentRef.activeElement)),       fromEvent(nativeElement, "focusin").pipe(map(({ target }) => target)),       fromEvent(nativeElement, "focusout").pipe(         map(({ relatedTarget }) => relatedTarget)       )     ).pipe(       map(element =>         element && nativeElement.contains(element) ? element : null       ),       distinctUntilChanged(),     );      super(subscriber => focusedElement$.subscribe(subscriber));   } }

StackBlitz с готовым решением

Тут ситуация довольно тривиальная. Единственный подвох — начальное значение. Если мы сразу проверим, видима страница или нет, это значение может оказаться неактуальным на момент подписки. Можно использовать defer, как в прошлый раз, а можно начать с произвольного значения, а реальное получать в map ниже:

export const PAGE_VISIBILITY = new InjectionToken<Observable<boolean>>(   "Shared Observable based on `document visibility changed`",   {     factory: () => {       const documentRef = inject(DOCUMENT);        return fromEvent(documentRef, "visibilitychange").pipe(         startWith(0),         map(() => documentRef.visibilityState !== "hidden"),         distinctUntilChanged(),         shareReplay()       );     }   } );

В качестве бонуса в примере мы превратим этот поток в DI-токен для удобного использования. Этот токен есть в нашей микробиблиотеке токенов на глобальные сущности.

StackBlitz с готовым решением

Давайте посмотрим, как мы можем ветвить потоки, на примере данной задачи. В такой ситуации типовое начало будет Subject, который мы будем дергать по нажатию на кнопку и Observable, который перебрасывает эти нажатия на запрос на сервер:

readonly submit$ = new Subject<void>();  readonly request$ = this.submit$.pipe(   switchMapTo(this.service.pipe(startWith(""))),   share(), );

Теперь давайте разведем запросы на нужные нам потоки. Обратите внимание на share в конце, который поможет нам избежать повторных запросов на сервер при подписках на эти витки.

При ошибке сервис бросит реальную ошибку в поток. Таким образом, имя пользователя будет просто повторной попыткой запроса:

readonly user$ = this.request$.pipe(retry());

Сообщение об ошибке же будет как раз той ошибкой, которую бросит запрос, показанной в течение 5 секунд:

readonly error$ = this.request$.pipe(   ignoreElements(),   catchError(e => of(e)),   repeat(),   switchMap(e => timer(5000).pipe(startWith(e))) );

Мы игнорируем элементы и показывает только ошибки. На этом примере хорошо видна разница между repeat и retry: первый перезапускает поток, который успешно завершился, второй перезапускает поток, закончившийся ошибкой. Аналогичным образом мы можем отвести поток, отвечающий за блокировку кнопки.

StackBlitz с готовым решением

Начнем мы, как и в прошлый раз, с Subject и общего потока. Общий поток мы разведем на два — прогресс и результат. Для первого мы используем фильтрацию:

readonly progress$ = this.response$.pipe(filter(Number.isFinite));

А для второго — преобразование, чтобы можно было перезапускать процесс:

readonly result$ = this.response$.pipe(   map(response => typeof response === "string" ? response : null),   distinctUntilChanged() );

StackBlitz с готовым решением

Для обратного отсчета можно сделать простую утилитную функцию, где мы воспользуемся малоизвестным вторым аргументом takeWhile:

function countdownFrom(start: number): Observable<number> {   return timer(0, 1000).pipe(     map(index => start - index),     takeWhile(Boolean, true)   ); }

Благодаря второму аргументу, 0, который нарушит условие, тоже провалится дальше. Сам стрим будет просто использовать switchMapTo от Subject, который мы запускаем по кнопке, как в прошлых примерах. Использовать можно так:

<ng-container *ngIf="countdown$ | async as value else resend">   Resend code in {{ value }} sec. </ng-container> <ng-template #resend>   <button (click)="resend$.next()">Resend code</button> </ng-template>

Заключительный 0 не пройдет ngIf и переключит шаблон назад на кнопку.

CSS-решение будет полагаться на анимацию псевдоэлементов и перезапуск ее с помощью :active состояния нажатой кнопки. Загляните в CSS-файл странички с решением:

StackBlitz с готовым решением