From 08b8fa6fdb755a18b777fd945119acd06cde791f Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 18 Sep 2023 10:33:49 +0200
Subject: [PATCH] #668 - Reset pagination on media search

---
 CHANGELOG.md                                        |  1 +
 src/dashboardWebView/components/Header/Grouping.tsx |  2 +-
 src/dashboardWebView/hooks/useMedia.tsx             | 12 +++++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ac615e8..65dcf688 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/dashboardWebView/components/Header/Grouping.tsx b/src/dashboardWebView/components/Header/Grouping.tsx
index 2a7e867a..61c35d0c 100644
--- a/src/dashboardWebView/components/Header/Grouping.tsx
+++ b/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';
diff --git a/src/dashboardWebView/hooks/useMedia.tsx b/src/dashboardWebView/hooks/useMedia.tsx
index d6400fd7..12851752 100644
--- a/src/dashboardWebView/hooks/useMedia.tsx
+++ b/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]);