fix dirent state in grid view

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);

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;

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -1543,36 +1543,48 @@ class LibContentView extends React.Component {
         newSelectedDirentList = [clickedDirent];
       }
 
-      this.setState({
+      this.setState(prevState => {
-        direntList: direntList.map(dirent => {
+        const newDirentList = prevState.direntList.map(dirent => {
-          dirent.isSelected = newSelectedDirentList.some(selectedDirent => selectedDirent.name === dirent.name);
+          const isSelected = newSelectedDirentList.some(selected => selected.name === dirent.name);
-          return dirent;
+          return new Dirent({
-        }),
+            ...dirent,
-        isDirentSelected: newSelectedDirentList.length > 0,
+            isSelected: isSelected,
-        isAllDirentSelected: newSelectedDirentList.length === direntList.length,
+          });
-        selectedDirentList: newSelectedDirentList,
+        });
-        lastSelectedIndex: clickedIndex,
+
+        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({
+      this.setState(prevState => ({
-        direntList: direntList.map(dirent => {
+        direntList: prevState.direntList.map(dirent => new Dirent({...dirent, isSelected: false})),
-          dirent.isSelected = false;
-          return dirent;
-        }),
         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 new Dirent({
-        return dirent;
+            ...dirent,
-      }),
+            isSelected: newSelectedDirentList.some(
+                selected => selected.name === dirent.name
+            )
+        });
+    }),
       isDirentSelected: newSelectedDirentList.length > 0,
       selectedDirentList: newSelectedDirentList,
       lastSelectedIndex: lastSelectedIndex,