import PropTypes from "prop-types";
import Task from "./Task";
export default function TaskList({
loading,
tasks,
onTogglePinTask,
onArchiveTask,
onEditTitle,
onDeleteTask,
}) {
const events = {
onTogglePinTask,
onArchiveTask,
onEditTitle,
onDeleteTask,
};
const LoadingRow = (
Loading cool state
);
if (loading) {
return (
{LoadingRow}
{LoadingRow}
{LoadingRow}
{LoadingRow}
{LoadingRow}
{LoadingRow}
);
}
if (tasks.length === 0) {
return (
You have no tasks
Sit back and relax
);
}
const tasksInOrder = [
...tasks.filter((t) => t.state === "TASK_PINNED"),
...tasks.filter((t) => t.state !== "TASK_PINNED"),
];
return (
{tasksInOrder.map((task) => (
))}
);
}
TaskList.propTypes = {
loading: PropTypes.bool,
tasks: PropTypes.arrayOf(Task.propTypes.task).isRequired,
onTogglePinTask: PropTypes.func.isRequired,
onArchiveTask: PropTypes.func.isRequired,
onEditTitle: PropTypes.func.isRequired,
onDeleteTask: PropTypes.func.isRequired,
};
TaskList.defaultProps = {
loading: false,
};