Solution - Finalize Operator
Solution
import { fromEvent, throwError } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { catchError, finalize, mergeMap, tap } from 'rxjs/operators';
const message = document.getElementById('message') as HTMLDivElement;
const login = document.getElementById('login') as HTMLFormElement;
const email = document.getElementById('email') as HTMLInputElement;
const password = document.getElementById('password') as HTMLInputElement;
fromEvent(login, 'submit')
.pipe(
tap((event) => event.preventDefault()),
mergeMap((event) =>
ajax
.post('https://reqres.in/api/login', {
email: email.value,
password: password.value
})
.pipe(
catchError((error) => {
message.classList.remove('hidden');
return throwError(error);
}),
finalize(() =>
window.setTimeout(() => message.classList.add('hidden'), 5000)
)
)
)
)
.subscribe({
error: (e) => console.error('observer', e),
next: (value) => console.log('next', value),
complete: () => console.log('complete')
});
The key takeaway in the solution code above is the use of the finalize()
operator to add the hidden
class to the message
div element after 5000 milliseconds.