From 0b5274887f2dc941331b615b949a20e25e32692b Mon Sep 17 00:00:00 2001
From: Andrew P Maney <amaney@usc.edu>
Date: Sat, 28 Mar 2020 03:38:01 -0700
Subject: [PATCH] Tasks: make overdue secondary text red

Also add some logic to display tasks due today as "Due today"
Tasks: fixes
---
 src/components/Tasks/TaskListItem.tsx |  1 +
 src/pim-types.ts                      | 10 ++++++++++
 src/widgets/List.tsx                  |  4 +++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Tasks/TaskListItem.tsx b/src/components/Tasks/TaskListItem.tsx
index c6f1536..664097e 100644
--- a/src/components/Tasks/TaskListItem.tsx
+++ b/src/components/Tasks/TaskListItem.tsx
@@ -58,6 +58,7 @@ export default React.memo(function TaskListItem(props: PropsType) {
     <ListItem
       primaryText={title}
       secondaryText={task.dueDate && `Due ${moment().to(task.dueDate.toJSDate())}`}
+      secondaryTextColor={task.overdue ? 'error' : 'textSecondary'}
       onClick={() => onClick(task)}
       leftIcon={
         <Checkbox
diff --git a/src/pim-types.ts b/src/pim-types.ts
index a3c3cdf..939f8ac 100644
--- a/src/pim-types.ts
+++ b/src/pim-types.ts
@@ -230,6 +230,16 @@ export class TaskType extends EventType {
     return this.dueDate && moment(this.dueDate.toJSDate()).isSameOrBefore(moment(), 'day');
   }
 
+  get overdue() {
+    if (!this.dueDate) {
+      return false;
+    }
+
+    const dueDate = moment(this.dueDate.toJSDate());
+    const now = moment();
+    return (this.dueDate.isDate) ? dueDate.isBefore(now, 'day') : dueDate.isBefore(now);
+  }
+
   public clone() {
     const ret = new TaskType(new ICAL.Component(this.component.toJSON()));
     ret.color = this.color;
diff --git a/src/widgets/List.tsx b/src/widgets/List.tsx
index d9af26e..f34d407 100644
--- a/src/widgets/List.tsx
+++ b/src/widgets/List.tsx
@@ -46,6 +46,7 @@ interface ListItemPropsType {
   insetChildren?: boolean;
   nestedItems?: React.ReactNode[];
   selected?: boolean;
+  secondaryTextColor?: 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
 }
 
 export const ListItem = React.memo(function ListItem(_props: ListItemPropsType) {
@@ -62,6 +63,7 @@ export const ListItem = React.memo(function ListItem(_props: ListItemPropsType)
     insetChildren,
     nestedItems,
     selected,
+    secondaryTextColor,
   } = _props;
 
   const extraProps = (onClick || href) ? {
@@ -84,7 +86,7 @@ export const ListItem = React.memo(function ListItem(_props: ListItemPropsType)
             {leftIcon}
           </ListItemIcon>
         )}
-        <ListItemText inset={insetChildren} primary={primaryText} secondary={secondaryText}>
+        <ListItemText inset={insetChildren} primary={primaryText} secondary={secondaryText} secondaryTypographyProps={{ color: secondaryTextColor }}>
           {children}
         </ListItemText>
         {rightIcon && (