export function TaskList()

in frontend/src/components/taskSelection/taskList.js [182:334]

• 142 lines of code
• 22 McCabe index (conditional complexity)

export function TaskList({
  project,
  tasks,
  userCanValidate,
  activeFilter,
  selectTask,
  setZoomedTaskId,
  selected,
  userContributions,
  updateActivities,
  textSearch,
  setTextSearch,
}: Object) {
  const [readyTasks, setTasks] = useState([]);
  const [activeTaskModal, setActiveTaskModal] = useState(null);
  const [sortBy, setSortingOption] = useQueryParam('sortBy', StringParam);
  const [statusFilter, setStatusFilter] = useQueryParam('filter', StringParam);

  const orderedTasks = useCallback(
    (criteria) => {
      if (criteria === 'id') return readyTasks.sort(compareTaskId);
      if (criteria === '-date') return readyTasks.sort(compareLastUpdate).reverse();
      // default option is to order by date
      return readyTasks.sort(compareLastUpdate);
    },
    [readyTasks],
  );

  useEffect(() => {
    if (tasks && tasks.features) {
      let newTasks = tasks.features;
      if (statusFilter === 'readyToMap') {
        newTasks = newTasks.filter((task) =>
          ['READY', 'INVALIDATED'].includes(task.properties.taskStatus),
        );
      }
      if (statusFilter === 'readyToValidate') {
        newTasks = newTasks.filter((task) =>
          ['MAPPED', 'BADIMAGERY'].includes(task.properties.taskStatus),
        );
      }
      if (statusFilter === 'unavailable') {
        newTasks = newTasks.filter((task) => task.properties.taskStatus === 'BADIMAGERY');
      }
      if (textSearch) {
        if (Number(textSearch)) {
          newTasks = newTasks.filter(
            (task) =>
              task.properties.taskId === Number(textSearch) ||
              (task.properties.actionBy && task.properties.actionBy.includes(textSearch)),
          );
        } else {
          const usersTaskIds = userContributions
            .filter((user) => user.username.toLowerCase().includes(textSearch.toLowerCase()))
            .map((user) => user.taskIds)
            .flat();
          newTasks = newTasks.filter(
            (task) =>
              usersTaskIds.includes(task.properties.taskId) ||
              (task.properties.actionBy &&
                task.properties.actionBy.toLowerCase().includes(textSearch.toLowerCase())),
          );
        }
      }
      setTasks(newTasks);
    }
  }, [textSearch, statusFilter, tasks, userContributions]);

  function updateSortingOption(data: Object) {
    if (data) {
      setSortingOption(data[0].value);
    }
  }

  const sortingOptions = [
    { label: <FormattedMessage {...messages.sortById} />, value: 'id' },
    { label: <FormattedMessage {...messages.sortByMostRecentlyUpdate} />, value: 'date' },
    { label: <FormattedMessage {...messages.sortByLeastRecentlyUpdate} />, value: '-date' },
  ];

  return (
    <div className="cf">
      <div className="cf">
        <div className="w-40-l w-50-m w-100 dib v-mid pr2 pv1 relative">
          <FormattedMessage {...messages.filterPlaceholder}>
            {(msg) => {
              return (
                <input
                  type="text"
                  placeholder={msg}
                  className="pa2 w-100"
                  value={textSearch || ''}
                  onChange={(e) => setTextSearch(e.target.value)}
                />
              );
            }}
          </FormattedMessage>
          <CloseIcon
            onClick={() => {
              setTextSearch('');
            }}
            className={`absolute w1 h1 top-0 primary pt3 pointer pr3 right-0 ${
              textSearch ? 'dib' : 'dn'
            }`}
          />
        </div>
        <div className="w-60-l w-50-m w-100 dib pv1">
          <Dropdown
            onChange={updateSortingOption}
            value={sortBy || 'date'}
            options={sortingOptions}
            display={sortBy || <FormattedMessage {...messages.sortById} />}
            className="blue-dark bg-white mr1 v-mid pv2 ph2 ba b--grey-light"
          />
        </div>
      </div>
      <TaskFilter
        userCanValidate={userCanValidate}
        statusFilter={statusFilter}
        setStatusFn={setStatusFilter}
      />
      <ReactPlaceholder
        showLoadingAnimation={true}
        rows={6}
        delay={50}
        ready={tasks && tasks.features && tasks.features.length}
      >
        {readyTasks && (
          <PaginatedList
            pageSize={6}
            items={orderedTasks(sortBy)}
            ItemComponent={TaskItem}
            setZoomedTaskId={setZoomedTaskId}
            setActiveTaskModal={setActiveTaskModal}
            selected={selected}
            selectTask={selectTask}
            project={project}
          />
        )}
      </ReactPlaceholder>
      {activeTaskModal && (
        <TaskActivityModal
          project={project}
          tasks={readyTasks}
          taskId={activeTaskModal}
          setActiveTaskModal={setActiveTaskModal}
          updateActivities={updateActivities}
          userCanValidate={userCanValidate}
        />
      )}
    </div>
  );
}