Tasks: add show/hide hidden feature

src/components/Tasks/TaskList.tsx

@@ -105,6 +105,7 @@ interface PropsType {
 
 export default function TaskList(props: PropsType) {
   const [showCompleted, setShowCompleted] = React.useState(false);
+  const [showHidden, setShowHidden] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState('');
   const settings = useSelector((state: StoreState) => state.settings.taskSettings);
   const { filterBy, sortBy } = settings;
@@ -126,10 +127,10 @@ export default function TaskList(props: PropsType) {
         }).search(searchTerm);
         return result.map((x) => x.item);
       } else {
-        return props.entries.filter((x) => showCompleted || !x.finished);
+        return props.entries.filter((x) => (showCompleted || !x.finished) && (showHidden || !x.hidden));
       }
     },
-    [showCompleted, props.entries, searchTerm]
+    [showCompleted, props.entries, searchTerm, showHidden]
   );
 
   let entries;
@@ -173,6 +174,8 @@ export default function TaskList(props: PropsType) {
           setShowCompleted={setShowCompleted}
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
+          showHidden={showHidden}
+          setShowHidden={setShowHidden}
         />
       </Grid>
 

src/components/Tasks/Toolbar.tsx

@@ -47,13 +47,15 @@ interface PropsType {
   defaultCollection: EteSync.CollectionInfo;
   onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
   showCompleted: boolean;
+  showHidden: boolean;
   setShowCompleted: (completed: boolean) => void;
+  setShowHidden: (hidden: boolean) => void;
   searchTerm: string;
   setSearchTerm: (term: string) => void;
 }
 
 export default function Toolbar(props: PropsType) {
-  const { showCompleted, setShowCompleted, searchTerm, setSearchTerm } = props;
+  const { showCompleted, setShowCompleted, searchTerm, setSearchTerm, showHidden, setShowHidden } = props;
 
   const [showSearchField, setShowSearchField] = React.useState(false);
   const [sortAnchorEl, setSortAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -164,6 +166,13 @@ export default function Toolbar(props: PropsType) {
               control={<Switch checked={showCompleted} onChange={(_e, checked) => setShowCompleted(checked)} />}
             />
           </MenuItem>
+          <MenuItem>
+            <FormControlLabel
+              label="Show hidden"
+              labelPlacement="start"
+              control={<Switch checked={showHidden} onChange={(_e, checked) => setShowHidden(checked)} />}
+            />
+          </MenuItem>
         </Menu>
 
       </div>

src/pim-types.ts

@@ -240,6 +240,16 @@ export class TaskType extends EventType {
     return (this.dueDate.isDate) ? dueDate.isBefore(now, 'day') : dueDate.isBefore(now);
   }
 
+  get hidden() {
+    if (!this.startDate) {
+      return false;
+    }
+
+    const startDate = moment(this.startDate.toJSDate());
+    const now = moment();
+    return startDate.isAfter(now);
+  }
+
   public clone() {
     const ret = new TaskType(new ICAL.Component(this.component.toJSON()));
     ret.color = this.color;