Task list: support infinitely deep task hierarchies.

Another step towards fixing #124.

src/components/Tasks/TaskList.tsx

@@ -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));
+  function taskListItemFromTask(entry: TaskType) {
-
-  const itemList = sortedEntries.map((entry) => {
     const uid = entry.uid;
 
     return (
       <TaskListItem
         key={uid}
         entry={entry}
-        subEntries={subEntriesMap.get(uid)}
+        nestedItems={subEntriesMap.get(uid)?.map(taskListItemFromTask)}
-        onClick={props.onItemClick}
+        onClick={onItemClick}
-        onToggleComplete={(entry: TaskType, completed: boolean) => handleToggleComplete(entry, completed)}
+        onToggleComplete={handleToggleComplete}
       />
     );
-  });
+  }
+
+  const sortedEntries = entries.sort(getSortFunction(sortBy));
+
+  const itemList = sortedEntries.map(taskListItemFromTask);
 
   return (
     <Grid container spacing={4}>

src/components/Tasks/TaskListItem.tsx

@@ -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) => (
+      nestedItems={nestedItems}
-        <TaskListItem key={x.uid} entry={x} onClick={onClick} onToggleComplete={onToggleComplete} />
-      ))}
       onClick={() => onClick(task)}
       leftIcon={
         <Checkbox