From 60caf743c6ad2e9d196a30613bc0a023be2c3a0b Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 3 Sep 2021 17:46:18 +0200
Subject: [PATCH] #90 #89 - Recoil implementation + Search sorting fix

---
 .vscode/recoil.code-snippets                  |  2 +-
 .vscode/settings.json                         |  6 ++-
 src/pagesView/components/Dashboard.tsx        | 35 +++-----------
 src/pagesView/components/Header/Folders.tsx   | 12 +++--
 src/pagesView/components/Header/Grouping.tsx  | 13 ++---
 src/pagesView/components/Header/Header.tsx    | 48 +++++--------------
 src/pagesView/components/Header/Searchbox.tsx | 11 +++--
 src/pagesView/components/Header/Sorting.tsx   | 20 ++++----
 src/pagesView/components/Item.tsx             |  7 ---
 src/pagesView/components/Menu/MenuButton.tsx  |  7 +--
 src/pagesView/components/Navigation.tsx       | 15 +++---
 src/pagesView/components/Overview.tsx         | 16 +++----
 src/pagesView/hooks/usePages.tsx              | 35 +++++++++-----
 src/pagesView/state/atom/CategoryAtom.ts      |  6 +++
 src/pagesView/state/atom/FolderAtom.ts        |  6 +++
 src/pagesView/state/atom/GroupingAtom.ts      |  7 +++
 src/pagesView/state/atom/SearchAtom.ts        |  6 +++
 src/pagesView/state/atom/SortingAtom.ts       |  7 +++
 src/pagesView/state/atom/TabAtom.ts           |  7 +++
 src/pagesView/state/atom/TagAtom.ts           |  6 +++
 src/pagesView/state/atom/index.ts             |  7 +++
 .../state/selectors/CategorySelector.ts       |  9 ++++
 .../state/selectors/FolderSelector.ts         |  9 ++++
 .../state/selectors/GroupingSelector.ts       |  9 ++++
 .../state/selectors/SearchSelector.ts         |  9 ++++
 .../state/selectors/SortingSelector.ts        |  9 ++++
 src/pagesView/state/selectors/TabSelector.ts  |  9 ++++
 src/pagesView/state/selectors/TagSelector.ts  |  9 ++++
 src/pagesView/state/selectors/index.ts        |  7 +++
 29 files changed, 219 insertions(+), 130 deletions(-)
 create mode 100644 src/pagesView/state/atom/CategoryAtom.ts
 create mode 100644 src/pagesView/state/atom/FolderAtom.ts
 create mode 100644 src/pagesView/state/atom/GroupingAtom.ts
 create mode 100644 src/pagesView/state/atom/SearchAtom.ts
 create mode 100644 src/pagesView/state/atom/SortingAtom.ts
 create mode 100644 src/pagesView/state/atom/TabAtom.ts
 create mode 100644 src/pagesView/state/atom/TagAtom.ts
 create mode 100644 src/pagesView/state/selectors/CategorySelector.ts
 create mode 100644 src/pagesView/state/selectors/FolderSelector.ts
 create mode 100644 src/pagesView/state/selectors/GroupingSelector.ts
 create mode 100644 src/pagesView/state/selectors/SearchSelector.ts
 create mode 100644 src/pagesView/state/selectors/SortingSelector.ts
 create mode 100644 src/pagesView/state/selectors/TabSelector.ts
 create mode 100644 src/pagesView/state/selectors/TagSelector.ts

diff --git a/.vscode/recoil.code-snippets b/.vscode/recoil.code-snippets
index e041ee3e..67b91bff 100644
--- a/.vscode/recoil.code-snippets
+++ b/.vscode/recoil.code-snippets
@@ -20,7 +20,7 @@
       "export const ${1:CollectionData}Selector = selector({",
       "  key: '${1:CollectionData}Selector',",
       "  get: ({get}) => {",
-      "    return get(${2:CollectionIdState});",
+      "    return get(${1:CollectionData}Atom);",
       "  }",
       "});"
     ],
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7cef107f..0cea6771 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,5 +19,9 @@
         }
     ],
     "eliostruyf.writingstyleguide.terms.isDisabled": true,
-    "eliostruyf.writingstyleguide.biasFree.isDisabled": true
+    "eliostruyf.writingstyleguide.biasFree.isDisabled": true,
+    "exportall.config.folderListener": [
+        "/src/pagesView/state/atom",
+        "/src/pagesView/state/selectors"
+    ]
 }
\ No newline at end of file
diff --git a/src/pagesView/components/Dashboard.tsx b/src/pagesView/components/Dashboard.tsx
index f679dc56..ff00256e 100644
--- a/src/pagesView/components/Dashboard.tsx
+++ b/src/pagesView/components/Dashboard.tsx
@@ -3,13 +3,10 @@ import { Spinner } from './Spinner';
 import useMessages from '../hooks/useMessages';
 import { Overview } from './Overview';
 import { Header } from './Header';
-import { Tab } from '../constants/Tab';
-import { SortOption } from '../constants/SortOption';
 import useDarkMode from '../../hooks/useDarkMode';
 import usePages from '../hooks/usePages';
 import { SponsorMsg } from './SponsorMsg';
 import { WelcomeScreen } from './WelcomeScreen';
-import { GroupOption } from '../constants/GroupOption';
 
 export interface IDashboardProps {
   showWelcome: boolean;
@@ -17,14 +14,7 @@ export interface IDashboardProps {
 
 export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome}: React.PropsWithChildren<IDashboardProps>) => {
   const { loading, pages, settings } = useMessages();
-  const [ tab, setTab ] = React.useState(Tab.All);
-  const [ sorting, setSorting ] = React.useState(SortOption.LastModified);
-  const [ folder, setFolder ] = React.useState<string | null>(null);
-  const [ search, setSearch ] = React.useState<string | null>(null);
-  const [ tag, setTag ] = React.useState<string | null>(null);
-  const [ category, setCategory ] = React.useState<string | null>(null);
-  const [ group, setGroup ] = React.useState<GroupOption>(GroupOption.none);
-  const { pageItems } = usePages(pages, tab, sorting, folder, search, tag, category);
+  const { pageItems } = usePages(pages);
   useDarkMode();
 
   const pageFolders = [...new Set(pages.map(page => page.fmFolder))];
@@ -44,26 +34,13 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome
   return (
     <main className={`h-full w-full`}>
       <div className="flex flex-col h-full overflow-auto">
-        <Header currentTab={tab}
-                currentSorting={sorting}
-                folders={pageFolders}
-                crntFolder={folder}
-                totalPages={pageItems.length}
-                crntTag={tag}
-                crntCategory={category}
-                crntGroup={group}
-                switchTab={(tabId: Tab) => setTab(tabId)}
-                switchSorting={(sortId: SortOption) => setSorting(sortId)}
-                switchFolder={(folderName: string | null) => setFolder(folderName)}
-                switchTag={(tagId: string | null) => setTag(tagId)}
-                switchCategory={(categoryId: string | null) => setCategory(categoryId)}
-                switchGroup={(groupId: GroupOption) => setGroup(groupId)}
-                onSearch={(value: string | null) => setSearch(value)}
-                settings={settings}
-                 />
+        <Header 
+          folders={pageFolders}
+          totalPages={pageItems.length}
+          settings={settings} />
 
         <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
-          { loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} grouping={group} /> }
+          { loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} /> }
         </div>
 
         <SponsorMsg />
diff --git a/src/pagesView/components/Header/Folders.tsx b/src/pagesView/components/Header/Folders.tsx
index 05d25f97..27440ad2 100644
--- a/src/pagesView/components/Header/Folders.tsx
+++ b/src/pagesView/components/Header/Folders.tsx
@@ -1,16 +1,18 @@
 import { Menu, Transition } from '@headlessui/react';
 import * as React from 'react';
+import { useRecoilState } from 'recoil';
+import { FolderAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
 export interface IFoldersProps {
   folders: string[];
-  crntFolder: string | null;
-  switchFolder: (group: string | null) => void;
 }
 
 const DEFAULT_TYPE = "All types";
 
-export const Folders: React.FunctionComponent<IFoldersProps> = ({folders, crntFolder, switchFolder}: React.PropsWithChildren<IFoldersProps>) => {
+export const Folders: React.FunctionComponent<IFoldersProps> = ({folders}: React.PropsWithChildren<IFoldersProps>) => {
+  const [ crntFolder, setCrntFolder ] = useRecoilState(FolderAtom);
+
   if (folders.length <= 1) {
     return null;
   }
@@ -25,7 +27,7 @@ export const Folders: React.FunctionComponent<IFoldersProps> = ({folders, crntFo
             title={DEFAULT_TYPE}
             value={null}
             isCurrent={!crntFolder}
-            onClick={switchFolder} />
+            onClick={(value) => setCrntFolder(value)} />
 
           {folders.map((option) => (
             <MenuItem 
@@ -33,7 +35,7 @@ export const Folders: React.FunctionComponent<IFoldersProps> = ({folders, crntFo
               title={option}
               value={option}
               isCurrent={option === crntFolder}
-              onClick={switchFolder} />
+              onClick={(value) => setCrntFolder(value)} />
           ))}
         </MenuItems>
       </Menu>
diff --git a/src/pagesView/components/Header/Grouping.tsx b/src/pagesView/components/Header/Grouping.tsx
index aae455f6..fe5c24ad 100644
--- a/src/pagesView/components/Header/Grouping.tsx
+++ b/src/pagesView/components/Header/Grouping.tsx
@@ -1,12 +1,11 @@
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
+import { useRecoilState } from 'recoil';
 import { GroupOption } from '../../constants/GroupOption';
+import { GroupingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
-export interface IGroupingProps {
-  group: GroupOption;
-  switchGroup: (group: GroupOption) => void;
-}
+export interface IGroupingProps {}
 
 export const groupOptions = [
   { name: "None", id: GroupOption.none },
@@ -14,7 +13,9 @@ export const groupOptions = [
   { name: "Draft/Published", id: GroupOption.Draft },
 ];
 
-export const Grouping: React.FunctionComponent<IGroupingProps> = ({group, switchGroup}: React.PropsWithChildren<IGroupingProps>) => {
+export const Grouping: React.FunctionComponent<IGroupingProps> = ({}: React.PropsWithChildren<IGroupingProps>) => {
+  const [ group, setGroup ] = useRecoilState(GroupingAtom);
+
   const crntGroup = groupOptions.find(x => x.id === group);
 
   return (
@@ -29,7 +30,7 @@ export const Grouping: React.FunctionComponent<IGroupingProps> = ({group, switch
               title={option.name}
               value={option.id}
               isCurrent={option.id === crntGroup?.id}
-              onClick={switchGroup} />
+              onClick={(value) => setGroup(value)} />
           ))}
         </MenuItems>
       </Menu>
diff --git a/src/pagesView/components/Header/Header.tsx b/src/pagesView/components/Header/Header.tsx
index ec0f7290..248b2b46 100644
--- a/src/pagesView/components/Header/Header.tsx
+++ b/src/pagesView/components/Header/Header.tsx
@@ -4,51 +4,29 @@ import { Searchbox } from './Searchbox';
 import { Filter } from './Filter';
 import { Folders } from './Folders';
 import { Settings } from '../../models';
-import { Tab } from '../../constants/Tab';
-import { SortOption } from '../../constants/SortOption';
 import { MessageHelper } from '../../../helpers/MessageHelper';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Startup } from '../Startup';
 import { Button } from '../Button';
 import { Navigation } from '../Navigation';
 import { Grouping } from '.';
-import { GroupOption } from '../../constants/GroupOption';
 import { ViewSwitch } from './ViewSwitch';
+import { useRecoilState } from 'recoil';
+import { CategoryAtom, TagAtom } from '../../state';
 
 export interface IHeaderProps {
   settings: Settings;
   
   // Navigation
-  currentTab: Tab;
   totalPages: number;
-  switchTab: (tabId: Tab) => void;
 
-  // Sorting
-  currentSorting: SortOption;
-  switchSorting: (sortId: SortOption) => void;
-
-  // Grouping
+  // Page folders
   folders: string[];
-  crntFolder: string | null;
-  switchFolder: (folderName: string | null) => void;
-
-  // Searching
-  onSearch: (value: string | null) => void;
-
-  // Tags
-  crntTag: string | null;
-  switchTag: (tag: string | null) => void;
-
-  // Categories
-  crntCategory: string | null;
-  switchCategory: (category: string | null) => void;
-
-  // Grouping
-  crntGroup: GroupOption;
-  switchGroup: (groupId: GroupOption) => void;
 }
 
-export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, currentSorting, switchSorting, switchTab, totalPages, crntFolder, folders, switchFolder, onSearch, settings, switchTag, crntTag, switchCategory, crntCategory, crntGroup, switchGroup}: React.PropsWithChildren<IHeaderProps>) => {
+export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folders, settings }: React.PropsWithChildren<IHeaderProps>) => {
+  const [ crntTag, setCrntTag ] = useRecoilState(TagAtom);
+  const [ crntCategory, setCrntCategory ] = useRecoilState(CategoryAtom);
 
   const createContent = () => {
     MessageHelper.sendMessage(DashboardMessage.createContent);
@@ -57,7 +35,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, curre
   return (
     <div className={`w-full max-w-7xl mx-auto sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
       <div className={`px-4 my-2 flex items-center justify-between`}>
-        <Searchbox onSearch={onSearch} />
+        <Searchbox />
 
         <div className={`flex items-center space-x-4`}>
           <Startup settings={settings} />
@@ -68,19 +46,19 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, curre
 
       <div className="px-4 flex flex-col lg:flex-row items-center border-b border-gray-200 dark:border-whisper-600">
         <div className={`w-full lg:w-auto`}>
-          <Navigation currentTab={currentTab} totalPages={totalPages} switchTab={switchTab} />
+          <Navigation totalPages={totalPages} />
         </div>
 
         <div className={`my-4 lg:my-0 w-full flex items-center justify-end space-x-4 lg:space-x-6 xl:space-x-8 order-first lg:order-last`}>
-          <Folders crntFolder={crntFolder} folders={folders} switchFolder={switchFolder} />
+          <Folders folders={folders} />
 
-          <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={switchTag} />
+          <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
 
-          <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={switchCategory} />
+          <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
 
-          <Grouping group={crntGroup} switchGroup={switchGroup} />
+          <Grouping />
 
-          <Sorting currentSorting={currentSorting} switchSorting={switchSorting} />
+          <Sorting />
 
           <ViewSwitch />
         </div>
diff --git a/src/pagesView/components/Header/Searchbox.tsx b/src/pagesView/components/Header/Searchbox.tsx
index defad8b2..d52d9af4 100644
--- a/src/pagesView/components/Header/Searchbox.tsx
+++ b/src/pagesView/components/Header/Searchbox.tsx
@@ -1,13 +1,14 @@
 import { FilterIcon, SearchIcon } from '@heroicons/react/solid';
 import * as React from 'react';
+import { useRecoilState } from 'recoil';
 import { useDebounce } from '../../../hooks/useDebounce';
+import { SearchAtom } from '../../state';
 
-export interface ISearchboxProps {
-  onSearch: (searchText: string) => void;
-}
+export interface ISearchboxProps {}
 
-export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({onSearch}: React.PropsWithChildren<ISearchboxProps>) => {
+export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({}: React.PropsWithChildren<ISearchboxProps>) => {
   const [ value, setValue ] = React.useState('');
+  const [ , setDebounceValue ] = useRecoilState(SearchAtom);
   const debounceSearch = useDebounce<string>(value, 500);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -15,7 +16,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({onSearch}:
   };
 
   React.useEffect(() => {
-    onSearch(debounceSearch);
+    setDebounceValue(debounceSearch);
   }, [debounceSearch]);
 
   return (
diff --git a/src/pagesView/components/Header/Sorting.tsx b/src/pagesView/components/Header/Sorting.tsx
index 000c8e9f..61bb4faa 100644
--- a/src/pagesView/components/Header/Sorting.tsx
+++ b/src/pagesView/components/Header/Sorting.tsx
@@ -1,13 +1,11 @@
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { SortOption } from '../../constants/SortOption';
+import { SearchSelector, SortingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
-export interface ISortingProps {
-  currentSorting: SortOption;
-  
-  switchSorting: (sortId: SortOption) => void;
-}
+export interface ISortingProps {}
 
 export const sortOptions = [
   { name: "Last modified", id: SortOption.LastModified },
@@ -15,14 +13,16 @@ export const sortOptions = [
   { name: "By filename (desc)", id: SortOption.FileNameDesc },
 ];
 
-export const Sorting: React.FunctionComponent<ISortingProps> = ({currentSorting, switchSorting}: React.PropsWithChildren<ISortingProps>) => {
+export const Sorting: React.FunctionComponent<ISortingProps> = ({}: React.PropsWithChildren<ISortingProps>) => {
+  const [ crntSorting, setCrntSorting ] = useRecoilState(SortingAtom);
+  const searchValue = useRecoilValue(SearchSelector);
 
-  const crntSort = sortOptions.find(x => x.id === currentSorting);
+  const crntSort = sortOptions.find(x => x.id === crntSorting);
 
   return (
     <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={`Sort by`} title={crntSort?.name || ""} />
+        <MenuButton label={`Sort by`} title={crntSort?.name || ""} disabled={!!searchValue} />
 
         <MenuItems>
           {sortOptions.map((option) => (
@@ -30,8 +30,8 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({currentSorting,
               key={option.id}
               title={option.name}
               value={option.id}
-              isCurrent={option.id === currentSorting}
-              onClick={switchSorting} />
+              isCurrent={option.id === crntSorting}
+              onClick={(value) => setCrntSorting(value)} />
           ))}
         </MenuItems>
       </Menu>
diff --git a/src/pagesView/components/Item.tsx b/src/pagesView/components/Item.tsx
index b01d5b43..de963df8 100644
--- a/src/pagesView/components/Item.tsx
+++ b/src/pagesView/components/Item.tsx
@@ -12,13 +12,6 @@ export interface IItemProps extends Page {}
 
 export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, preview }: React.PropsWithChildren<IItemProps>) => {
   const view = useRecoilValue(ViewSelector);
-
-  let className = '';
-  if (view === ViewType.Grid) {
-    className = `grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`;
-  } else if (view === ViewType.List) {
-    className = `divide-y divide-vulcan-200`;
-  }
   
   const openFile = () => {
     MessageHelper.sendMessage(DashboardMessage.openFile, fmFilePath);
diff --git a/src/pagesView/components/Menu/MenuButton.tsx b/src/pagesView/components/Menu/MenuButton.tsx
index 69db5da7..adf96521 100644
--- a/src/pagesView/components/Menu/MenuButton.tsx
+++ b/src/pagesView/components/Menu/MenuButton.tsx
@@ -5,13 +5,14 @@ import * as React from 'react';
 export interface IMenuButtonProps {
   label: string;
   title: string;
+  disabled?: boolean;
 }
 
-export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({label, title}: React.PropsWithChildren<IMenuButtonProps>) => {
+export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({label, title, disabled}: React.PropsWithChildren<IMenuButtonProps>) => {
   return (
-    <div>
+    <div className={`${disabled ? 'opacity-50' : ''}`}>
       <span className={`text-gray-500 dark:text-whisper-700 mr-2 font-medium`}>{label}:</span>
-      <Menu.Button className="group inline-flex justify-center text-sm font-medium text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600">
+      <Menu.Button disabled={disabled} className="group inline-flex justify-center text-sm font-medium text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600">
         {title}
         <ChevronDownIcon
           className="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700"
diff --git a/src/pagesView/components/Navigation.tsx b/src/pagesView/components/Navigation.tsx
index 923d91d6..1fcd927d 100644
--- a/src/pagesView/components/Navigation.tsx
+++ b/src/pagesView/components/Navigation.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { useRecoilState } from 'recoil';
 import { Tab } from '../constants/Tab';
+import { TabAtom } from '../state';
 
 export interface INavigationProps {
-  currentTab: Tab;
   totalPages: number;
-  switchTab: (tabId: Tab) => void;
 }
 
 export const tabs = [
@@ -13,18 +13,19 @@ export const tabs = [
   { name: 'In draft', id: Tab.Draft }
 ];
 
-export const Navigation: React.FunctionComponent<INavigationProps> = ({currentTab, totalPages, switchTab}: React.PropsWithChildren<INavigationProps>) => {
+export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPages}: React.PropsWithChildren<INavigationProps>) => {
+  const [ crntTab, setCrntTab ] = useRecoilState(TabAtom);
 
   return (
     <nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
       {tabs.map((tab) => (
         <button
           key={tab.name}
-          className={`${tab.id === currentTab ? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300` : `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
-          aria-current={tab.id === currentTab ? 'page' : undefined}
-          onClick={() => switchTab(tab.id)}
+          className={`${tab.id === crntTab ? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300` : `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
+          aria-current={tab.id === crntTab ? 'page' : undefined}
+          onClick={() => setCrntTab(tab.id)}
         >
-          {tab.name}{(tab.id === currentTab && totalPages) ? ` (${totalPages})` : ''}
+          {tab.name}{(tab.id === crntTab && totalPages) ? ` (${totalPages})` : ''}
         </button>
       ))}
     </nav>
diff --git a/src/pagesView/components/Overview.tsx b/src/pagesView/components/Overview.tsx
index ae68bd08..cdd261fb 100644
--- a/src/pagesView/components/Overview.tsx
+++ b/src/pagesView/components/Overview.tsx
@@ -1,23 +1,23 @@
 import { Disclosure } from '@headlessui/react';
 import { ChevronRightIcon } from '@heroicons/react/solid';
 import * as React from 'react';
+import { useRecoilValue } from 'recoil';
 import { groupBy } from '../../helpers/GroupBy';
 import { FrontMatterIcon } from '../../viewpanel/components/Icons/FrontMatterIcon';
 import { GroupOption } from '../constants/GroupOption';
 import { Page } from '../models/Page';
 import { Settings } from '../models/Settings';
+import { GroupingSelector } from '../state';
 import { Item } from './Item';
 import { List } from './List';
 
 export interface IOverviewProps {
-  pages: Page[];
-  grouping: GroupOption;
-  
+  pages: Page[];  
   settings: Settings;
 }
 
-export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settings, grouping}: React.PropsWithChildren<IOverviewProps>) => {
-  const [ open, setOpen ] = React.useState(true);
+export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settings}: React.PropsWithChildren<IOverviewProps>) => {
+  const grouping = useRecoilValue(GroupingSelector);
 
   if (!pages || !pages.length) {
     return (
@@ -65,7 +65,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settin
                   <Disclosure.Panel>
                     <List>
                       {groupedPages[groupId].map((page: Page) => (
-                        <Item key={page.slug} {...page} />
+                        <Item key={`${page.slug}-${idx}`} {...page} />
                       ))}
                     </List>
                   </Disclosure.Panel>
@@ -80,8 +80,8 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settin
 
   return (
     <List>
-      {pages.map(page => (
-        <Item key={page.slug} {...page} />
+      {pages.map((page, idx) => (
+        <Item key={`${page.slug}-${idx}`} {...page} />
       ))}
     </List>
   );
diff --git a/src/pagesView/hooks/usePages.tsx b/src/pagesView/hooks/usePages.tsx
index 7a40726d..1c13dbe8 100644
--- a/src/pagesView/hooks/usePages.tsx
+++ b/src/pagesView/hooks/usePages.tsx
@@ -3,18 +3,25 @@ import { SortOption } from '../constants/SortOption';
 import { Tab } from '../constants/Tab';
 import { Page } from '../models/Page';
 import Fuse from 'fuse.js';
+import { useRecoilValue } from 'recoil';
+import { CategorySelector, FolderSelector, SearchSelector, SortingSelector, TabSelector, TagSelector } from '../state';
 
 const fuseOptions: Fuse.IFuseOptions<Page> = {
   keys: [
-    "title",
-    "slug",
-    "description",
-    "fmFileName"
+    { name: 'title', weight: 0.8 },
+    { name: 'slug', weight: 0.8 },
+    { name: 'description', weight: 0.5 }
   ]
 };
 
-export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, folder: string | null, search: string | null, tag: string | null, category: string | null) {
+export default function usePages(pages: Page[]) {
   const [ pageItems, setPageItems ] = useState<Page[]>([]);
+  const tab = useRecoilValue(TabSelector);
+  const sorting = useRecoilValue(SortingSelector);
+  const folder = useRecoilValue(FolderSelector);
+  const search = useRecoilValue(SearchSelector);
+  const tag = useRecoilValue(TagSelector);
+  const category = useRecoilValue(CategorySelector);
 
   useEffect(() => {
     // Check if search needs to be performed
@@ -26,7 +33,7 @@ export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, f
     }
 
     // Filter the pages
-    let pagesToShow = searchedPages;
+    let pagesToShow: Page[] = Object.assign([], searchedPages);
     if (tab === Tab.Published) {
       pagesToShow = searchedPages.filter(page => !page.draft);
     } else if (tab === Tab.Draft) {
@@ -36,13 +43,15 @@ export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, f
     }
 
     // Sort the pages
-    let pagesSorted = pagesToShow;
-    if (sorting === SortOption.FileNameAsc) {
-      pagesSorted = pagesToShow.sort((a, b) => a.fmFileName.toLowerCase().localeCompare(b.fmFileName.toLowerCase()));
-    } else if (sorting === SortOption.FileNameDesc) {
-      pagesSorted = pagesToShow.sort((a, b) => b.fmFileName.toLowerCase().localeCompare(a.fmFileName.toLowerCase()));
-    } else {
-      pagesSorted = pagesToShow.sort((a, b) => b.fmModified - a.fmModified);
+    let pagesSorted: Page[] = Object.assign([], pagesToShow);
+    if (!search) {
+      if (sorting === SortOption.FileNameAsc) {
+        pagesSorted = pagesToShow.sort((a, b) => a.fmFileName.toLowerCase().localeCompare(b.fmFileName.toLowerCase()));
+      } else if (sorting === SortOption.FileNameDesc) {
+        pagesSorted = pagesToShow.sort((a, b) => b.fmFileName.toLowerCase().localeCompare(a.fmFileName.toLowerCase()));
+      } else {
+        pagesSorted = pagesToShow.sort((a, b) => b.fmModified - a.fmModified);
+      }
     }
 
     if (folder) {
diff --git a/src/pagesView/state/atom/CategoryAtom.ts b/src/pagesView/state/atom/CategoryAtom.ts
new file mode 100644
index 00000000..122c4ed4
--- /dev/null
+++ b/src/pagesView/state/atom/CategoryAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const CategoryAtom = atom<string | null>({
+  key: 'CategoryAtom',
+  default: ""
+});
\ No newline at end of file
diff --git a/src/pagesView/state/atom/FolderAtom.ts b/src/pagesView/state/atom/FolderAtom.ts
new file mode 100644
index 00000000..5ecdee45
--- /dev/null
+++ b/src/pagesView/state/atom/FolderAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const FolderAtom = atom<string | null>({
+  key: 'FolderAtom',
+  default: null
+});
\ No newline at end of file
diff --git a/src/pagesView/state/atom/GroupingAtom.ts b/src/pagesView/state/atom/GroupingAtom.ts
new file mode 100644
index 00000000..817d00cd
--- /dev/null
+++ b/src/pagesView/state/atom/GroupingAtom.ts
@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { GroupOption } from '../../constants/GroupOption';
+
+export const GroupingAtom = atom<GroupOption>({
+  key: 'GroupingAtom',
+  default: GroupOption.none
+});
\ No newline at end of file
diff --git a/src/pagesView/state/atom/SearchAtom.ts b/src/pagesView/state/atom/SearchAtom.ts
new file mode 100644
index 00000000..c6f9cf56
--- /dev/null
+++ b/src/pagesView/state/atom/SearchAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const SearchAtom = atom<string>({
+  key: 'SearchAtom',
+  default: ""
+});
\ No newline at end of file
diff --git a/src/pagesView/state/atom/SortingAtom.ts b/src/pagesView/state/atom/SortingAtom.ts
new file mode 100644
index 00000000..51dd5aad
--- /dev/null
+++ b/src/pagesView/state/atom/SortingAtom.ts
@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { SortOption } from '../../constants/SortOption';
+
+export const SortingAtom = atom<SortOption>({
+  key: 'SortingAtom',
+  default: SortOption.LastModified
+});
\ No newline at end of file
diff --git a/src/pagesView/state/atom/TabAtom.ts b/src/pagesView/state/atom/TabAtom.ts
new file mode 100644
index 00000000..abb17261
--- /dev/null
+++ b/src/pagesView/state/atom/TabAtom.ts
@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { Tab } from '../../constants/Tab';
+
+export const TabAtom = atom<Tab>({
+  key: 'TabAtom',
+  default: Tab.All
+});
\ No newline at end of file
diff --git a/src/pagesView/state/atom/TagAtom.ts b/src/pagesView/state/atom/TagAtom.ts
new file mode 100644
index 00000000..42849fa8
--- /dev/null
+++ b/src/pagesView/state/atom/TagAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const TagAtom = atom<string | null>({
+  key: 'TagAtom',
+  default: ""
+});
\ No newline at end of file
diff --git a/src/pagesView/state/atom/index.ts b/src/pagesView/state/atom/index.ts
index d9c475b7..fec73e5b 100644
--- a/src/pagesView/state/atom/index.ts
+++ b/src/pagesView/state/atom/index.ts
@@ -1 +1,8 @@
+export * from './CategoryAtom';
+export * from './FolderAtom';
+export * from './GroupingAtom';
+export * from './SearchAtom';
+export * from './SortingAtom';
+export * from './TabAtom';
+export * from './TagAtom';
 export * from './ViewAtom';
diff --git a/src/pagesView/state/selectors/CategorySelector.ts b/src/pagesView/state/selectors/CategorySelector.ts
new file mode 100644
index 00000000..ffc79f2b
--- /dev/null
+++ b/src/pagesView/state/selectors/CategorySelector.ts
@@ -0,0 +1,9 @@
+import { selector } from 'recoil';
+import { CategoryAtom } from '..';
+
+export const CategorySelector = selector({
+  key: 'CategorySelector',
+  get: ({get}) => {
+    return get(CategoryAtom);
+  }
+});
\ No newline at end of file
diff --git a/src/pagesView/state/selectors/FolderSelector.ts b/src/pagesView/state/selectors/FolderSelector.ts
new file mode 100644
index 00000000..9787fcd7
--- /dev/null
+++ b/src/pagesView/state/selectors/FolderSelector.ts
@@ -0,0 +1,9 @@
+import { selector } from 'recoil';
+import { FolderAtom } from '..';
+
+export const FolderSelector = selector({
+  key: 'FolderSelector',
+  get: ({get}) => {
+    return get(FolderAtom);
+  }
+});
\ No newline at end of file
diff --git a/src/pagesView/state/selectors/GroupingSelector.ts b/src/pagesView/state/selectors/GroupingSelector.ts
new file mode 100644
index 00000000..100df880
--- /dev/null
+++ b/src/pagesView/state/selectors/GroupingSelector.ts
@@ -0,0 +1,9 @@
+import { selector } from 'recoil';
+import { GroupingAtom } from '..';
+
+export const GroupingSelector = selector({
+  key: 'GroupingSelector',
+  get: ({get}) => {
+    return get(GroupingAtom);
+  }
+});
\ No newline at end of file
diff --git a/src/pagesView/state/selectors/SearchSelector.ts b/src/pagesView/state/selectors/SearchSelector.ts
new file mode 100644
index 00000000..8a6c9c2d
--- /dev/null
+++ b/src/pagesView/state/selectors/SearchSelector.ts
@@ -0,0 +1,9 @@
+import { selector } from 'recoil';
+import { SearchAtom } from '..';
+
+export const SearchSelector = selector({
+  key: 'SearchSelector',
+  get: ({get}) => {
+    return get(SearchAtom);
+  }
+});
\ No newline at end of file
diff --git a/src/pagesView/state/selectors/SortingSelector.ts b/src/pagesView/state/selectors/SortingSelector.ts
new file mode 100644
index 00000000..5880ecdb
--- /dev/null
+++ b/src/pagesView/state/selectors/SortingSelector.ts
@@ -0,0 +1,9 @@
+import { selector } from 'recoil';
+import { SortingAtom } from '..';
+
+export const SortingSelector = selector({
+  key: 'SortingSelector',
+  get: ({get}) => {
+    return get(SortingAtom);
+  }
+});
\ No newline at end of file
diff --git a/src/pagesView/state/selectors/TabSelector.ts b/src/pagesView/state/selectors/TabSelector.ts
new file mode 100644
index 00000000..7f1dbd02
--- /dev/null
+++ b/src/pagesView/state/selectors/TabSelector.ts
@@ -0,0 +1,9 @@
+import { selector } from 'recoil';
+import { TabAtom } from '..';
+
+export const TabSelector = selector({
+  key: 'TabSelector',
+  get: ({get}) => {
+    return get(TabAtom);
+  }
+});
\ No newline at end of file
diff --git a/src/pagesView/state/selectors/TagSelector.ts b/src/pagesView/state/selectors/TagSelector.ts
new file mode 100644
index 00000000..71808fa4
--- /dev/null
+++ b/src/pagesView/state/selectors/TagSelector.ts
@@ -0,0 +1,9 @@
+import { selector } from 'recoil';
+import { TagAtom } from '..';
+
+export const TagSelector = selector({
+  key: 'TagSelector',
+  get: ({get}) => {
+    return get(TagAtom);
+  }
+});
\ No newline at end of file
diff --git a/src/pagesView/state/selectors/index.ts b/src/pagesView/state/selectors/index.ts
index d68a7566..0dc19f45 100644
--- a/src/pagesView/state/selectors/index.ts
+++ b/src/pagesView/state/selectors/index.ts
@@ -1 +1,8 @@
+export * from './CategorySelector';
+export * from './FolderSelector';
+export * from './GroupingSelector';
+export * from './SearchSelector';
+export * from './SortingSelector';
+export * from './TabSelector';
+export * from './TagSelector';
 export * from './ViewSelector';