fix(fe/panel_sharings): introduce rows layout in sharing panel

public/static/css/white.css

@@ -250,6 +250,14 @@
   padding: 1rem 0 1rem 0;
 }
 
+.theme-default .upload-item .error {
+  font-size: 1.4rem;
+  padding: 1rem;
+  color: #f1c40f;
+  margin: 1rem 0 0 0;
+  background-color: #2c3e50;
+}
+
 .theme-default #sharing-list .desc {
   background-color: #ecf0f1;
   font-size: 1.2rem;

src/client/web/src/components/panel_sharings.tsx

@@ -12,7 +12,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
-import { getIcon } from "./visual/icons";
+import { Rows, Row } from "./layout/rows";
 
 export interface SharingsProps {
   sharings: List<string>;
@@ -35,98 +35,121 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
   }
 
   deleteSharing = async (dirPath: string) => {
-    return updater()
-      .deleteSharing(dirPath)
-      .then((status: string) => {
-        if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
-        } else {
-          updater().setSharing(false);
-          return this.listSharings();
-        }
-      });
+    try {
+      const deleteStatus = await updater().deleteSharing(dirPath);
+      if (deleteStatus !== "") {
+        throw deleteStatus;
+      }
+      updater().setSharing(false);
+
+      await this.listSharings();
+    } catch (e: any) {
+      alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+    }
   };
 
   listSharings = async () => {
-    return updater()
-      .listSharings()
-      .then((status: string) => {
-        if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
-        }
-        this.props.update(updater().updateFilesInfo);
-        this.props.update(updater().updateSharingsInfo);
-      });
+    const status = await updater().listSharings();
+    if (status !== "") {
+      alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+    }
+    this.props.update(updater().updateFilesInfo);
+    this.props.update(updater().updateSharingsInfo);
+  };
+
+  makeRows = (sharings: List<string>): List<Row> => {
+    const sharingRows = sharings.map((dirPath: string) => {
+      const sharingURL = `${
+        document.location.href.split("?")[0]
+      }?dir=${encodeURIComponent(dirPath)}`;
+
+      const row1 = (
+        <Flexbox
+          children={List([
+            <RiFolderSharedFill
+              size="3rem"
+              className="purple0-font margin-r-m"
+            />,
+            <span>{dirPath}</span>,
+
+            <button
+              onClick={() => {
+                this.deleteSharing(dirPath);
+              }}
+            >
+              {this.props.msg.pkg.get("browser.delete")}
+            </button>,
+          ])}
+          childrenStyles={List([
+            { flex: "0 0 auto", alignItems: "center" },
+            { alignItems: "center", justifyContent: "flex-start" },
+            {
+              flex: "0 0 auto",
+              alignItems: "center",
+              justifyContent: "flex-end",
+            },
+          ])}
+        />
+      );
+
+      const elem = (
+        <div className="sharing-item" key={dirPath}>
+          {row1}
+          <div className="desc">{sharingURL}</div>
+          <div className="hr grey0-bg"></div>
+        </div>
+      );
+
+      return {
+        elem,
+        sortVals: List([dirPath]),
+        val: dirPath,
+      };
+    });
+
+    return sharingRows;
+  };
+
+  updateSharings = (sharings: List<Object>) => {
+    const newSharings = sharings as List<string>;
+    updater().updateSharings(newSharings);
+    this.props.update(updater().updateSharingsInfo);
   };
 
   render() {
-    const nameWidthClass = `item-name item-name-${
-      this.props.ui.isVertical ? "vertical" : "horizontal"
-    } pointer`;
-
-    const sharingList = this.props.sharingsInfo.sharings.map(
-      (dirPath: string) => {
-        const sharingURL = `${
-          document.location.href.split("?")[0]
-        }?dir=${encodeURIComponent(dirPath)}`;
-
-        return (
-          <div className="sharing-item" key={dirPath}>
-            <Flexbox
-              children={List([
-                <Flexbox
-                  children={List([
-                    <RiFolderSharedFill
-                      size="3rem"
-                      className="purple0-font margin-r-m"
-                    />,
-                    <span className={nameWidthClass}>{dirPath}</span>,
-                  ])}
-                />,
-
-                <button
-                  onClick={() => {
-                    this.deleteSharing(dirPath);
-                  }}
-                >
-                  {this.props.msg.pkg.get("browser.delete")}
-                </button>,
-              ])}
-              childrenStyles={List([
-                { alignItems: "center" },
-                { alignItems: "center", justifyContent: "flex-end" },
-                { alignItems: "center", justifyContent: "flex-end" },
-              ])}
-            />
-
-            <div className="desc">{sharingURL}</div>
-            <div className="hr grey0-bg"></div>
-          </div>
-        );
-      }
+    const sharingRows = this.makeRows(this.props.sharingsInfo.sharings);
+    const view = (
+      <Rows
+        rows={sharingRows}
+        sortKeys={List([this.props.msg.pkg.get("item.path")])}
+        updateRows={this.updateSharings}
+      />
+    );
+    const noSharingView = (
+      <Container>
+        <Flexbox
+          children={List([
+            <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
+            <span>
+              <h3 className="title-l">
+                {this.props.msg.pkg.get("share.404.title")}
+              </h3>
+              <span className="desc-l grey0-font">
+                {this.props.msg.pkg.get("share.404.desc")}
+              </span>
+            </span>,
+          ])}
+          childrenStyles={List([
+            { flex: "auto", justifyContent: "flex-end" },
+            { flex: "auto" },
+          ])}
+        />
+      </Container>
     );
 
     const list =
       this.props.sharingsInfo.sharings.size === 0 ? (
-        <Container>
-          <Flexbox
-            children={List([
-              <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
-              <span>
-                <h3 className="title-l">
-                  {this.props.msg.pkg.get("share.404.title")}
-                </h3>
-                <span className="desc-l grey0-font">
-                  {this.props.msg.pkg.get("share.404.desc")}
-                </span>
-              </span>,
-            ])}
-            childrenStyles={List([
-              { flex: "auto", justifyContent: "flex-end" },
-              { flex: "auto" },
-            ])}
-          />
-        </Container>
+        noSharingView
       ) : (
         <Container>
           <Flexbox
@@ -151,9 +174,10 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
 
               <span></span>,
             ])}
+            className="margin-b-l"
           />
 
-          {sharingList}
+          {view}
         </Container>
       );
 

src/client/web/src/components/panel_uploadings.tsx

@@ -69,8 +69,6 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
       const fileName = pathParts[pathParts.length - 1];
       const progress = Math.floor((uploading.uploaded / uploading.size) * 100);
 
-      // const title = <Flexbox children={List([])} />;
-
       const op = (
         <div className="item-op">
           <button
@@ -206,7 +204,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <span className="upload-item">
+              <span className="margin-b-l">
                 <Flexbox
                   children={List([
                     <RiUploadCloudFill

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

@@ -267,6 +267,10 @@ export class Updater {
     this.props.uploadingsInfo.uploadings = uploadings;
   };
 
+  updateSharings = (sharings: List<string>) => {
+    this.props.sharingsInfo.sharings = sharings;
+  };
+
   moveHere = async (
     srcDir: string,
     dstDir: string,