#316 - Fix draft tab navigation

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## [7.1.2] - 2022-04-11
+
+### 🐞 Fixes
+
+- [#316](https://github.com/estruyf/vscode-front-matter/issues/316): Fix draft tab navigation
+
 ## [7.1.1] - 2022-04-08
 
 ### 🐞 Fixes

src/dashboardWebView/components/Navigation.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Tab } from '../constants/Tab';
-import { SettingsAtom, TabAtom } from '../state';
+import { SettingsAtom, TabAtom, TabInfoAtom } from '../state';
 
 export interface INavigationProps {
   totalPages: number;
@@ -15,8 +15,9 @@ export const tabs = [
 
 export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPages}: React.PropsWithChildren<INavigationProps>) => {
   const [ crntTab, setCrntTab ] = useRecoilState(TabAtom);
+  const tabInfo = useRecoilValue(TabInfoAtom);
   const settings = useRecoilValue(SettingsAtom);
-
+  
   return (
     <nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
       {
@@ -28,7 +29,7 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPage
               aria-current={tab.id === crntTab ? 'page' : undefined}
               onClick={() => setCrntTab(tab.id)}
             >
-              {tab.name}{(tab.id === crntTab && totalPages) ? ` (${totalPages})` : ''}
+              {tab.name}{(tabInfo && tabInfo[tab.id]) ? ` (${tabInfo[tab.id]})` : ''}
             </button>
           ))
         ) : (
@@ -38,7 +39,7 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPage
               aria-current={tabs[0].id === crntTab ? 'page' : undefined}
               onClick={() => setCrntTab(tabs[0].id)}
             >
-              {tabs[0].name}{(tabs[0].id === crntTab && totalPages) ? ` (${totalPages})` : ''}
+              {tabs[0].name}{(tabInfo && tabInfo[tabs[0].id]) ? ` (${tabInfo[tabs[0].id]})` : ''}
             </button>
 
             {
@@ -49,7 +50,7 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPage
                   aria-current={value === crntTab ? 'page' : undefined}
                   onClick={() => setCrntTab(value)}
                 >
-                  {value}{(value === crntTab && totalPages) ? ` (${totalPages})` : ''}
+                  {value}{(tabInfo && tabInfo[value]) ? ` (${tabInfo[value]})` : ''}
                 </button>
               ))
             }

src/dashboardWebView/hooks/usePages.tsx

@@ -4,7 +4,7 @@ import { Tab } from '../constants/Tab';
 import { Page } from '../models/Page';
 import Fuse from 'fuse.js';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { CategorySelector, FolderSelector, SearchSelector, SettingsSelector, SortingAtom, TabSelector, TagSelector } from '../state';
+import { CategorySelector, FolderSelector, SearchSelector, SettingsSelector, SortingAtom, TabInfoAtom, TabSelector, TagSelector } from '../state';
 import { SortOrder, SortType } from '../../models';
 import { Sorting } from '../../helpers/Sorting';
 import { Messenger } from '@estruyf/vscode/dist/client';
@@ -14,6 +14,7 @@ import { EventData } from '@estruyf/vscode/dist/models';
 export default function usePages(pages: Page[]) {
   const [ pageItems, setPageItems ] = useState<Page[]>([]);
   const [ sorting, setSorting ] = useRecoilState(SortingAtom);
+  const [ tabInfo , setTabInfo ] = useRecoilState(TabInfoAtom);
   const settings = useRecoilValue(SettingsSelector);
   const tab = useRecoilValue(TabSelector);
   const folder = useRecoilValue(FolderSelector);
@@ -27,7 +28,18 @@ export default function usePages(pages: Page[]) {
     // Filter the pages
     let pagesToShow: Page[] = Object.assign([], searchedPages);
 
+    const draftTypes = Object.assign({}, tabInfo);
+    draftTypes[Tab.All] = pagesToShow.length;
+
+    // Filter by draft status
     if (draftField && draftField.type === 'choice') {
+      const draftChoices = settings?.draftField?.choices;
+      for (const choice of (draftChoices || [])) {
+        if (choice) {
+          draftTypes[choice] = pagesToShow.filter(page => page.fmDraft === choice).length;
+        }
+      }
+
       if (tab !== Tab.All) {
         pagesToShow = pagesToShow.filter(page => page.fmDraft === tab);
       } else {
@@ -35,6 +47,10 @@ export default function usePages(pages: Page[]) {
       }
     } else {
       const draftFieldName = draftField?.name || "draft";
+      
+      draftTypes[Tab.Draft] = pagesToShow.filter(page => !!page[draftFieldName]).length;
+      draftTypes[Tab.Published] = pagesToShow.filter(page => !page[draftFieldName]).length;
+
       if (tab === Tab.Published) {
         pagesToShow = searchedPages.filter(page => !page[draftFieldName]);
       } else if (tab === Tab.Draft) {
@@ -44,6 +60,9 @@ export default function usePages(pages: Page[]) {
       }
     }
 
+    // Set the tab information
+    setTabInfo(draftTypes);
+
     // Sort the pages
     let pagesSorted: Page[] = Object.assign([], pagesToShow);
     if (!search) {
@@ -91,7 +110,7 @@ export default function usePages(pages: Page[]) {
     }
 
     setPageItems(pagesSorted);
-  }, [ settings, tab, folder, search, tag, category, sorting ]);
+  }, [ settings, tab, folder, search, tag, category, sorting, tabInfo ]);
 
 
   const searchListener = (message: MessageEvent<EventData<any>>) => {
@@ -124,7 +143,7 @@ export default function usePages(pages: Page[]) {
     } else {
       processPages(searchedPages);
     }
-  }, [ settings?.draftField, pages, sorting, search ]);
+  }, [ settings?.draftField, pages, sorting, search, tab ]);
 
   useEffect(() => {
     Messenger.listen(searchListener);

src/dashboardWebView/state/atom/TabInfoAtom.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const TabInfoAtom = atom<{ [tab: string]: number } | null>({
+  key: 'TabInfoAtom',
+  default: {}
+});

src/dashboardWebView/state/atom/index.ts

@@ -14,6 +14,7 @@ export * from './SelectedMediaFolderAtom';
 export * from './SettingsAtom';
 export * from './SortingAtom';
 export * from './TabAtom';
+export * from './TabInfoAtom';
 export * from './TagAtom';
 export * from './ViewAtom';
 export * from './ViewDataAtom';