Merge pull request #318 from estruyf/dev

estruyf · Apr 11, 2022 · a5fbf69 · a5fbf69
2 parents 6d6d866 + a5f8017
commit a5fbf69
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 52 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/README.beta.md b/README.beta.md
@@ -166,27 +166,7 @@ You can open showcase issues for the following things:
 ## 🖤 Backers & Sponsors 👇 🤘
 
 <p align="center">
-  <a href="https://github.com/jmatthewpryor" title="Andre Powell">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/850570" />
-  </a>
-  <a href="https://github.com/apowell656" title="Andre Powell">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1969515" />
-  </a>
-  <a href="https://github.com/timschps" title="Tim Schaeps">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
-  </a>
-  <a href="https://github.com/grahampcharles" title="Graham Charles">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/3606679?v=4" />
-  </a>
-  <a href="https://github.com/zivbk1" title="Bryan Klein">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/6154767" />
-  </a>
-  <a href="https://github.com/flikteoh" title="FlikTeoh">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
-  </a>
-  <a href="https://github.com/themefisher" title="FlikTeoh">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/10640964" />
-  </a>
+  <img src="https://frontmatter.codes/api/img-sponsors" />
 </p>
 
 <br />

diff --git a/README.md b/README.md
@@ -164,27 +164,7 @@ You can open showcase issues for the following things:
 ## 🖤 Backers & Sponsors 👇 🤘
 
 <p align="center">
-  <a href="https://github.com/jmatthewpryor" title="Andre Powell">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/850570" />
-  </a>
-  <a href="https://github.com/apowell656" title="Andre Powell">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1969515" />
-  </a>
-  <a href="https://github.com/timschps" title="Tim Schaeps">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
-  </a>
-  <a href="https://github.com/grahampcharles" title="Graham Charles">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/3606679?v=4" />
-  </a>
-  <a href="https://github.com/zivbk1" title="Bryan Klein">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/6154767" />
-  </a>
-  <a href="https://github.com/flikteoh" title="FlikTeoh">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
-  </a>
-  <a href="https://github.com/themefisher" title="FlikTeoh">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/10640964" />
-  </a>
+  <img src="https://frontmatter.codes/api/img-sponsors" />
 </p>
 
 <br />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "displayName": "Front Matter",
   "description": "Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "7.1.1",
+  "version": "7.1.2",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {

diff --git a/src/dashboardWebView/components/Navigation.tsx b/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>
               ))
             }

diff --git a/src/dashboardWebView/hooks/usePages.tsx b/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,14 +28,29 @@ 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 {
         pagesToShow = searchedPages;
       }
     } 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);

diff --git a/src/dashboardWebView/state/atom/TabInfoAtom.ts b/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: {}
+});
diff --git a/src/dashboardWebView/state/atom/index.ts b/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';