Leveraging the power of RXJS and typescript for executing work conditionally between Server and Client Code

Question

Leveraging the power of RXJS and typescript for executing work conditionally between Server and Client Code

I am in need of a function that will assess various conditions to determine if an object is eligible for editing.
These conditions may exist on both the server and client sides.
Certain conditions should halt further validation and return a value.

I will attempt to clarify this process using pseudocode.
There may be an established pattern for executing such tasks already.

isEditable(): Observable<boolean> {
  return serverSideCondition.pipe(
    switchMap(editable => {
      if (editable)
      {
        return clientSideCondition;
      }

      return of(false); // Should abort further conditions ...
    }),
    switchMap(editable => {
      if (editable)
      {
        return clientSideAskTheUser;
      }

      return of(false); // Should abort further conditions ...
    })
  );
}

Thanks

angular typescript design-patterns rxjs conditional-statements

Answer 1

Answer №1

If you prefer not to pass a false value through all operators, an alternative approach is to throw an error and catch it later.

isEditable(): Observable<boolean> {
  return serverSideCondition.pipe(
    throwIfFalsy(),
    switchMap(editable => clientSideCondition.pipe(throwIfFalsy())),   
    switchMap(editable => clientSideAskTheUser.pipe(throwIfFalsy())),
    // other operators ...
    catchError(error => of(error))
  );
}

throwIfFalsy() {
  return tap(value => {
    if (!value) {
      throw value
    }
  })
}

Answer 2

If you prefer not to pass a false value through all operators, an alternative approach is to throw an error and catch it later.

isEditable(): Observable<boolean> {
  return serverSideCondition.pipe(
    throwIfFalsy(),
    switchMap(editable => clientSideCondition.pipe(throwIfFalsy())),   
    switchMap(editable => clientSideAskTheUser.pipe(throwIfFalsy())),
    // other operators ...
    catchError(error => of(error))
  );
}

throwIfFalsy() {
  return tap(value => {
    if (!value) {
      throw value
    }
  })
}

Leveraging the power of RXJS and typescript for executing work conditionally between Server and Client Code

Answer №1

Similar questions

pressing the button again will yield a new outcome

Type error TS2322: You can't assign type 'undefined' to type 'string'

Having trouble adding @angular/fire to my Angular project

Is the 'case' in a switch statement not treated as a typeguard by Typescript?

Keeping track of the authentication state in AngularFire2 on page reload to verify if the user is logged

In Node.js, retrieve all users from the database and display only the users' name, id, and image, excluding

Dealing with an `err_connection_refused` HTTP error in Angular 7: What's the best approach?

The TN-Models-FP error message states that it is not allowed to use the `create` model without an associated `entity` model

The side menu fails to appear when pressed

Having trouble with sending values to Angular 7 components' HTML pages

Troubden array filtration in Angular is malfunctioning

What are the TypeScript type definitions for the "package.json" configuration file?

explore and view all images within a directory

Exporting Types in an NPM Package: Best Practices

Utilizing a TypeScript definition file (.d.ts) for typings in JavaScript code does not provide alerts for errors regarding primitive types

Utilizing shared components across a Next.js application within a monorepo

Can someone guide me on creating a slideshow using Ionic?

When using Angular's `createComponent()` method, an error may be thrown with the message "ERROR TypeError: Cannot add

What is the best way to display HTML in this particular situation?

Angular Material - truncating selected text in a list