TaskList: make it possible to view completed items.

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>
+    </>
   );
 });