Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/classic/lower-jaw.tsx (TypeScript)

Code before:
        submitButtonRef.current?.focus();
        setFocusManagementCompleted(true);
      }, 500);
    }
  }, [challengeIsCompleted]);

  // ToDo: turn it into a grid to remove the need for useEffect.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => {
    if (testFeedbackRef.current) {
      setTestFeedbackHeight(testFeedbackRef.current.clientHeight);
    }
    // Every render could change the shape of the jaw, so this effect will let
    // monaco know it might need to resize
    updateContainer();
  });

  const isAttemptsLargerThanTest =
    currentAttempts &&
    testsLength &&
    (currentAttempts >= testsLength || currentAttempts >= 3);

  const showDesktopButton = window.innerWidth > MAX_MOBILE_WIDTH;
  const isMacOS = navigator.userAgent.toUpperCase().search('MAC') === 1;

  const getBtnCheckCodeLabel = () =>
    isMacOS ? 'buttons.check-code-3' : 'buttons.check-code';

  const checkButtonText = showDesktopButton
    ? t(getBtnCheckCodeLabel())
    : t('buttons.check-code-2');

  const showSignInButton = !isSignedIn && challengeIsCompleted;
  return (
    <div className='action-row-container'>
      {showSignInButton && (
        <a
          data-cy='sign-in-button'
          href={`${apiLocation}/signin`}
          className='btn-cta btn btn-block'
          onClick={() => {
            callGA({
              event: 'sign_in'
            });
          }}
        >
          {t('learn.sign-in-save')}
        </a>
      )}
      <button
        data-playwright-test-label='lowerJaw-submit-button'

Review comment (suggestion):
We should merge the logic for button label into one, so that it covers both the `showDesktopButton` and the `isMacOS` logic.

Code after:
        submitButtonRef.current?.focus();
        setFocusManagementCompleted(true);
      }, 500);
    }
  }, [challengeIsCompleted]);

  // ToDo: turn it into a grid to remove the need for useEffect.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => {
    if (testFeedbackRef.current) {
      setTestFeedbackHeight(testFeedbackRef.current.clientHeight);
    }
    // Every render could change the shape of the jaw, so this effect will let
    // monaco know it might need to resize
    updateContainer();
  });

  const isAttemptsLargerThanTest =
    currentAttempts &&
    testsLength &&
    (currentAttempts >= testsLength || currentAttempts >= 3);

  const isDesktop = window.innerWidth > MAX_MOBILE_WIDTH;
  const isMacOS = navigator.userAgent.includes('Mac OS');

  const checkButtonText = isDesktop
    ? isMacOS
      ? t('buttons.check-code-3')
      : t('buttons.check-code')
    : t('buttons.check-code-2');

  const showSignInButton = !isSignedIn && challengeIsCompleted;
  return (
    <div className='action-row-container'>
      {showSignInButton && (
        <a
          data-cy='sign-in-button'
          href={`${apiLocation}/signin`}
          className='btn-cta btn btn-block'
          onClick={() => {
            callGA({
              event: 'sign_in'
            });
          }}
        >
          {t('learn.sign-in-save')}
        </a>
      )}
      <button
        data-playwright-test-label='lowerJaw-submit-button'
        className='btn-block btn'