Tasks: move "Show Completed" to a toolbar menu

src/components/Tasks/QuickAdd.tsx

@@ -14,13 +14,14 @@ import TextField from '@material-ui/core/TextField';
 import { TaskType, PimType, TaskStatusType } from '../../pim-types';
 
 interface PropsType {
+  style: React.CSSProperties;
   onSubmit: (item: PimType, journalUid: string, originalItem?: PimType) => void;
   defaultCollection: EteSync.CollectionInfo;
 }
 
 function QuickAdd(props: PropsType) {
   const [title, setTitle] = React.useState('');
-  const { onSubmit: save, defaultCollection } = props;
+  const { style, onSubmit: save, defaultCollection } = props;
 
 
   function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
@@ -43,7 +44,7 @@ function QuickAdd(props: PropsType) {
 
 
   return (
-    <form onSubmit={handleSubmit} style={{ flexGrow: 1, marginRight: '25px' }}>
+    <form onSubmit={handleSubmit} style={style}>
       <TextField
         label="Add a new task"
         variant="outlined"

src/components/Tasks/TaskList.tsx

@@ -10,8 +10,6 @@ import * as EteSync from 'etesync';
 import { List } from '../../widgets/List';
 
 import { TaskType, PimType } from '../../pim-types';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
 import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
 import { useTheme } from '@material-ui/core/styles';
@@ -19,8 +17,8 @@ import { useTheme } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
 
 import TaskListItem from './TaskListItem';
-import QuickAdd from './QuickAdd';
 import Sidebar from './Sidebar';
+import Toolbar from './Toolbar';
 
 import { StoreState } from '../../store';
 
@@ -82,16 +80,12 @@ export default function TaskList(props: PropsType) {
       </Grid>
 
       <Grid item xs>
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Toolbar
-          {props.collections && <QuickAdd onSubmit={props.onItemSave} defaultCollection={props.collections[0]} />}
+          defaultCollection={props.collections?.[0]}
-
+          onItemSave={props.onItemSave}
-          <FormControlLabel
+          showCompleted={showCompleted}
-            control={
+          setShowCompleted={setShowCompleted}
-              <Checkbox checked={showCompleted} onChange={() => setShowCompleted(!showCompleted)} />
-            }
-            label="Show Completed"
         />
-        </div>
 
         <Divider style={{ marginTop: '1em' }} />
         <List>

src/components/Tasks/Toolbar.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import * as EteSync from 'etesync';
+
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import QuickAdd from './QuickAdd';
+
+import { PimType } from '../../pim-types';
+
+interface PropsType {
+  defaultCollection: EteSync.CollectionInfo;
+  onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
+  showCompleted: boolean;
+  setShowCompleted: (completed: boolean) => void;
+}
+
+export default function Toolbar(props: PropsType) {
+  const { defaultCollection, onItemSave, showCompleted, setShowCompleted } = props;
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      {defaultCollection && <QuickAdd style={{ flexGrow: 1, marginRight: '0.75em' }} onSubmit={onItemSave} defaultCollection={defaultCollection} />}
+
+      <div>
+        <IconButton
+          aria-label="more"
+          aria-controls="long-menu"
+          aria-haspopup="true"
+          onClick={handleClick}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu
+          id="simple-menu"
+          anchorEl={anchorEl}
+          keepMounted
+          open={!!anchorEl}
+          onClose={handleClose}
+        >
+          <MenuItem>
+            <FormControlLabel
+              label="Show completed"
+              labelPlacement="start"
+              control={<Switch checked={showCompleted} onChange={(_e, checked) => setShowCompleted(checked)} />}
+            />
+          </MenuItem>
+        </Menu>
+
+      </div>
+    </div>
+  );
+}