import React from 'react';
import PropTypes from 'prop-types';
import { VStack, Skeleton, Flex, Spacer } from '@chakra-ui/react';
import { CheckIcon, StarIcon } from '@chakra-ui/icons';
import { Task } from './Task';
import { EmptyState } from './EmptyState';
const LoadingTask = () => (
);
export function TaskList({
loading,
tasks,
onTogglePinTask,
onArchiveTask,
onEditTitle,
onDeleteTask,
}) {
const events = {
onTogglePinTask,
onArchiveTask,
onEditTitle,
onDeleteTask,
};
if (loading) {
return (
);
}
if (tasks.length === 0) {
return (
);
}
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,
};