#286 - Refresh button for content page

CHANGELOG.md

@@ -19,6 +19,7 @@
 - [#270](https://github.com/estruyf/vscode-front-matter/issues/270): Only show media files from public folder if `pageBundle` is not enabled on any of the content types
 - [#282](https://github.com/estruyf/vscode-front-matter/issues/282): Insert relative paths for media files located in a page bundle (also sub-folders)
 - [#283](https://github.com/estruyf/vscode-front-matter/issues/283): Added published date sorting options for the content dashboard
+- [#286](https://github.com/estruyf/vscode-front-matter/issues/286): Refresh button added for the content page
 - [#287](https://github.com/estruyf/vscode-front-matter/issues/287): Show folder name on `index.md` files for recently modified files
 
 ### 🐞 Fixes

src/dashboardWebView/DashboardMessage.ts

@@ -13,6 +13,7 @@ export enum DashboardMessage {
   getMedia = 'getMedia',
   copyToClipboard = 'copyToClipboard',
   refreshMedia = 'refreshMedia',
+  refreshPages = 'refreshPages',
   uploadMedia = 'uploadMedia',
   deleteMedia = 'deleteMedia',
   revealMedia = 'revealMedia',

src/dashboardWebView/components/Header/Header.tsx

@@ -81,7 +81,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({header, totalPage
             <div className={`px-4 mt-3 mb-2 flex items-center justify-between`}>
               <Searchbox />
 
-              <div className={`flex items-center space-x-4`}>
+              <div className={`flex items-center justify-end space-x-4 flex-1`}>
                 <Startup settings={settings} />
                 
                 <ChoiceButton 

src/dashboardWebView/components/Header/RefreshPages.tsx

@@ -0,0 +1,36 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { RefreshIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { useRecoilState, useResetRecoilState } from 'recoil';
+import { DashboardMessage } from '../../DashboardMessage';
+import { CategoryAtom, FolderAtom, LoadingAtom, SearchAtom, SortingAtom, TagAtom } from '../../state';
+
+export interface IRefreshPagesProps {}
+
+export const RefreshPages: React.FunctionComponent<IRefreshPagesProps> = (props: React.PropsWithChildren<IRefreshPagesProps>) => {
+  const [, setLoading] = useRecoilState(LoadingAtom);
+  const resetSearch = useResetRecoilState(SearchAtom);
+  const resetSorting = useResetRecoilState(SortingAtom);
+  const resetFolder = useResetRecoilState(FolderAtom);
+  const resetTag = useResetRecoilState(TagAtom);
+  const resetCategory = useResetRecoilState(CategoryAtom);
+  
+  const refresh = () => {
+    setLoading(true);
+    resetSearch();
+    resetSorting();
+    resetFolder();
+    resetTag();
+    resetCategory();
+    Messenger.send(DashboardMessage.refreshPages);
+  }
+  
+  return (
+    <button className={`mr-2 text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`}
+              title="Refresh dashboard"
+              onClick={refresh}>
+      <RefreshIcon className={`h-5 w-5`} />
+      <span className="sr-only">Refresh dashboard</span>
+    </button>
+  );
+};

src/dashboardWebView/components/Header/Searchbox.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useRecoilState } from 'recoil';
 import { useDebounce } from '../../../hooks/useDebounce';
 import { SearchAtom } from '../../state';
+import { RefreshPages } from './RefreshPages';
 
 export interface ISearchboxProps {
   placeholder?: string;
@@ -28,7 +29,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({placeholder
   }, [debounceSearch]);
 
   return (
-    <div className="flex space-x-4  flex-1">
+    <div className="flex space-x-4 flex-1">
       <div className="min-w-0">
         <label htmlFor="search" className="sr-only">Search</label>
         <div className="relative flex justify-center">
@@ -46,6 +47,8 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({placeholder
           />
         </div>
       </div>
+
+      <RefreshPages />
     </div>
   );
 };

src/dashboardWebView/hooks/useMessages.tsx

@@ -3,13 +3,13 @@ import { useRecoilState } from 'recoil';
 import { DashboardCommand } from '../DashboardCommand';
 import { DashboardMessage } from '../DashboardMessage';
 import { Page } from '../models/Page';
-import { DashboardViewAtom, SettingsAtom, ViewDataAtom } from '../state';
+import { DashboardViewAtom, LoadingAtom, SettingsAtom, ViewDataAtom } from '../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
 import { NavigationType } from '../models';
 
 export default function useMessages() {
-  const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useRecoilState(LoadingAtom);
   const [pages, setPages] = useState<Page[]>([]);
   const [settings, setSettings] = useRecoilState(SettingsAtom);
   const [viewData, setViewData] = useRecoilState(ViewDataAtom);

src/listeners/dashboard/PagesListener.ts

@@ -82,6 +82,9 @@ export class PagesListener extends BaseListener {
       case DashboardMessage.createByTemplate:
         await commands.executeCommand(COMMAND_NAME.createByTemplate);
         break;
+      case DashboardMessage.refreshPages:
+        this.getPagesData();
+        break;
     }
   }