Skip to content
Snippets Groups Projects
index.tsx 1.71 KiB
Newer Older
import { useEffect, useState } from 'react';

import { Status, StatusColors } from 'adapters/common';
import { getProjectTasks, Project } from 'adapters/project';
import { Task } from 'adapters/task';

import Filter from 'components/helpers/Filter';
import TaskList from 'components/layout/TaskList';
import LoadingScreen from 'components/ui/LoadingScreen';
import './project-tasks.scss';

interface Props {
    project: Project
}

/**
 * This is a tab of the project details page. It contains the list of all tasks that belong to the
 * project and filtering options for the tasks.
 */
export default function ProjectTasks({ project }: Props) {
    const [filter, setFilter] = useState({ term: '', tags: Object.values(Status) });
    const [allTasks, setAllTasks] = useState<Task[]>([]);
    const [shownTasks, setShownTasks] = useState<Task[]>();
    useEffect(() => {
        getProjectTasks(project.id).then(setAllTasks);
        setShownTasks(allTasks.filter(task => (
            task.name.toLowerCase().includes(filter.term.toLowerCase())
            && filter.tags.includes(task.status)
        )));
    }, [filter, allTasks])

            <Filter
                setFilter={setFilter}
                tags={
                    Object.values(Status).map(status => ({
                        color: StatusColors.get(status.toString()),
                    }))
                }
                filter={filter}
            />
                shownTasks
                    ? <TaskList tasks={shownTasks} addButton />
                    : <LoadingScreen />