export function ProjectMenuDialog()

in translate/src/modules/project/components/ProjectMenu.tsx [26:126]
88 lines of code
8 McCabe index (conditional complexity)

export function ProjectMenuDialog({
  parameters,
  onDiscard,
  onNavigate,
}: ProjectMenuProps): React.ReactElement<'div'> {
  // Searching
  const { localizations } = useContext(Locale);
  const [search, setSearch] = useState('');

  const updateProjectList = (e: React.SyntheticEvent<HTMLInputElement>) => {
    setSearch(e.currentTarget.value);
  };

  // Sorting
  const [sortActive, setSortActive] = React.useState<'project' | 'progress'>(
    'project',
  );
  const [sortAsc, setSortAsc] = React.useState(true);

  const sortByProject = () => {
    setSortActive('project');
    setSortAsc(sortActive !== 'project' || !sortAsc);
  };
  const sortByProgress = () => {
    setSortActive('progress');
    setSortAsc(sortActive !== 'progress' || !sortAsc);
  };

  const sort = sortAsc ? 'fas fa-caret-up' : 'fas fa-caret-down';
  const projectClass = sortActive === 'project' ? sort : '';
  const progressClass = sortActive === 'progress' ? sort : '';

  // Discarding menu
  const ref = useRef(null);
  useOnDiscard(ref, onDiscard);

  const search_ = search.toLowerCase();
  const localizationElements = localizations
    .filter((lc) => !search_ || lc.project.name.toLowerCase().includes(search_))
    .sort(sortBy(sortActive, sortAsc));

  return (
    <div ref={ref} className='menu'>
      <div className='search-wrapper'>
        <div className='icon fas fa-search'></div>
        <Localized
          id='project-ProjectMenu--search-placeholder'
          attrs={{ placeholder: true }}
        >
          <input
            type='search'
            autoComplete='off'
            autoFocus
            value={search}
            onChange={updateProjectList}
            placeholder='Filter projects'
          />
        </Localized>
      </div>

      <div className='header'>
        <Localized id='project-ProjectMenu--project'>
          <span className='project' onClick={sortByProject}>
            PROJECT
          </span>
        </Localized>
        <span
          className={'project icon ' + projectClass}
          onClick={sortByProject}
        />
        <Localized id='project-ProjectMenu--progress'>
          <span className='progress' onClick={sortByProgress}>
            PROGRESS
          </span>
        </Localized>
        <span
          className={'progress icon ' + progressClass}
          onClick={sortByProgress}
        />
      </div>

      <ul>
        {localizationElements.length ? (
          localizationElements.map((localization, index) => (
            <ProjectItem
              location={parameters}
              localization={localization}
              navigateToPath={onNavigate}
              key={index}
            />
          ))
        ) : (
          // No projects found
          <Localized id='project-ProjectMenu--no-results'>
            <li className='no-results'>No results</li>
          </Localized>
        )}
      </ul>
    </div>
  );
}