Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/donation-modal.tsx (TypeScript)

Code before:
    return <b>{t(`donate.progress-modal-cta-${ctaNumber}`)}</b>;

  const donationDuration = modalDefaultDonation.donationDuration;
  switch (donationDuration) {
    case 'one-time':
      return <b>{t('donate.duration')}</b>;
    case 'month':
      return <b>{t('donate.duration-2')}</b>;
    default:
      return <b>{t('donate.duration-4')}</b>;
  }
};

const RenderIlustration = ({
  recentlyClaimedBlock
}: {
  recentlyClaimedBlock: RecentlyClaimedBlock;
}) => {
  const showModalBears = useFeature('show-modal-bears').on;
  if (showModalBears) {
    if (recentlyClaimedBlock !== null)
      return <BearBlockCompletion className='donation-icon' />;
    else return <BearProgressModal className='donation-icon' />;
  } else if (recentlyClaimedBlock !== null) {
    return <Cup className='donation-icon' />;
  } else {
    return <Heart className='donation-icon' />;
  }
};

function getctaNumberBetween1To10() {
  const min = 1;
  const max = 10;
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function DonateModal({
  show,
  closeDonationModal,
  executeGA,
  location,
  recentlyClaimedBlock
}: DonateModalProps): JSX.Element {
  const [closeLabel, setCloseLabel] = useState(false);
  const [ctaNumber, setCtaNumber] = useState(0);
  const [isDisabled, setIsDisabled] = useState(true);
  const [showSkipButton, setShowSkipButton] = useState(false);
  const loadElementsIdividually = useFeature('load_elements_individually').on;
  const { t } = useTranslation();
  const handleProcessing = () => {
    setCloseLabel(true);

Review comment (suggestion):
I know I'm guilty of worse (and it's a little out of scope), but the inconsistency in the brackets makes this hard to read.

How about:
```jsx
  if (showModalBears) {
    return recentlyClaimedBlock ? (
      <BearBlockCompletion className='donation-icon' />
    ) : (
      <BearProgressModal className='donation-icon' />
    );
  } else {
    return recentlyClaimedBlock ? (
      <Cup className='donation-icon' />
    ) : (
      <Heart className='donation-icon' />
    );
  }
```

Since it's either truthy or `null` the explicit `null` checking isn't necessary.

Code after:
    return <b>{t(`donate.progress-modal-cta-${ctaNumber}`)}</b>;

  const donationDuration = modalDefaultDonation.donationDuration;
  switch (donationDuration) {
    case 'one-time':
      return <b>{t('donate.duration')}</b>;
    case 'month':
      return <b>{t('donate.duration-2')}</b>;
    default:
      return <b>{t('donate.duration-4')}</b>;
  }
};

const RenderIlustration = ({
  recentlyClaimedBlock
}: {
  recentlyClaimedBlock: RecentlyClaimedBlock;
}) => {
  const showModalBears = useFeature('show-modal-bears').on;
  if (showModalBears) {
    return recentlyClaimedBlock ? (
      <BearBlockCompletion className='donation-icon' />
    ) : (
      <BearProgressModal className='donation-icon' />
    );
  } else {
    return recentlyClaimedBlock ? (
      <Cup className='donation-icon' />
    ) : (
      <Heart className='donation-icon' />
    );
  }
};

function getctaNumberBetween1To10() {
  const min = 1;
  const max = 10;
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function DonateModal({
  show,
  closeDonationModal,
  executeGA,
  location,
  recentlyClaimedBlock
}: DonateModalProps): JSX.Element {
  const [closeLabel, setCloseLabel] = useState(false);
  const [ctaNumber, setCtaNumber] = useState(0);
  const [isDisabled, setIsDisabled] = useState(true);
  const [showSkipButton, setShowSkipButton] = useState(false);