📄 Custom RxJS operators 6/7: "retryForStatus operator"

#angular #rxjs #retryForStatus

The built-in retry operator allows to resubscribe to the source stream once an error has been thrown. It is possible to make a decision whether or not to retry based on the information contained in the error object. In turn, when it comes to streams that represent an http request, the operator can be configured to call an API again only for certain response statuses.

operator

interface ErrorWithStatus extends Error {
  status: number;
}

interface RetryForStatusConfig {
  retryableStatuses: number[];
  delay: number;
  count?: number;
}

function retryForStatus<T>({
  retryableStatuses,
  delay,
  count = Infinity,
}: RetryForStatusConfig): MonoTypeOperatorFunction<T> {
  return retry({
    count,
    delay: (err: ErrorWithStatus, retryCount) =>
      retryableStatuses.includes(err.status)
        ? timer(retryCount * delay)
        : throwError(() => err),
  });
}

📄 Custom RxJS operators 7/7: "toLatestFrom operator"

#angular #rxjs #toLatestFrom

The built-in withLatestFrom operator allows to add data from supplementary streams to the source stream. However, sometimes the source stream is just a trigger to perform a certain action for which data from supplementary streams is needed. As a result, the array of elements in the output stream contains a dummy first element. A better solution is to neglect the value from the trigger.

operator

function toLatestFrom<T, D1>(d1$: ObservableInput<D1>): OperatorFunction<T, D1>;
function toLatestFrom<T, D1, D extends unknown[]>(
  d1$: ObservableInput<D1>,
  ...data$: [...ObservableInputTuple<D>]
): OperatorFunction<T, [D1, ...D]>;

function toLatestFrom<D1, D extends unknown[]>(
  d1$: ObservableInput<D1>,
  ...data$: [...ObservableInputTuple<D>]
) {
  return pipe(
    withLatestFrom(d1$, ...data$),
    map(([_, ...data]) => (data.length === 1 ? data[0] : data))
  );
}

🤓 Code Review Checklist: Magic Values 📛 💣

#angular #review

It is recommended to use constants or enums to make the code more readable and maintainable and avoid magic values

🤓 Code Review Checklist: Hard-Coded Styles 📛

#angular #review

Be careful when using inline styles like style="margin-top: 12px".it can be hard to maintain

📄 Exploring the New Object.groupBy Function in Chrome 117

#js #groupBy

✅ Article link: https://medium.com/@bhargavr445/exploring-the-new-object-groupby-function-in-chrome-117-028820848433

📄 Angular Interceptors: Authentication Interceptor

#angular #interceptor

An authentication interceptor is used to add authentication tokens to outgoing requests and handle authentication-related errors. This is essential for securing your application’s API requests.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler) {
    const authToken = 'your-auth-token';
    const authRequest = request.clone({
      headers: request.headers.set('Authorization', `Bearer ${authToken}`),
    });
    return next.handle(authRequest);
  }
}