Task list: support infinitely deep task hierarchies.

Another step towards fixing #124.
master
Tom Hacohen 4 years ago
parent 484825b1db
commit ad6ac59c4f

@ -125,6 +125,8 @@ export default function TaskList(props: PropsType) {
const classes = useStyles();
const dispatch = useDispatch();
const { onItemClick } = props;
const handleToggleComplete = (task: TaskType, completed: boolean) => {
const clonedTask = task.clone();
clonedTask.status = completed ? TaskStatusType.Completed : TaskStatusType.NeedsAction;
@ -222,21 +224,23 @@ export default function TaskList(props: PropsType) {
return true;
});
const sortedEntries = entries.sort(getSortFunction(sortBy));
const itemList = sortedEntries.map((entry) => {
function taskListItemFromTask(entry: TaskType) {
const uid = entry.uid;
return (
<TaskListItem
key={uid}
entry={entry}
subEntries={subEntriesMap.get(uid)}
onClick={props.onItemClick}
onToggleComplete={(entry: TaskType, completed: boolean) => handleToggleComplete(entry, completed)}
nestedItems={subEntriesMap.get(uid)?.map(taskListItemFromTask)}
onClick={onItemClick}
onToggleComplete={handleToggleComplete}
/>
);
});
}
const sortedEntries = entries.sort(getSortFunction(sortBy));
const itemList = sortedEntries.map(taskListItemFromTask);
return (
<Grid container spacing={4}>

@ -34,7 +34,7 @@ const TagsList = React.memo((props: { tags: string[] }) => (
interface PropsType {
entry: TaskType;
subEntries?: TaskType[];
nestedItems?: React.ReactNode[];
onClick: (task: TaskType) => void;
onToggleComplete: (task: TaskType, completed: boolean) => void;
}
@ -42,7 +42,7 @@ interface PropsType {
export default React.memo(function TaskListItem(props: PropsType) {
const {
entry: task,
subEntries,
nestedItems,
onClick,
onToggleComplete,
} = props;
@ -57,9 +57,7 @@ export default React.memo(function TaskListItem(props: PropsType) {
primaryText={title}
secondaryText={secondaryText}
secondaryTextColor={task.overdue ? 'error' : 'textSecondary'}
nestedItems={subEntries?.map((x) => (
<TaskListItem key={x.uid} entry={x} onClick={onClick} onToggleComplete={onToggleComplete} />
))}
nestedItems={nestedItems}
onClick={() => onClick(task)}
leftIcon={
<Checkbox

Loading…
Cancel
Save