From ad6ac59c4fdb9206f47b9fa36699e165f7dada98 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Thu, 16 Jul 2020 15:38:14 +0300
Subject: [PATCH] Task list: support infinitely deep task hierarchies.

Another step towards fixing #124.
---
 src/components/Tasks/TaskList.tsx     | 18 +++++++++++-------
 src/components/Tasks/TaskListItem.tsx |  8 +++-----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Tasks/TaskList.tsx b/src/components/Tasks/TaskList.tsx
index 5511c060..c864551d 100644
--- a/src/components/Tasks/TaskList.tsx
+++ b/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));
-
-  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}>
diff --git a/src/components/Tasks/TaskListItem.tsx b/src/components/Tasks/TaskListItem.tsx
index 084add86..48c8754a 100644
--- a/src/components/Tasks/TaskListItem.tsx
+++ b/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) => (
-        <TaskListItem key={x.uid} entry={x} onClick={onClick} onToggleComplete={onToggleComplete} />
-      ))}
+      nestedItems={nestedItems}
       onClick={() => onClick(task)}
       leftIcon={
         <Checkbox