#712 - Add fix for media file deletion search context

CHANGELOG.md

@@ -33,6 +33,7 @@
 - [#703](https://github.com/estruyf/vscode-front-matter/issues/703): Fix retrieval of Astro Collections for `pnpm` projects
 - [#704](https://github.com/estruyf/vscode-front-matter/issues/704): Fix `zod` schema script for optional fields
 - [#707](https://github.com/estruyf/vscode-front-matter/issues/707): Fix `clearEmpty` issue with `draft` and `boolean` fields which are by default set to `true`
+- [#712](https://github.com/estruyf/vscode-front-matter/issues/712): Keep the search context when deleting media files
 
 ## [9.3.1] - 2023-10-27
 

src/dashboardWebView/hooks/useMedia.tsx

@@ -1,6 +1,6 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { MediaInfo, MediaPaths } from '../../models';
 import { DashboardCommand } from '../DashboardCommand';
@@ -52,40 +52,51 @@ export default function useMedia() {
     }
   }, [search, prevSearch]);
 
-  const getMedia = useCallback(() => {
+  const allMedia = useMemo(() => {
+    console.log('getMedia', searchedMedia);
     return searchedMedia.slice(page * pageSetNr, (page + 1) * pageSetNr);
   }, [searchedMedia, page, pageSetNr]);
 
-  const messageListener = (
-    message: MessageEvent<EventData<MediaPaths | { key: string; value: any }>>
-  ) => {
-    if (message.data.command === DashboardCommand.media) {
-      const payload: MediaPaths = message.data.payload as MediaPaths;
-      setLoading(false);
-      setMedia(payload.media);
-      setTotal(payload.total);
-      setFolders(payload.folders);
-      setSelectedFolder(payload.selectedFolder);
-      setSearchedMedia(payload.media);
-      setAllContentFolders(payload.allContentFolders);
-      setAllStaticFolders(payload.allStaticfolders);
-    }
-  };
-
-  useEffect(() => {
+  const searchMedia = (search: string, media: MediaInfo[]) => {
+    console.log('searchMedia start', search, media);
     if (search) {
       const fuse = new Fuse(media, fuseOptions);
       const results = fuse.search(search);
       const newSearchedMedia = results.map((page) => page.item);
+      console.log('searchMedia end', search, newSearchedMedia);
 
       setSearchedMedia(newSearchedMedia);
       setTotal(results.length);
 
       return;
     }
+    console.log('searchMedia end skip', search, media);
 
     setTotal(media.length);
     setSearchedMedia(media);
+  }
+
+  const messageListener = useCallback((message: MessageEvent<EventData<MediaPaths | { key: string; value: any }>>) => {
+    if (message.data.command === DashboardCommand.media) {
+      console.log('messageListener', search, message.data);
+      const payload: MediaPaths = message.data.payload as MediaPaths;
+      setLoading(false);
+      setMedia(payload.media);
+      setTotal(payload.total);
+      setFolders(payload.folders);
+      setSelectedFolder(payload.selectedFolder);
+      if (search) {
+        searchMedia(search, payload.media);
+      } else {
+        setSearchedMedia(payload.media);
+      }
+      setAllContentFolders(payload.allContentFolders);
+      setAllStaticFolders(payload.allStaticfolders);
+    }
+  }, [search]);
+
+  useEffect(() => {
+    searchMedia(search, media);
   }, [search, media]);
 
   useEffect(() => {
@@ -94,9 +105,9 @@ export default function useMedia() {
     return () => {
       Messenger.unlisten(messageListener);
     };
-  }, []);
+  }, [search]);
 
   return {
-    media: getMedia()
+    media: allMedia
   };
 }