From 920b7fe4300b5cd51d59de0ba7e4774f121b9651 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <aries@Mac.local>
Date: Fri, 18 Apr 2025 17:06:15 +0800
Subject: [PATCH] fix dirent state in grid view

---
 .../dirent-grid-view/dirent-grid-item.js      | 17 +++++++
 frontend/src/models/dirent.js                 |  2 +-
 .../lib-content-view/lib-content-view.js      | 48 ++++++++++++-------
 3 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-item.js b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
index 3c230eacb6..c4dbd0b644 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
@@ -72,6 +72,23 @@ class DirentGridItem extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.dirent !== this.props.dirent) {
+      this.setState({ dirent: this.props.dirent });
+    }
+
+    const { repoID, path } = this.props;
+    const { dirent } = this.state;
+    if (this.checkGenerateThumbnail(dirent) && !this.isGeneratingThumbnail) {
+      this.isGeneratingThumbnail = true;
+      this.thumbnailCenter.createThumbnail({
+        repoID,
+        path: [path, dirent.name].join('/'),
+        callback: this.updateDirentThumbnail,
+      });
+    }
+  }
+
   componentWillUnmount() {
     if (this.clickTimeout) {
       clearTimeout(this.clickTimeout);
diff --git a/frontend/src/models/dirent.js b/frontend/src/models/dirent.js
index 908f8067fd..4f5f103242 100644
--- a/frontend/src/models/dirent.js
+++ b/frontend/src/models/dirent.js
@@ -17,7 +17,7 @@ class Dirent {
       this.mtime_relative = dayjs.unix(json.mtime).fromNow();
     }
     this.permission = json.permission || 'rw';
-    this.isSelected = false; // is check or not
+    this.isSelected = json.isSelected || false; // is check or not
     this.starred = json.starred || false;
     if (json.type === 'dir') {
       this.has_been_shared_out = false;
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 052ca0b4be..8f745c4586 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -1543,36 +1543,48 @@ class LibContentView extends React.Component {
         newSelectedDirentList = [clickedDirent];
       }
 
-      this.setState({
-        direntList: direntList.map(dirent => {
-          dirent.isSelected = newSelectedDirentList.some(selectedDirent => selectedDirent.name === dirent.name);
-          return dirent;
-        }),
-        isDirentSelected: newSelectedDirentList.length > 0,
-        isAllDirentSelected: newSelectedDirentList.length === direntList.length,
-        selectedDirentList: newSelectedDirentList,
-        lastSelectedIndex: clickedIndex,
+      this.setState(prevState => {
+        const newDirentList = prevState.direntList.map(dirent => {
+          const isSelected = newSelectedDirentList.some(selected => selected.name === dirent.name);
+          return new Dirent({
+            ...dirent,
+            isSelected: isSelected,
+          });
+        });
+
+        const updatedSelectedDirents = newSelectedDirentList.map(selected =>
+          newDirentList.find(dirent => dirent.name === selected.name)
+        );
+
+        return {
+          direntList: newDirentList,
+          isDirentSelected: updatedSelectedDirents.length > 0,
+          isAllDirentSelected: updatedSelectedDirents.length === newDirentList.length,
+          selectedDirentList: updatedSelectedDirents,
+          lastSelectedIndex: clickedIndex,
+        };
       });
     } else {
-      this.setState({
-        direntList: direntList.map(dirent => {
-          dirent.isSelected = false;
-          return dirent;
-        }),
+      this.setState(prevState => ({
+        direntList: prevState.direntList.map(dirent => new Dirent({...dirent, isSelected: false})),
         isDirentSelected: false,
         isAllDirentSelected: false,
         selectedDirentList: [],
         lastSelectedIndex: null,
-      });
+      }));
     }
   };
 
   onSelectedDirentListUpdate = (newSelectedDirentList, lastSelectedIndex = null) => {
     this.setState({
       direntList: this.state.direntList.map(dirent => {
-        dirent.isSelected = newSelectedDirentList.some(selectedDirent => selectedDirent.name === dirent.name);
-        return dirent;
-      }),
+        return new Dirent({
+            ...dirent,
+            isSelected: newSelectedDirentList.some(
+                selected => selected.name === dirent.name
+            )
+        });
+    }),
       isDirentSelected: newSelectedDirentList.length > 0,
       selectedDirentList: newSelectedDirentList,
       lastSelectedIndex: lastSelectedIndex,