Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/settings/certification.tsx (TypeScript)

Code before:
      <h3 className='text-center'>
        {t('certification.title.Legacy Full Stack Certification')}
      </h3>
      <div>
        <p>
          {t('settings.claim-legacy', {
            cert: t('certification.title.Legacy Full Stack Certification')
          })}
        </p>
        <ul>
          <li>{t('certification.title.Responsive Web Design')}</li>
          <li>
            {t('certification.title.JavaScript Algorithms and Data Structures')}
          </li>
          <li>{t('certification.title.Front End Development Libraries')}</li>
          <li>{t('certification.title.Data Visualization')}</li>
          <li>{t('certification.title.Back End Development and APIs')}</li>
          <li>
            {t(
              'certification.title.Legacy Information Security and Quality Assurance'
            )}
          </li>
        </ul>
      </div>

      <div>
        {isFullStackCert ? (
          <Button
            size='small'
            variant='primary'
            block={true}
            href={certLocation}
            id={'button-' + certSlug}
            target='_blank'
          >
            {t('buttons.show-cert')}{' '}
            <span className='sr-only'>
              {t('certification.title.Legacy Full Stack')}
            </span>
          </Button>
        ) : (
          <Button
            size='small'
            variant='primary'
            block={true}
            disabled={!fullStackClaimable}
            id={'button-' + certSlug}
            onClick={handleClaim(certSlug)}
          >
            {t('buttons.claim-cert')}{' '}
            <span className='sr-only'>

Review comment (suggestion):
I'm now changing the logic to:
- If the user has claimed the Full Stack cert:
  - Render a "Show cert" link, without an `onClick`
- If the user hasn't claimed the Full Stack cert:
  - Render a "Claim cert" button with an `onClick`, and disable the button if the Full Stack cert isn't claimable

Code after:
        {t('certification.title.Legacy Full Stack Certification')}
      </h3>
      <div>
        <p>
          {t('settings.claim-legacy', {
            cert: t('certification.title.Legacy Full Stack Certification')
          })}
        </p>
        <ul>
          <li>{t('certification.title.Responsive Web Design')}</li>
          <li>
            {t('certification.title.JavaScript Algorithms and Data Structures')}
          </li>
          <li>{t('certification.title.Front End Development Libraries')}</li>
          <li>{t('certification.title.Data Visualization')}</li>
          <li>{t('certification.title.Back End Development and APIs')}</li>
          <li>
            {t(
              'certification.title.Legacy Information Security and Quality Assurance'
            )}
          </li>
        </ul>
      </div>

      <div>
        {isFullStackCert ? (
          <Button
            size='small'
            variant='primary'
            block={true}
            href={certLocation}
            id={'button-' + certSlug}
            target='_blank'
          >
            {t('buttons.show-cert')}{' '}
            <span className='sr-only'>
              {t('certification.title.Legacy Full Stack')}
            </span>
          </Button>
        ) : (
          <Button
            size='small'
            variant='primary'
            block={true}
            disabled={!fullStackClaimable}
            id={'button-' + certSlug}
            onClick={handleClaim(certSlug)}
          >
            {t('buttons.claim-cert')}{' '}
            <span className='sr-only'>
              {t('certification.title.Legacy Full Stack')}