export function FiltersPanelDialog()

in translate/src/modules/search/components/FiltersPanel.tsx [230:335]
96 lines of code
6 McCabe index (conditional complexity)

export function FiltersPanelDialog({
  authorsData,
  filters: { authors, extras, statuses, tags },
  project,
  resource,
  selectedFiltersCount,
  tagsData,
  timeRange,
  timeRangeData,
  setTimeRange,
  onApplyFilter,
  onApplyFilters,
  onResetFilters,
  onToggleFilter,
  onDiscard,
}: FiltersPanelProps): React.ReactElement<'div'> {
  const stats = useStats();
  const ref = React.useRef(null);
  useOnDiscard(ref, onDiscard);

  return (
    <div className='menu' ref={ref}>
      <ul>
        <Localized id='search-FiltersPanel--heading-status'>
          <li className='horizontal-separator'>TRANSLATION STATUS</li>
        </Localized>

        {FILTERS_STATUS.map((status, i) => (
          <StatusFilter
            key={i}
            onSelect={() => onApplyFilter(status.slug, 'statuses')}
            onToggle={() => onToggleFilter(status.slug, 'statuses')}
            selected={statuses.includes(status.slug)}
            stats={stats}
            status={status}
          />
        ))}

        {tagsData.length > 0 && resource === 'all-resources' ? (
          <>
            <Localized id='search-FiltersPanel--heading-tags'>
              <li className='horizontal-separator'>TAGS</li>
            </Localized>

            {tagsData.map((tag, i) => (
              <TagFilter
                key={i}
                onSelect={() => onApplyFilter(tag.slug, 'tags')}
                selected={tags.includes(tag.slug)}
                tag={tag}
              />
            ))}
          </>
        ) : null}

        <Localized id='search-FiltersPanel--heading-extra'>
          <li className='horizontal-separator'>EXTRA FILTERS</li>
        </Localized>

        {FILTERS_EXTRA.map((extra, i) => (
          <ExtraFilter
            extra={extra}
            key={i}
            onSelect={() => onApplyFilter(extra.slug, 'extras')}
            onToggle={() => onToggleFilter(extra.slug, 'extras')}
            selected={extras.includes(extra.slug)}
          />
        ))}

        <TimeRangeFilter
          project={project}
          timeRange={timeRange}
          timeRangeData={timeRangeData}
          applySingleFilter={onApplyFilter}
          setTimeRange={setTimeRange}
        />

        {authorsData.length > 0 && project !== 'all-projects' ? (
          <>
            <Localized id='search-FiltersPanel--heading-authors'>
              <li className='horizontal-separator'>TRANSLATION AUTHORS</li>
            </Localized>

            {authorsData.map((author, i) => (
              <AuthorFilter
                author={author}
                key={i}
                onSelect={() => onApplyFilter(author.email, 'authors')}
                onToggle={() => onToggleFilter(author.email, 'authors')}
                selected={authors.includes(author.email)}
              />
            ))}
          </>
        ) : null}
      </ul>

      {selectedFiltersCount > 0 ? (
        <FilterToolbar
          count={selectedFiltersCount}
          onApply={onApplyFilters}
          onReset={onResetFilters}
        />
      ) : null}
    </div>
  );
}