Repository: oppia/oppia
File: core/templates/pages/exploration-player-page/current-lesson-player/learner-experience/tutor-card.component.ts (TypeScript)

Code before:
      if (this.username !== null) {
        [this.profilePicturePngDataUrl, this.profilePictureWebpDataUrl] =
          this.userService.getProfileImageDataUrl(this.username);
      } else {
        this.profilePictureWebpDataUrl =
          this.urlInterpolationService.getStaticImageUrl(
            AppConstants.DEFAULT_PROFILE_IMAGE_WEBP_PATH
          );
        this.profilePicturePngDataUrl =
          this.urlInterpolationService.getStaticImageUrl(
            AppConstants.DEFAULT_PROFILE_IMAGE_PNG_PATH
          );
      }
    } else {
      this.profilePictureWebpDataUrl =
        this.urlInterpolationService.getStaticImageUrl(
          AppConstants.DEFAULT_PROFILE_IMAGE_WEBP_PATH
        );
      this.profilePicturePngDataUrl =
        this.urlInterpolationService.getStaticImageUrl(
          AppConstants.DEFAULT_PROFILE_IMAGE_PNG_PATH
        );
    }
  }

  async ngOnInit(): Promise<void> {
    this.inStoryMode = this.explorationModeService.isInStoryChapterMode();
    this._editorPreviewMode =
      this.pageContextService.isInExplorationEditorPage();
    this.inputOutputHistoryIsShown =
      !this.pageContextService.isInDiagnosticTestPlayerPage();
    this.feedbackIsEnabled =
      !this.pageContextService.isInDiagnosticTestPlayerPage();
    this.checkpointCelebrationModalIsEnabled =
      this.pageContextService.isInExplorationPlayerPage();
    this.getUserInfoAsync();
    this.isIframed = this.urlService.isIframed();
    this.getCanAskLearnerForAnswerInfo =
      this.learnerAnswerInfoService.getCanAskLearnerForAnswerInfo;
    this.OPPIA_AVATAR_IMAGE_URL =
      this.urlInterpolationService.getStaticCopyrightedImageUrl(
        '/avatar/oppia_avatar_100px.svg'
      );
    try {
      await this.chapterProgressService.updateCompletedChaptersCount(true);
      this.completedChaptersCount =
        this.chapterProgressService.getCompletedChaptersCount();
    } catch (error) {
      if (error.status === 401) {
        console.error('User is logged out setting default chapters count');
        this.completedChaptersCount = 0;

Review comment (bug):
I don't think you can make lifecycle hooks in Angular async?

https://stackoverflow.com/questions/56092083/async-await-in-angular-ngoninit

Code after:
      if (this.username !== null) {
        [this.profilePicturePngDataUrl, this.profilePictureWebpDataUrl] =
          this.userService.getProfileImageDataUrl(this.username);
      } else {
        this.profilePictureWebpDataUrl =
          this.urlInterpolationService.getStaticImageUrl(
            AppConstants.DEFAULT_PROFILE_IMAGE_WEBP_PATH
          );
        this.profilePicturePngDataUrl =
          this.urlInterpolationService.getStaticImageUrl(
            AppConstants.DEFAULT_PROFILE_IMAGE_PNG_PATH
          );
      }
    } else {
      this.profilePictureWebpDataUrl =
        this.urlInterpolationService.getStaticImageUrl(
          AppConstants.DEFAULT_PROFILE_IMAGE_WEBP_PATH
        );
      this.profilePicturePngDataUrl =
        this.urlInterpolationService.getStaticImageUrl(
          AppConstants.DEFAULT_PROFILE_IMAGE_PNG_PATH
        );
    }
  }

  ngOnInit(): void {
    this.inStoryMode = this.explorationModeService.isInStoryChapterMode();
    this._editorPreviewMode =
      this.pageContextService.isInExplorationEditorPage();
    this.inputOutputHistoryIsShown =
      !this.pageContextService.isInDiagnosticTestPlayerPage();
    this.feedbackIsEnabled =
      !this.pageContextService.isInDiagnosticTestPlayerPage();
    this.checkpointCelebrationModalIsEnabled =
      this.pageContextService.isInExplorationPlayerPage();
    this.getUserInfoAsync();
    this.isIframed = this.urlService.isIframed();
    this.getCanAskLearnerForAnswerInfo =
      this.learnerAnswerInfoService.getCanAskLearnerForAnswerInfo;
    this.OPPIA_AVATAR_IMAGE_URL =
      this.urlInterpolationService.getStaticCopyrightedImageUrl(
        '/avatar/oppia_avatar_100px.svg'
      );
    this.chapterProgressService.completedChaptersCount$.subscribe(
      (count: number) => {
        this.completedChaptersCount = count;
      }
    );
    this.directiveSubscriptions.add(
      this.conversationFlowService.onOppiaFeedbackAvailable.subscribe(() => {
        this.waitingForOppiaFeedback = false;