From 583e9090d81c1abbb6ed326086f537d85ca8bc2c Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Tue, 26 Nov 2019 22:47:08 +0200
Subject: [PATCH] TaskList: make it possible to view completed items.

---
 src/components/TaskList.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/TaskList.tsx b/src/components/TaskList.tsx
index ab66133..eb2c0a5 100644
--- a/src/components/TaskList.tsx
+++ b/src/components/TaskList.tsx
@@ -5,6 +5,9 @@ import { createSelector } from 'reselect';
 import { List, ListItem } from '../widgets/List';
 
 import { TaskType } from '../pim-types';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Divider from '@material-ui/core/Divider';
 
 const TaskListItem = React.memo((props: { entry: TaskType, onClick: (entry: TaskType) => void }) => {
   const {
@@ -32,7 +35,8 @@ interface PropsType {
 }
 
 export default React.memo(function TaskList(props: PropsType) {
-  const entries = props.entries.filter((x) => !x.finished);
+  const [showCompleted, setShowCompleted] = React.useState(false);
+  const entries = props.entries.filter((x) => showCompleted || !x.finished);
   const sortedEntries = sortSelector(entries);
 
   const itemList = sortedEntries.map((entry) => {
@@ -48,8 +52,20 @@ export default React.memo(function TaskList(props: PropsType) {
   });
 
   return (
-    <List>
-      {itemList}
-    </List>
+    <>
+      <div style={{ display: 'flex', justifyContent: 'right' }}>
+        <FormControlLabel
+          control={
+            <Checkbox checked={showCompleted} onChange={() => setShowCompleted(!showCompleted)} />
+          }
+          label="Show Completed"
+        />
+      </div>
+
+      <Divider style={{ marginTop: '1em' }} />
+      <List>
+        {itemList}
+      </List>
+    </>
   );
 });