How to optimize RXJS operator to avoid messy code?

Issue

I try to avoid messy code using RXjs. There is a following code:

combineLatest([
  this.usersService.userRightsObs$,
  this.layersService.flatLayersObs$,
])
.pipe(debounceTime(300))
.subscribe(([userRights, treeLayers]) => {
  const editableLayers = userRights.editableLayers.map((layerId) => {
    return treeLayers.get(layerId.toString());
  });
  this.layersService.setEditableLayers(editableLayers);
});

So, I dislike that my code look messy in this place:

const editableLayers = userRights.editableLayers.map((layerId) => {
  return treeLayers.get(layerId.toString());
});
    
this.layersService.setEditableLayers(editableLayers);

I think it is not responsible place.

Solution

welcome to the StackOverflow. In your case, there's not much to upgrade, really. You can move mapping to the operator and use anonymous functions to shorten the code though.

combineLatest([
  this.usersService.userRightsObs$,
  this.layersService.flatLayersObs$,
])
.pipe(
  debounceTime(300)
  map(([userRights, treeLayers]) => userRights.editableLayers.map((layerId) => treeLayers.get(layerId.toString()))
)
.subscribe(editableLayers => {
  this.layersService.setEditableLayers(editableLayers);
});

Answered By - mat.hudak