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

Code before:
      </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')}
            </span>

Review comment (suggestion):
Previously, the rendering logic is:
- If the Full Stack cert is claimable (meaning the user has completed 6 other certs)
  - If the user has claimed the cert, render a "Show cert" link
  - If the user has not claimed the cert, render a "Claim cert" link
  - Both links have an `onClick`. And If the link is "Claim cert", `onClick` will execute some additional logic for the action
- If the Full Stack cert is not claimable (meaning the user has not completed 6 other certs), render a "Claim cert" button and disable it


Code after:
      <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')}
            </span>
          </Button>