optimize directory tree node sorting (#8041)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/components/tree-view/tree-helper.js

@@ -137,6 +137,19 @@ class TreeHelper {
     return treeCopy;
   }
 
+  sortTreeNodes(tree, sortBy, sortOrder) {
+    const treeCopy = tree.clone();
+    const sortChildren = (node) => {
+      if (!node.children.length) return;
+      const dirents = node.children.map(child => child.object);
+      const sortedDirents = Utils.sortDirents(dirents, sortBy, sortOrder);
+      node.children = sortedDirents.map(dirent => node.children.find(c => c.object.name === dirent.name));
+      node.children.forEach(child => sortChildren(child));
+    };
+    sortChildren(treeCopy.root);
+    return treeCopy;
+  }
+
   buildTree() {
     let tree = new Tree();
     let object = new Dirent({ name: '/' });

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

@@ -2095,7 +2095,7 @@ class LibContentView extends React.Component {
     let direntList = list.map(item => {
       return new Dirent(item);
     });
-    direntList = Utils.sortDirents(direntList, 'name', 'asc');
+    direntList = Utils.sortDirents(direntList, this.state.sortBy, this.state.sortOrder);
 
     let nodeList = direntList.map(object => {
       return new TreeNode({ object });
@@ -2184,10 +2184,14 @@ class LibContentView extends React.Component {
   sortItems = (sortBy, sortOrder) => {
     cookie.save('seafile-repo-dir-sort-by', sortBy);
     cookie.save('seafile-repo-dir-sort-order', sortOrder);
+
+    const sortedDirentList = Utils.sortDirents(this.state.direntList, sortBy, sortOrder);
+    const sortedTreeData = treeHelper.sortTreeNodes(this.state.treeData, sortBy, sortOrder);
     this.setState({
       sortBy: sortBy,
       sortOrder: sortOrder,
-      items: Utils.sortDirents(this.state.direntList, sortBy, sortOrder)
+      direntList: sortedDirentList,
+      treeData: sortedTreeData,
     });
   };