Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Flash/index.tsx (TypeScript)

Code before:
import { Alert, CloseButton, type AlertProps } from '@freecodecamp/ui';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { FlashState } from '../../redux/types';
import { removeFlashMessage } from './redux';

import './flash.css';

type FlashProps = {
  flashMessage: FlashState['message'];
  removeFlashMessage: typeof removeFlashMessage;
};

function Flash({ flashMessage, removeFlashMessage }: FlashProps): JSX.Element {
  const { type, message, id, variables = {} } = flashMessage;
  const { t } = useTranslation();

  // The flash type returned from the API is 'error' and needs to be mapped to 'danger'.
  const flashStyle =
    type === 'error' ? 'danger' : (type as AlertProps['variant']);

  function handleClose() {
    removeFlashMessage();
  }

  return (
    <TransitionGroup>
      <CSSTransition key={id} timeout={500}>
        <Alert
          variant={flashStyle}
          className='flash-message'
          data-playwright-test-label='flash-message'
        >
          {t(message, variables)}
          <CloseButton
            onClick={handleClose}
            label={t('buttons.close')}
            className='close'
          />
        </Alert>
      </CSSTransition>
    </TransitionGroup>
  );

Review comment (suggestion):
This need to be investigated, and see if the API is returning `error` and `danger` or just `error`.

 if it's just error, we should update the `Alert` component. 

if it's both, we should update the API and the component

```suggestion
  // The flash type returned from the API is 'error' and needs to be mapped to 'danger'.
  // ToDo: change the returned value to return one of the two, and change the `Alert` accordingly.
```

Code after:
import { Alert, CloseButton, type AlertProps } from '@freecodecamp/ui';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { FlashState } from '../../redux/types';
import { removeFlashMessage } from './redux';

import './flash.css';

type FlashProps = {
  flashMessage: FlashState['message'];
  removeFlashMessage: typeof removeFlashMessage;
};

function Flash({ flashMessage, removeFlashMessage }: FlashProps): JSX.Element {
  const { type, message, id, variables = {} } = flashMessage;
  const { t } = useTranslation();

  // Some APIs are returning 'error' as a flash type, and it needs to be mapped to 'danger'.
  // TODO: Standardize the value of `type`.
  // Tracking issue: https://github.com/freeCodeCamp/freeCodeCamp/issues/50184
  const flashStyle =
    type === 'error' ? 'danger' : (type as AlertProps['variant']);

  function handleClose() {
    removeFlashMessage();
  }

  return (
    <TransitionGroup>
      <CSSTransition key={id} timeout={500}>
        <Alert
          variant={flashStyle}
          className='flash-message'
          data-playwright-test-label='flash-message'
        >
          {t(message, variables)}
          <CloseButton
            onClick={handleClose}
            label={t('buttons.close')}
            className='close'
          />
        </Alert>
      </CSSTransition>