vscode helper integration

src/pagesView/components/Header/Filter.tsx

@@ -1,4 +1,5 @@
 import { Menu } from '@headlessui/react';
+import { FilterIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
@@ -20,7 +21,13 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({label, activeItem
   return (
     <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={label} title={activeItem || DEFAULT_VALUE} />
+        <MenuButton 
+          label={(
+            <>
+              <FilterIcon className={`inline-block w-5 h-5 mr-1`} /><span>{label}</span>
+            </>
+          )} 
+          title={activeItem || DEFAULT_VALUE} />
 
         <MenuItems>
           <MenuItem 

src/pagesView/components/Header/ViewSwitch.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { ViewAtom, ViewType, SettingsSelector } from '../../state';
 import { ViewGridIcon, ViewListIcon } from '@heroicons/react/solid';
-import { MessageHelper } from '../../../helpers/MessageHelper';
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 
 export interface IViewSwitchProps {}
@@ -14,7 +14,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (props: Rea
   const toggleView = () => {
     const newView = view === ViewType.Grid ? ViewType.List : ViewType.Grid;
     setView(newView);
-    MessageHelper.sendMessage(DashboardMessage.setPageViewType, newView);
+    Messenger.send(DashboardMessage.setPageViewType, newView);
   };
 
   React.useEffect(() => {

src/pagesView/components/Item.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { MarkdownIcon } from '../../viewpanel/components/Icons/MarkdownIcon';
 import { DashboardMessage } from '../DashboardMessage';
 import { Page } from '../models/Page';
 import { ViewSelector, ViewType } from '../state';
 import { DateField } from './DateField';
 import { Status } from './Status';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export interface IItemProps extends Page {}
 
@@ -14,7 +14,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
   const view = useRecoilValue(ViewSelector);
   
   const openFile = () => {
-    MessageHelper.sendMessage(DashboardMessage.openFile, fmFilePath);
+    Messenger.send(DashboardMessage.openFile, fmFilePath);
   };
 
   if (view === ViewType.Grid) {

src/pagesView/components/Menu/MenuButton.tsx

@@ -3,15 +3,16 @@ import { ChevronDownIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 
 export interface IMenuButtonProps {
-  label: string;
+  label: string | JSX.Element;
   title: string;
   disabled?: boolean;
 }
 
 export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({label, title, disabled}: React.PropsWithChildren<IMenuButtonProps>) => {
   return (
-    <div className={`${disabled ? 'opacity-50' : ''}`}>
+    <div className={`inline-flex items-center ${disabled ? 'opacity-50' : ''}`}>
       <span className={`text-gray-500 dark:text-whisper-700 mr-2 font-medium`}>{label}:</span>
+      
       <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

src/pagesView/components/Startup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SETTINGS_DASHBOARD_OPENONSTART } from '../../constants';
-import { MessageHelper } from '../../helpers/MessageHelper';
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../DashboardMessage';
 import { Settings } from '../models/Settings';
 
@@ -13,7 +13,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({settings}: Reac
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setIsChecked(e.target.checked);
-    MessageHelper.sendMessage(DashboardMessage.updateSetting, { name: SETTINGS_DASHBOARD_OPENONSTART, value: e.target.checked });
+    Messenger.send(DashboardMessage.updateSetting, { name: SETTINGS_DASHBOARD_OPENONSTART, value: e.target.checked });
   };
 
   React.useEffect(() => {

src/pagesView/components/Steps/StepsToGetStarted.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MessageHelper } from '../../../helpers/MessageHelper';
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Settings } from '../../models/Settings';
 import { Status } from '../../models/Status';
@@ -16,7 +16,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
       name: 'Initialize project', 
       description: 'Initialize the project with a template folder and sample markdown file. The template folder can be used to define your own templates. <b>Start by clicking on this action</b>.',
       status: settings.initialized ? Status.Completed : Status.NotStarted,
-      onClick: settings.initialized ? undefined : () => { MessageHelper.sendMessage(DashboardMessage.initializeProject); }  
+      onClick: settings.initialized ? undefined : () => { Messenger.send(DashboardMessage.initializeProject); }  
     },
     {
       name: 'Register content folders (manual action)',
@@ -27,7 +27,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
       name: 'Show the dashboard',
       description: 'Once both actions are completed, click on this action to load the dashboard.',
       status: (settings.initialized && settings.folders && settings.folders.length > 0) ? Status.Active : Status.NotStarted,
-      onClick: (settings.initialized && settings.folders && settings.folders.length > 0) ? () => { MessageHelper.sendMessage(DashboardMessage.reload); } : undefined
+      onClick: (settings.initialized && settings.folders && settings.folders.length > 0) ? () => { Messenger.send(DashboardMessage.reload); } : undefined
     }
   ];
   

src/pagesView/components/WelcomeScreen.tsx

@@ -1,7 +1,7 @@
 import { HeartIcon, StarIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK } from '../../constants/Links';
-import { MessageHelper } from '../../helpers/MessageHelper';
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { FrontMatterIcon } from '../../viewpanel/components/Icons/FrontMatterIcon';
 import { GitHubIcon } from '../../viewpanel/components/Icons/GitHubIcon';
 import { DashboardMessage } from '../DashboardMessage';
@@ -16,7 +16,7 @@ export const WelcomeScreen: React.FunctionComponent<IWelcomeScreenProps> = ({set
 
   React.useEffect(() => {
     return () => {
-      MessageHelper.sendMessage(DashboardMessage.reload)
+      Messenger.send(DashboardMessage.reload)
     };
   }, ['']);
   

src/pagesView/hooks/useMessages.tsx

@@ -1,21 +1,18 @@
 import { useState, useEffect } from 'react';
 import { useRecoilState } from 'recoil';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { DashboardCommand } from '../DashboardCommand';
 import { DashboardMessage } from '../DashboardMessage';
 import { Page } from '../models/Page';
 import { SettingsAtom } from '../state';
-
-const vscode = MessageHelper.getVsCodeAPI();
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { EventData } from '@estruyf/vscode/dist/models';
 
 export default function useMessages() {
   const [loading, setLoading] = useState<boolean>(false);
   const [pages, setPages] = useState<Page[]>([]);
   const [settings, setSettings] = useRecoilState(SettingsAtom);
 
-  window.addEventListener('message', event => {
-    const message = event.data;
-
+  Messenger.listen((message: EventData<any>) => {
     switch (message.command) {
       case DashboardCommand.loading:
         setLoading(message.data);
@@ -32,8 +29,8 @@ export default function useMessages() {
 
   useEffect(() => {    
     setLoading(true);
-    vscode.postMessage({ command: DashboardMessage.getTheme });
-    vscode.postMessage({ command: DashboardMessage.getData });
+    Messenger.send(DashboardMessage.getTheme);
+    Messenger.send(DashboardMessage.getData);
   }, ['']);
 
   return {

src/pagesView/state/atom/CategoryAtom.ts

@@ -1,6 +1,8 @@
 import { atom } from 'recoil';
 
+export const DEFAULT_CATEGORY_STATE = "";
+
 export const CategoryAtom = atom<string | null>({
   key: 'CategoryAtom',
-  default: ""
+  default: DEFAULT_CATEGORY_STATE
 });

src/pagesView/state/atom/FolderAtom.ts

@@ -1,6 +1,8 @@
 import { atom } from 'recoil';
 
+export const DEFAULT_FOLDER_STATE = null;
+
 export const FolderAtom = atom<string | null>({
   key: 'FolderAtom',
-  default: null
+  default: DEFAULT_FOLDER_STATE
 });

src/pagesView/state/atom/SortingAtom.ts

@@ -1,7 +1,9 @@
 import { atom } from 'recoil';
 import { SortOption } from '../../constants/SortOption';
 
+export const DEFAULT_SORTING_OPTION = SortOption.LastModified;
+
 export const SortingAtom = atom<SortOption>({
   key: 'SortingAtom',
-  default: SortOption.LastModified
+  default: DEFAULT_SORTING_OPTION
 });

src/pagesView/state/atom/TagAtom.ts

@@ -1,6 +1,8 @@
 import { atom } from 'recoil';
 
+export const DEFAULT_TAG_STATE = "";
+
 export const TagAtom = atom<string | null>({
   key: 'TagAtom',
-  default: ""
+  default: DEFAULT_TAG_STATE
 });