API Calls Based on Player Action

TLDR

Frontend work. Created PlayerActionService for handling orchestrating API calls based on the action a user clicks. Implemented this using Observable<T> from RxJS, rather than Promise<T>.

private handleSkipAction(
    gameState: GameState,
    actionState: ActionState,
  ): Observable<ActionState> {
    if (!actionState.selectedPlayerActionUserId) {
      return throwError(
        () =>
          `No player user ID provided for action ${actionState.selectedPlayerAction}.`,
      );
    }

    return this.catanApiService
      .postSkipAction(actionState.selectedPlayerActionUserId!, gameState.gameId)
      .pipe(
        map((_) => {
          actionState.selectedPlayerActionUserId = null;
          actionState.selectedPlayerAction = null;
          return actionState;
        }),
      );
  }

Main work

• Created ActionState model to hold the UI state of player actions. E.g., selectedAction and selectedPlayerUserId.
• Generated PlayerActionService Angular component.
• Reading Observable docs and implementing callbacks.

Challenges

• Committing to learning Observable and using a new programming approach, especially when Promise would fit my needs and is already familiar.

Learnings

• Learning about pipe, map, subscribe, and general strategies around RxJS and Observable.