function ResourceProgressDialog()

in translate/src/modules/resourceprogress/components/ResourceProgress.tsx [15:107]
91 lines of code
1 McCabe index (conditional complexity)

function ResourceProgressDialog({ percent, stats, onDiscard }: Props) {
  const {
    approved,
    pretranslated,
    warnings,
    errors,
    missing,
    unreviewed,
    total,
  } = stats;

  const ref = React.useRef<HTMLElement>(null);
  useOnDiscard(ref, onDiscard);

  return (
    <aside ref={ref} className='menu'>
      <div className='main'>
        <header>
          <h2>
            <Localized id='resourceprogress-ResourceProgress--all-strings'>
              ALL STRINGS
            </Localized>
            <span className='value'>{asLocaleString(total)}</span>
          </h2>
          <h2 className='small'>
            <Localized id='resourceprogress-ResourceProgress--unreviewed'>
              UNREVIEWED
            </Localized>
            <span className='value'>{asLocaleString(unreviewed)}</span>
          </h2>
        </header>
        <ProgressChart stats={stats} size={220} />
        <span className='percent'>{percent}</span>
      </div>
      <div className='details'>
        <div className='approved'>
          <span className='title'>
            <Localized id='resourceprogress-ResourceProgress--translated'>
              TRANSLATED
            </Localized>
          </span>
          <p className='value' onClick={onDiscard}>
            <Link to={{ status: 'translated' }}>
              {asLocaleString(approved)}
            </Link>
          </p>
        </div>
        <div className='pretranslated'>
          <span className='title'>
            <Localized id='resourceprogress-ResourceProgress--pretranslated'>
              PRETRANSLATED
            </Localized>
          </span>
          <p className='value' onClick={onDiscard}>
            <Link to={{ status: 'pretranslated' }}>
              {asLocaleString(pretranslated)}
            </Link>
          </p>
        </div>
        <div className='warnings'>
          <span className='title'>
            <Localized id='resourceprogress-ResourceProgress--warnings'>
              WARNINGS
            </Localized>
          </span>
          <p className='value' onClick={onDiscard}>
            <Link to={{ status: 'warnings' }}>{asLocaleString(warnings)}</Link>
          </p>
        </div>
        <div className='errors'>
          <span className='title'>
            <Localized id='resourceprogress-ResourceProgress--errors'>
              ERRORS
            </Localized>
          </span>
          <p className='value' onClick={onDiscard}>
            <Link to={{ status: 'errors' }}>{asLocaleString(errors)}</Link>
          </p>
        </div>
        <div className='missing'>
          <span className='title'>
            <Localized id='resourceprogress-ResourceProgress--missing'>
              MISSING
            </Localized>
          </span>
          <p className='value' onClick={onDiscard}>
            <Link to={{ status: 'missing' }}>{asLocaleString(missing)}</Link>
          </p>
        </div>
      </div>
    </aside>
  );
}