#89 - Clear filters, sorting, and grouping button

src/pagesView/components/Header/ClearFilters.tsx

@@ -0,0 +1,54 @@
+import { XCircleIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { SortingSelector, FolderSelector, TagSelector, CategorySelector, SortingAtom, DEFAULT_SORTING_OPTION, FolderAtom, DEFAULT_FOLDER_STATE, TagAtom, CategoryAtom, DEFAULT_TAG_STATE, DEFAULT_CATEGORY_STATE } from '../../state';
+
+import { DefaultValue } from 'recoil';
+
+export const guardRecoilDefaultValue = (
+  candidate: any
+): candidate is DefaultValue => {
+  if (candidate instanceof DefaultValue) return true;
+  return false;
+};
+
+export interface IClearFiltersProps {}
+
+export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (props: React.PropsWithChildren<IClearFiltersProps>) => {
+  const [ show, setShow ] = React.useState(false);
+
+  const sorting = useRecoilValue(SortingSelector);
+  const folder = useRecoilValue(FolderSelector);
+  const tag = useRecoilValue(TagSelector);
+  const category = useRecoilValue(CategorySelector);
+  
+  const resetSorting = useResetRecoilState(SortingAtom);
+  const resetFolder = useResetRecoilState(FolderAtom);
+  const resetTag = useResetRecoilState(TagAtom);
+  const resetCategory = useResetRecoilState(CategoryAtom);
+
+  const reset = () => {
+    setShow(false);
+    resetSorting();
+    resetFolder();
+    resetTag();
+    resetCategory();
+  };
+
+  React.useEffect(() => {
+    if (sorting !== DEFAULT_SORTING_OPTION || folder !== DEFAULT_FOLDER_STATE || tag !== DEFAULT_TAG_STATE || category !== DEFAULT_CATEGORY_STATE) {
+      setShow(true);
+    } else {
+      setShow(false);
+    }
+  }, [sorting, folder, tag, category]);
+
+  if (!show) return null;
+  
+  return (
+    <button className="flex items-center hover:text-teal-600" onClick={reset} title={`Clear filters, grouping, and sorting`}>
+      <XCircleIcon className={`inline-block w-5 h-5 mr-1`} /><span>Clear</span>
+      <span className={`sr-only`}> filters, grouping, and sorting</span>
+    </button>
+  );
+};

src/pagesView/components/Header/Header.tsx

@@ -4,7 +4,6 @@ import { Searchbox } from './Searchbox';
 import { Filter } from './Filter';
 import { Folders } from './Folders';
 import { Settings } from '../../models';
-import { MessageHelper } from '../../../helpers/MessageHelper';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Startup } from '../Startup';
 import { Button } from '../Button';
@@ -13,6 +12,8 @@ import { Grouping } from '.';
 import { ViewSwitch } from './ViewSwitch';
 import { useRecoilState } from 'recoil';
 import { CategoryAtom, TagAtom } from '../../state';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { ClearFilters } from './ClearFilters';
 
 export interface IHeaderProps {
   settings: Settings;
@@ -29,7 +30,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
   const [ crntCategory, setCrntCategory ] = useRecoilState(CategoryAtom);
 
   const createContent = () => {
-    MessageHelper.sendMessage(DashboardMessage.createContent);
+    Messenger.send(DashboardMessage.createContent);
   };
 
   return (
@@ -55,11 +56,13 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
       </div>
 
       <div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-300`}>
+        <ClearFilters />
+
         <Folders folders={folders} />
 
-        <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
+        <Filter label={`Tag`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
 
-        <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
+        <Filter label={`Category`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
 
         <Grouping />