feat(fe/panels): enable refreshing for files and sharing panel

src/client/web/src/common/cron.ts

@@ -13,9 +13,9 @@ export class Cron {
     this.tasks = Map<string, CronTask>();
   }
 
-  add = (name: string, task: CronTask) => {
+  setInterval = (name: string, task: CronTask) => {
     if (this.tasks.has(name)) {
-      this.delete(name);
+      this.clearInterval(name);
     }
 
     const handler = window.setInterval(task.func, task.delay, ...task.args);
@@ -23,7 +23,7 @@ export class Cron {
     this.tasks = this.tasks.set(name, task);
   };
 
-  delete = (name: string) => {
+  clearInterval = (name: string) => {
     const preTask = this.tasks.get(name);
     window.clearInterval(preTask.handler);
     this.tasks = this.tasks.delete(name);

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

@@ -36,6 +36,7 @@ import {
   loadingCtrl,
 } from "../common/controls";
 import { HotkeyHandler } from "../common/hotkeys";
+import { CronTable } from "../common/cron";
 
 export interface Item {
   name: string;
@@ -102,6 +103,12 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   }
 
   componentDidMount(): void {
+    CronTable().setInterval("refreshFileList", {
+      func: updater().refreshFiles,
+      args: [],
+      delay: 5000,
+    });
+
     this.hotkeyHandler = new HotkeyHandler();
     this.hotkeyHandler.add({ key: "a", ctrl: true }, this.selectAll);
     this.hotkeyHandler.add({ key: "q", ctrl: true }, this.onClickUpload);
@@ -110,6 +117,8 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   }
 
   componentWillUnmount() {
+    CronTable().clearInterval("refreshFileList");
+
     document.removeEventListener("keyup", this.hotkeyHandler.handle);
   }
 

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

@@ -15,6 +15,7 @@ import { Container } from "./layout/container";
 import { Rows, Row } from "./layout/rows";
 import { shareIDQuery } from "../client/files";
 import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
+import { CronTable } from "../common/cron";
 
 export interface SharingsProps {
   sharings: Map<string, string>;
@@ -36,6 +37,18 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
     this.state = {};
   }
 
+  componentDidMount(): void {
+    CronTable().setInterval("refreshUploadings", {
+      func: updater().refreshUploadings,
+      args: [],
+      delay: 5000,
+    });
+  }
+
+  componentWillUnmount() {
+    CronTable().clearInterval("refreshUploadings");
+  }
+
   setLoading = (state: boolean) => {
     updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
     this.props.update(updater().updateUI);

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

@@ -237,6 +237,10 @@ export class Updater {
     return this.setItems(dirParts);
   };
 
+  refreshFiles = async (): Promise<string> => {
+    return await this.setItems(this.props.filesInfo.dirPath);
+  };
+
   setItems = async (dirParts: List<string>): Promise<string> => {
     const dirPath = dirParts.join("/");
     const listResp = await this.filesClient.list(dirPath);