fix(fe/components): handle status in the component

src/client/web/src/components/__test__/state_mgr.test.tsx

@@ -17,6 +17,10 @@ import { MsgPackage } from "../../i18n/msger";
 describe("State Manager", () => {
   initMockWorker();
   const emptyQuery = new URLSearchParams("");
+  // stub alert
+  // window.alert = (message?: string): void => {
+  //   console.log(message);
+  // };
 
   test("initUpdater for admin", async () => {
     const usersCl = new MockUsersClient("");
@@ -111,7 +115,9 @@ describe("State Manager", () => {
     expect(coreState.msg.pkg).toEqual(MsgPackage.get("en_US"));
 
     // ui
-    expect(coreState.ui.bg).toEqual(settingsResps.getClientCfgMockResp.data.clientCfg.bg);
+    expect(coreState.ui.bg).toEqual(
+      settingsResps.getClientCfgMockResp.data.clientCfg.bg
+    );
   });
 
   test("initUpdater for visitor in sharing mode", async () => {
@@ -211,6 +217,8 @@ describe("State Manager", () => {
     expect(coreState.msg.pkg).toEqual(MsgPackage.get("en_US"));
 
     // ui
-    expect(coreState.ui.bg).toEqual(settingsResps.getClientCfgMockResp.data.clientCfg.bg);
+    expect(coreState.ui.bg).toEqual(
+      settingsResps.getClientCfgMockResp.data.clientCfg.bg
+    );
   });
 });

src/client/web/src/components/pane_login.tsx

@@ -6,6 +6,7 @@ import { Flexbox } from "./layout/flexbox";
 import { updater } from "./state_updater";
 import { alertMsg } from "../common/env";
 import { Quota, Preferences } from "../client";
+import { getErrMsg } from "../common/utils";
 
 export interface LoginProps {
   userID: string;
@@ -70,20 +71,30 @@ export class AuthPane extends React.Component<Props, State, {}> {
           );
           return updater().initAll(params);
         } else {
-          alertMsg(this.props.msg.pkg.get("op.fail"));
+          throw status;
-          return updater().getCaptchaID();
         }
       })
-      .then(() => {
+      .then((status: string) => {
+        if (status !== "") {
+          throw status;
+        }
         this.update(updater().updateAll);
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
+        return updater().getCaptchaID();
       });
   };
 
   refreshCaptcha = async () => {
     return updater()
       .getCaptchaID()
-      .then(() => {
+      .then((status: string) => {
-        this.props.update(updater().updateLogin);
+        if (status !== "") {
+          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+        } else {
+          this.props.update(updater().updateLogin);
+        }
       });
   };
 

src/client/web/src/components/pane_settings.tsx

@@ -131,10 +131,10 @@ export class PaneSettings extends React.Component<Props, State, {}> {
       .then((status: string) => {
         if (status === "") {
           alertMsg(this.props.msg.pkg.get("update.ok"));
+          this.props.update(updater().updateMsg);
         } else {
           alertMsg(this.props.msg.pkg.get("update.fail"));
         }
-        this.props.update(updater().updateMsg);
       });
   };
 

src/client/web/src/components/panel_files.tsx

@@ -110,9 +110,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         .then((status: string) => {
           if (status !== "") {
             alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          } else {
+            this.props.update(updater().updateFilesInfo);
+            this.props.update(updater().updateUploadingsInfo);
           }
-          this.props.update(updater().updateFilesInfo);
-          this.props.update(updater().updateUploadingsInfo);
         });
     } else {
       this.props.update(updater().updateFilesInfo);
@@ -156,17 +157,20 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       .mkDir(dirPath)
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
         }
         this.setState({ newFolderName: "" });
         return updater().setItems(this.props.filesInfo.dirPath);
       })
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
         }
         this.props.update(updater().updateFilesInfo);
         this.props.update(updater().updateSharingsInfo);
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
       });
   };
 
@@ -200,11 +204,15 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       )
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
         }
         return updater().self();
       })
-      .then(() => {
+      .then((status: string) => {
+        if (status !== "") {
+          throw status;
+        }
+
         this.props.update(updater().updateFilesInfo);
         this.props.update(updater().updateSharingsInfo);
         this.props.update(updater().updateLogin);
@@ -212,6 +220,9 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           selectedSrc: "",
           selectedItems: Map<string, boolean>(),
         });
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
       });
   };
 
@@ -229,13 +240,19 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         this.props.filesInfo.dirPath.join("/"),
         this.state.selectedItems
       )
-      .then(() => {
+      .then((status: string) => {
+        if (status !== "") {
+          throw status;
+        }
         this.props.update(updater().updateFilesInfo);
         this.props.update(updater().updateSharingsInfo);
         this.setState({
           selectedSrc: "",
           selectedItems: Map<string, boolean>(),
         });
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
       });
   };
 
@@ -246,8 +263,14 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   goHome = async () => {
     return updater()
       .setHomeItems()
-      .then(() => {
+      .then((status: string) => {
+        if (status !== "") {
+          throw status;
+        }
         this.props.update(updater().updateFilesInfo);
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
       });
   };
 
@@ -263,16 +286,19 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       .setItems(dirPath)
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
         }
         return updater().syncIsSharing(dirPath.join("/"));
       })
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
         }
         this.props.update(updater().updateFilesInfo);
         this.props.update(updater().updateSharingsInfo);
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
       });
   };
 
@@ -323,8 +349,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       .addSharing()
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
-          return "";
         } else {
           updater().setSharing(true);
           return updater().listSharings();
@@ -332,10 +357,13 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       })
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
         }
         this.props.update(updater().updateSharingsInfo);
         this.props.update(updater().updateFilesInfo);
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
       });
   };
 
@@ -344,8 +372,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       .deleteSharing(dirPath)
       .then((status) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
-          return "";
         } else {
           updater().setSharing(false);
           return updater().listSharings();
@@ -353,10 +380,13 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       })
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
         }
         this.props.update(updater().updateSharingsInfo);
         this.props.update(updater().updateFilesInfo);
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
       });
   };
 

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

@@ -41,21 +41,26 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
       .deleteUpload(filePath)
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(
+          throw status;
-            getErrMsg(this.props.msg.pkg, "browser.upload.del.fail", status)
-          );
         }
         return updater().refreshUploadings();
       })
       .then((status: string) => {
         if (status !== "") {
-          alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+          throw status;
         }
         return updater().self();
       })
-      .then(() => {
+      .then((status: string) => {
+        if (status !== "") {
+          throw status;
+        }
+
         this.props.update(updater().updateUploadingsInfo);
         this.props.update(updater().updateLogin);
+      })
+      .catch((status: Error) => {
+        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
       });
   };
 

src/client/web/src/components/state_mgr.tsx

@@ -4,6 +4,8 @@ import { initUploadMgr } from "../worker/upload_mgr";
 import BgWorker from "../worker/upload.bg.worker";
 import { FgWorker } from "../worker/upload.fg.worker";
 
+import { alertMsg } from "../common/env";
+import { getErrMsg } from "../common/utils";
 import { updater } from "./state_updater";
 import { ICoreState, newState } from "./core_state";
 import { RootFrame } from "./root_frame";
@@ -63,7 +65,10 @@ export class StateMgr extends React.Component<Props, State, {}> {
 
     return updater()
       .initAll(query)
-      .then(() => {
+      .then((status: string) => {
+        if (status !== "") {
+          alertMsg(getErrMsg(state.msg.pkg, "op.fail", status.toString()));
+        }
         this.update(updater().updateAll);
       });
   };