Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/exam-download/exam-token-controls.tsx (TypeScript)

Code before:

  const [copySuccess, setCopySuccess] = useState<string | null>(null);
  const [copyError, setCopyError] = useState<string | null>(null);

  const [generateToken, generateMutation] =
    examEnvironmentAuthorizationTokenApi.usePostGenerateExamEnvironmentAuthorizationTokenMutation();

  const getTokenQuery =
    examEnvironmentAuthorizationTokenApi.useGetExamEnvironmentAuthorizationTokenQuery();
  const [token, setToken] = useState<string | null>(
    getTokenQuery.data?.examEnvironmentAuthorizationToken ?? null
  );

  useEffect(() => {
    const data = generateMutation.data;
    if (!data) return;

    setToken(data.examEnvironmentAuthorizationToken);
  }, [generateMutation.data]);

  useEffect(() => {
    const data = getTokenQuery.data;
    if (!data) return;

    setToken(data.examEnvironmentAuthorizationToken);
  }, [getTokenQuery.data]);

  function handleCopyExamToken() {
    navigator.clipboard.writeText(token ?? '').then(
      () => {
        setCopySuccess(t('exam-token.copied'));
        setCopyError(null);
      },
      () => {
        setCopyError(t('exam-token.copy-error'));
        setCopySuccess(null);
      }
    );
  }

  return (
    <>
      <h3>{t('exam-token.exam-token')}</h3>
      <p>{t('exam-token.token-usage')}</p>
      {generateMutation.isError && (
        <p style={{ color: 'var(--danger-color)' }}>{t('exam-token.error')}</p>
      )}
      {generateMutation.isSuccess && (
        <p style={{ color: 'var(--success-color)' }}>
          {t('exam-token.generated')}
        </p>

Review comment (security):
```suggestion
  const existingToken = getTokenQuery.data?.examEnvironmentAuthorizationToken;
  const updatedToken = generateMutation.data?.examEnvironmentAuthorizationToken;
  const token = updatedToken ?? existingToken;
```
This is all we need. The rtk api is keeping track of the state for us, so we can just use it.

Code after:

  const [copySuccess, setCopySuccess] = useState<string | null>(null);
  const [copyError, setCopyError] = useState<string | null>(null);

  const [generateToken, generateMutation] =
    examEnvironmentAuthorizationTokenApi.usePostGenerateExamEnvironmentAuthorizationTokenMutation();

  const getTokenQuery =
    examEnvironmentAuthorizationTokenApi.useGetExamEnvironmentAuthorizationTokenQuery();
  const existingToken = getTokenQuery.data?.examEnvironmentAuthorizationToken;
  const updatedToken = generateMutation.data?.examEnvironmentAuthorizationToken;
  const token = updatedToken ?? existingToken;

  function handleCopyExamToken() {
    navigator.clipboard.writeText(token ?? '').then(
      () => {
        setCopySuccess(t('exam-token.copied'));
        setCopyError(null);
      },
      () => {
        setCopyError(t('exam-token.copy-error'));
        setCopySuccess(null);
      }
    );
  }

  return (
    <>
      <h3>{t('exam-token.exam-token')}</h3>
      <p>{t('exam-token.token-usage')}</p>
      {generateMutation.isError && (
        <p style={{ color: 'var(--danger-color)' }}>{t('exam-token.error')}</p>
      )}
      {generateMutation.isSuccess && (
        <p style={{ color: 'var(--success-color)' }}>
          {t('exam-token.generated')}
        </p>
      )}
      {!!token && generateMutation.isSuccess && (
        <p style={{ color: 'var(--yellow-color)' }}>
          {t('exam-token.invalidation-2')}
        </p>
      )}
      {!!token && !generateMutation.isSuccess && (
        <p style={{ color: 'var(--yellow-color)' }}>
          {t('exam-token.invalidation-1')}
        </p>
      )}
      {getTokenQuery.isError && !token && (
        <p style={{ color: 'var(--highlight-color)' }}>
          {t('exam-token.no-token')}