TaskList: make it possible to view completed items.

master
Tom Hacohen 5 years ago
parent 1eb561342f
commit 583e9090d8

@ -5,6 +5,9 @@ import { createSelector } from 'reselect';
import { List, ListItem } from '../widgets/List'; import { List, ListItem } from '../widgets/List';
import { TaskType } from '../pim-types'; 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 TaskListItem = React.memo((props: { entry: TaskType, onClick: (entry: TaskType) => void }) => {
const { const {
@ -32,7 +35,8 @@ interface PropsType {
} }
export default React.memo(function TaskList(props: 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 sortedEntries = sortSelector(entries);
const itemList = sortedEntries.map((entry) => { const itemList = sortedEntries.map((entry) => {
@ -48,8 +52,20 @@ export default React.memo(function TaskList(props: PropsType) {
}); });
return ( return (
<>
<div style={{ display: 'flex', justifyContent: 'right' }}>
<FormControlLabel
control={
<Checkbox checked={showCompleted} onChange={() => setShowCompleted(!showCompleted)} />
}
label="Show Completed"
/>
</div>
<Divider style={{ marginTop: '1em' }} />
<List> <List>
{itemList} {itemList}
</List> </List>
</>
); );
}); });

Loading…
Cancel
Save