From c113c8b28380b8a35f3d22680624da95bbe48ce9 Mon Sep 17 00:00:00 2001
From: Andrew P Maney <amaney@usc.edu>
Date: Fri, 13 Mar 2020 17:45:31 -0700
Subject: [PATCH] Tasks: displays tags on Task list items

---
 src/components/Tasks/TaskListItem.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/Tasks/TaskListItem.tsx b/src/components/Tasks/TaskListItem.tsx
index 09c3d10..8611f4a 100644
--- a/src/components/Tasks/TaskListItem.tsx
+++ b/src/components/Tasks/TaskListItem.tsx
@@ -9,6 +9,7 @@ import { ListItem } from '../../widgets/List';
 import Checkbox from '@material-ui/core/Checkbox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import * as colors from '@material-ui/core/colors';
+import Chip from '@material-ui/core/Chip';
 
 import moment from 'moment';
 
@@ -21,6 +22,18 @@ const checkboxColor = {
   [TaskPriorityType.High]: colors.red[600],
 };
 
+const TagsList = React.memo((props: { tags: string[] }) => (
+  <ul>
+    {props.tags.map((tag, i) => tag && <Chip
+      key={i}
+      color="secondary"
+      size="small"
+      label={tag}
+      style={{ marginRight: '10px' }}
+      component="li"
+    />)}
+  </ul>));
+
 interface PropsType {
   entry: TaskType;
   onClick: (task: TaskType) => void;
@@ -54,6 +67,7 @@ export default React.memo(function TaskListItem(props: PropsType) {
           icon={<CheckBoxOutlineBlankIcon style={{ color: checkboxColor[mapPriority(task.priority)] }} />}
         />
       }
+      rightIcon={<TagsList tags={task.tags} />}
     />
   );
 });