#668 - Reset pagination on media search

CHANGELOG.md

@@ -23,6 +23,7 @@
 - [#661](https://github.com/estruyf/vscode-front-matter/issues/661): Fixing the dropdowns when used at the bottom of a collapsible group
 - [#664](https://github.com/estruyf/vscode-front-matter/issues/664): Fix for parsing draft status in Hexo and Jekyll
 - [#665](https://github.com/estruyf/vscode-front-matter/issues/665): Added `dev` parameter to Nuxt script
+- [#668](https://github.com/estruyf/vscode-front-matter/issues/668): Reset pagination on media search
 
 ## [9.2.0] - 2023-09-11
 

src/dashboardWebView/components/Header/Grouping.tsx

@@ -2,7 +2,7 @@ import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { GroupOption } from '../../constants/GroupOption';
-import { AllPagesAtom, GroupingAtom, PageAtom } from '../../state';
+import { AllPagesAtom, GroupingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

src/dashboardWebView/hooks/useMedia.tsx

@@ -17,6 +17,7 @@ import {
 } from '../state';
 import Fuse from 'fuse.js';
 import usePagination from './usePagination';
+import { usePrevious } from '../../panelWebView/hooks/usePrevious';
 
 const fuseOptions: Fuse.IFuseOptions<MediaInfo> = {
   keys: [
@@ -31,7 +32,8 @@ const fuseOptions: Fuse.IFuseOptions<MediaInfo> = {
 
 export default function useMedia() {
   const [media, setMedia] = useState<MediaInfo[]>([]);
-  const page = useRecoilValue(PageAtom);
+  // const page = useRecoilValue(PageAtom);
+  const [page, setPage] = useRecoilState(PageAtom);
   const [searchedMedia, setSearchedMedia] = useState<MediaInfo[]>([]);
   const [, setSelectedFolder] = useRecoilState(SelectedMediaFolderAtom);
   const [, setTotal] = useRecoilState(MediaTotalAtom);
@@ -40,10 +42,18 @@ export default function useMedia() {
   const [, setAllStaticFolders] = useRecoilState(AllStaticFoldersAtom);
   const [, setLoading] = useRecoilState(LoadingAtom);
   const search = useRecoilValue(SearchAtom);
+  const prevSearch = usePrevious<string>(search);
   const settings = useRecoilValue(SettingsAtom);
   const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
 
+  useEffect(() => {
+    if (prevSearch !== search) {
+      setPage(0);
+    }
+  }, [search, prevSearch]);
+
   const getMedia = useCallback(() => {
+    // console.log('getMedia', searchedMedia, page, pageSetNr);
     return searchedMedia.slice(page * pageSetNr, (page + 1) * pageSetNr);
   }, [searchedMedia, page, pageSetNr]);