#173 - Persistent sorting

src/dashboardWebView/components/Header/Sorting.tsx

@@ -1,14 +1,18 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { ExtensionState } from '../../../constants';
 import { SortOrder, SortType } from '../../../models';
 import { SortOption } from '../../constants/SortOption';
+import { DashboardMessage } from '../../DashboardMessage';
+import { SortingOption } from '../../models/SortingOption';
 import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
 export interface ISortingProps {}
 
-export const sortOptions: { title?: string; name: string; id: SortOption | string; order: SortOrder, type: SortType; }[] = [
+export const sortOptions: SortingOption[] = [
   { name: "Last modified", id: SortOption.LastModified, order: SortOrder.desc, type: SortType.string },
   { name: "By filename (asc)", id: SortOption.FileNameAsc, order: SortOrder.asc, type: SortType.string },
   { name: "By filename (desc)", id: SortOption.FileNameDesc, order: SortOrder.desc, type: SortType.string },
@@ -19,6 +23,16 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({}: React.PropsW
   const searchValue = useRecoilValue(SearchSelector);
   const settings = useRecoilValue(SettingsSelector);
 
+  const updateSorting = (value: SortingOption) => {
+
+    Messenger.send(DashboardMessage.setState, {
+      key: ExtensionState.Dashboard.Sorting,
+      value: value
+    })
+
+    setCrntSorting(value)
+  };
+
   let allOptions = [...sortOptions];
   if (settings?.customSorting) {
     allOptions = [...allOptions, ...settings.customSorting.map((s) => ({ 
@@ -30,7 +44,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({}: React.PropsW
     }))];
   }
 
-  let crntSort = allOptions.find(x => x.id === crntSorting.id);
+  let crntSort = allOptions.find(x => x.id === crntSorting?.id) || sortOptions[0];
 
   return (
     <div className="flex items-center">
@@ -43,8 +57,8 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({}: React.PropsW
               key={option.id}
               title={option.title || option.name}
               value={option}
-              isCurrent={option.id === crntSorting.id}
-              onClick={(value) => setCrntSorting(value)} />
+              isCurrent={option.id === crntSorting?.id}
+              onClick={(value) => updateSorting(value)} />
           ))}
         </MenuItems>
       </Menu>