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 ( - - {itemList} - + <> +
+ setShowCompleted(!showCompleted)} /> + } + label="Show Completed" + /> +
+ + + + {itemList} + + ); });