fix(fe/sorting): move sorting function to common

src/client/web/src/common/utils.ts

@@ -1,4 +1,6 @@
-import { Map } from "immutable";
+import { List, Map } from "immutable";
+
+import { Row } from "../components/layout/rows";
 
 export function getItemPath(dirPath: string, itemName: string): string {
   return dirPath.endsWith("/")
@@ -13,3 +15,29 @@ export function getErrMsg(
 ): string {
   return `${msgPkg.get(msg)}: ${msgPkg.get(status)}`;
 }
+
+export function sortRows(
+  rows: List<Row>,
+  key: number,
+  order: boolean
+): List<Row> {
+  return rows.sort((row1: Row, row2: Row) => {
+    const val1 = row1.sortVals.get(key);
+    const val2 = row2.sortVals.get(key);
+
+    if (val1 == null || val2 == null) {
+      // elements without the sort key will be moved to the last
+      if (val1 == null && val2 != null) {
+        return 1;
+      } else if (val1 != null && val2 == null) {
+        return -1;
+      }
+      return 0;
+    } else if (val1 < val2) {
+      return order ? -1 : 1;
+    } else if (val1 === val2) {
+      return 0;
+    }
+    return order ? 1 : -1;
+  });
+}

src/client/web/src/components/layout/rows.tsx

@@ -3,8 +3,8 @@ import { List } from "immutable";
 
 import { BiSortUp } from "@react-icons/all-files/bi/BiSortUp";
 
-
 import { Flexbox } from "./flexbox";
+import { sortRows } from "../../common/utils";
 
 export interface Row {
   elem: React.ReactNode; // element to display
@@ -49,25 +49,7 @@ export class Rows extends React.Component<Props, State, {}> {
     }
     const expectedOrder = !currentOrder;
 
-    const sortedRows = this.props.rows.sort((row1: Row, row2: Row) => {
+    const sortedRows = sortRows(this.props.rows, key, expectedOrder);
-      const val1 = row1.sortVals.get(key);
-      const val2 = row2.sortVals.get(key);
-      if (val1 == null || val2 == null) {
-        // elements without the sort key will be moved to the last
-        if (val1 == null && val2 != null) {
-          return 1;
-        } else if (val1 != null && val2 == null) {
-          return -1;
-        }
-        return 0;
-      } else if (val1 < val2) {
-        return expectedOrder ? -1 : 1;
-      } else if (val1 === val2) {
-        return 0;
-      }
-      return expectedOrder ? 1 : -1;
-    });
-
     const sortedItems = sortedRows.map((row: Row): Object => {
       return row.val;
     });
@@ -104,10 +86,7 @@ export class Rows extends React.Component<Props, State, {}> {
         <div className="margin-b-l">
           <Flexbox
             children={List([
-              <BiSortUp
+              <BiSortUp size="3rem" className="black-font margin-r-m" />,
-                size="3rem"
-                className="black-font margin-r-m"
-              />,
               <span>{sortBtns}</span>,
             ])}
             childrenStyles={List([{ flex: "0 0 auto" }, { flex: "0 0 auto" }])}

src/client/web/src/components/state_updater.ts

@@ -1,7 +1,7 @@
 import { List, Map, Set } from "immutable";
 
 import { ICoreState } from "./core_state";
-import { getItemPath } from "../common/utils";
+import { getItemPath, sortRows } from "../common/utils";
 import {
   User,
   ListUsersResp,
@@ -238,7 +238,16 @@ export class Updater {
   };
 
   refreshFiles = async (): Promise<string> => {
-    return await this.setItems(this.props.filesInfo.dirPath);
+    const status = await this.setItems(this.props.filesInfo.dirPath);
+    if (status !== "") {
+      return status;
+    };
+
+    // TODO: this part is duplicated in the panel_files.tsx
+    const sortKeys = List<string>([
+      this.props.msg.pkg.get("item.type"),
+      this.props.msg.pkg.get("item.name"),
+    ]);
   };
 
   setItems = async (dirParts: List<string>): Promise<string> => {