Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/codeally/show.tsx (TypeScript)

Code before:

    if (!isPartiallyCompleted && !isCompleted) {
      createFlashMessage({
        type: 'danger',
        message: FlashMessages.CompleteProjectFirst
      });
    } else if (showCompletionModal) {
      openCompletionModal();
    }
  };

  openGitpod = (userToken?: string) => {
    const {
      data: {
        challengeNode: {
          challenge: { url, coderoadTutorial }
        }
      }
    } = this.props;

    const gitpodDomain = `https://gitpod.io/?autostart=true#CODEROAD_TUTORIAL_URL=${coderoadTutorial},CODEROAD_DISABLE_RUN_ON_SAVE=true`;
    const tokenEnv = userToken ? `,CODEROAD_WEBHOOK_TOKEN=${userToken}` : '';
    const gitpodUrl = `${gitpodDomain}${tokenEnv}/${url}`;

    window.open(gitpodUrl, '_blank');
  };

  startCourse = async () => {
    const { isSignedIn, userToken, updateUserToken } = this.props;

    if (!isSignedIn) {
      this.openGitpod();
    } else if (!userToken) {
      const createUserTokenResponse = await postUserToken();
      const { data = { userToken: null } } = createUserTokenResponse;

      if (data?.userToken) {
        updateUserToken(data.userToken);
        this.openGitpod(data.userToken);
      } else {
        createFlashMessage({
          type: 'danger',
          message: FlashMessages.StartProjectErr
        });
      }
    } else {
      this.openGitpod(userToken);
    }
  };

  render() {

Review comment (suggestion):
I really do not like this current implementation, but am fine with it for the initial release. I do not think this should be a `window.open` API. I think this should be more like an `a` element whereby it also shows the link Campers will be taken to when they hover over the button.

At least in all Chromium browsers, hovering over a button shows nothing, but hovering over `<a href="https://freecodecamp.org"></a>` shows `https://freecodecamp.org` in the bottom left-hand corner.

Code after:

    if (!isPartiallyCompleted && !isCompleted) {
      createFlashMessage({
        type: 'danger',
        message: FlashMessages.CompleteProjectFirst
      });
    } else if (showCompletionModal) {
      openCompletionModal();
    }
  };

  openGitpod = (userToken?: string) => {
    const {
      data: {
        challengeNode: {
          challenge: { url }
        }
      }
    } = this.props;

    const repoUrl = `https://github.com/${url}`;
    const coderoadTutorial = encodeURIComponent(
      `https://raw.githubusercontent.com/${url}/main/tutorial.json`
    );
    const gitpodDomain = `https://gitpod.io/?autostart=true#CODEROAD_TUTORIAL_URL=${coderoadTutorial},CODEROAD_DISABLE_RUN_ON_SAVE=true`;
    const tokenEnv = userToken ? `,CODEROAD_WEBHOOK_TOKEN=${userToken}` : '';
    const gitpodUrl = `${gitpodDomain}${tokenEnv}/${repoUrl}`;

    window.open(gitpodUrl, '_blank');
  };

  startCourse = async () => {
    const { isSignedIn, userToken, updateUserToken } = this.props;

    if (!isSignedIn) {
      this.openGitpod();
    } else if (!userToken) {
      const createUserTokenResponse = await postUserToken();
      const { data = { userToken: null } } = createUserTokenResponse;

      if (data?.userToken) {
        updateUserToken(data.userToken);
        this.openGitpod(data.userToken);
      } else {
        createFlashMessage({
          type: 'danger',
          message: FlashMessages.StartProjectErr
        });
      }
    } else {
      this.openGitpod(userToken);