From 8579d2989089942b7be5f9d47a8fa159e8202431 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 16 Mar 2022 09:57:39 +0100
Subject: [PATCH] #286 - Refresh button for content page

---
 CHANGELOG.md                                  |  1 +
 src/dashboardWebView/DashboardMessage.ts      |  1 +
 .../components/Header/Header.tsx              |  2 +-
 .../components/Header/RefreshPages.tsx        | 36 +++++++++++++++++++
 .../components/Header/Searchbox.tsx           |  5 ++-
 src/dashboardWebView/hooks/useMessages.tsx    |  4 +--
 src/listeners/dashboard/PagesListener.ts      |  3 ++
 7 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/dashboardWebView/components/Header/RefreshPages.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb3517fb..2206d6ae 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/dashboardWebView/DashboardMessage.ts b/src/dashboardWebView/DashboardMessage.ts
index 305bbda4..d4796443 100644
--- a/src/dashboardWebView/DashboardMessage.ts
+++ b/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',
diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx
index 07cbe395..e139c360 100644
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/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 
diff --git a/src/dashboardWebView/components/Header/RefreshPages.tsx b/src/dashboardWebView/components/Header/RefreshPages.tsx
new file mode 100644
index 00000000..d7864e1e
--- /dev/null
+++ b/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>
+  );
+};
\ No newline at end of file
diff --git a/src/dashboardWebView/components/Header/Searchbox.tsx b/src/dashboardWebView/components/Header/Searchbox.tsx
index 3e088732..921b09f1 100644
--- a/src/dashboardWebView/components/Header/Searchbox.tsx
+++ b/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>
   );
 };
\ No newline at end of file
diff --git a/src/dashboardWebView/hooks/useMessages.tsx b/src/dashboardWebView/hooks/useMessages.tsx
index 32bbebdb..a5213550 100644
--- a/src/dashboardWebView/hooks/useMessages.tsx
+++ b/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);
diff --git a/src/listeners/dashboard/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts
index 68524c6a..17428b9d 100644
--- a/src/listeners/dashboard/PagesListener.ts
+++ b/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;
     }
   }