From 7831aa7de5e05878c5bccf8b93078389f2df1305 Mon Sep 17 00:00:00 2001 From: hexxa Date: Sun, 27 Feb 2022 11:22:39 +0800 Subject: [PATCH] fix(fe/panels): sort entries in refreshing --- .../components/__test__/panel_files.test.tsx | 17 +++++++++- .../components/__test__/state_mgr.test.tsx | 34 +++++++++++++++++-- src/client/web/src/components/panel_files.tsx | 7 +++- .../web/src/components/panel_sharings.tsx | 9 ++--- .../web/src/components/panel_uploadings.tsx | 3 +- .../web/src/components/state_updater.ts | 27 +++++++-------- 6 files changed, 74 insertions(+), 23 deletions(-) diff --git a/src/client/web/src/components/__test__/panel_files.test.tsx b/src/client/web/src/components/__test__/panel_files.test.tsx index c4b900b..edb96b0 100644 --- a/src/client/web/src/components/__test__/panel_files.test.tsx +++ b/src/client/web/src/components/__test__/panel_files.test.tsx @@ -53,7 +53,22 @@ describe("FilesPanel", () => { expect(updater().props.filesInfo.dirPath).toEqual(newCwd); expect(updater().props.filesInfo.isSharing).toEqual(true); expect(updater().props.filesInfo.items).toEqual( - List(filesResps.listHomeMockResp.data.metadatas) + List([ + { + name: "mock_dir", + size: 0, + modTime: "0", + isDir: true, + sha1: "", + }, + { + name: "mock_file", + size: 5, + modTime: "0", + isDir: false, + sha1: "mock_file_sha1", + }, + ]) ); }); diff --git a/src/client/web/src/components/__test__/state_mgr.test.tsx b/src/client/web/src/components/__test__/state_mgr.test.tsx index 28c1e0e..142d341 100644 --- a/src/client/web/src/components/__test__/state_mgr.test.tsx +++ b/src/client/web/src/components/__test__/state_mgr.test.tsx @@ -70,7 +70,22 @@ describe("State Manager", () => { ); expect(coreState.filesInfo.items).toEqual( - List(filesResps.listHomeMockResp.data.metadatas) + List([ + { + name: "mock_dir", + size: 0, + modTime: "0", + isDir: true, + sha1: "", + }, + { + name: "mock_file", + size: 5, + modTime: "0", + isDir: false, + sha1: "mock_file_sha1", + }, + ]) ); // login @@ -182,7 +197,22 @@ describe("State Manager", () => { expect(coreState.filesInfo.dirPath.join("/")).toEqual(sharingPath); expect(coreState.filesInfo.isSharing).toEqual(true); expect(coreState.filesInfo.items).toEqual( - List(filesResps.listMockResp.data.metadatas) + List([ + { + name: "mock_dir", + size: 0, + modTime: "0", + isDir: true, + sha1: "", + }, + { + name: "mock_file", + size: 5, + modTime: "0", + isDir: false, + sha1: "mock_file_sha1", + }, + ]) ); expect(coreState.sharingsInfo.sharings).toEqual(Map()); expect(coreState.uploadingsInfo.uploadings).toEqual(List([])); diff --git a/src/client/web/src/components/panel_files.tsx b/src/client/web/src/components/panel_files.tsx index fb16b6a..5ff872d 100644 --- a/src/client/web/src/components/panel_files.tsx +++ b/src/client/web/src/components/panel_files.tsx @@ -767,7 +767,12 @@ export class FilesPanel extends React.Component { }; orderBy = (columnName: string) => { - updater().sortFiles(columnName); + const order = + this.props.filesInfo.orderBy === columnName + ? !this.props.filesInfo.order + : true; + + updater().sortFiles(columnName, order); this.props.update(updater().updateFilesInfo); }; diff --git a/src/client/web/src/components/panel_sharings.tsx b/src/client/web/src/components/panel_sharings.tsx index 7e2317e..9dbdc32 100644 --- a/src/client/web/src/components/panel_sharings.tsx +++ b/src/client/web/src/components/panel_sharings.tsx @@ -41,15 +41,15 @@ export class SharingsPanel extends React.Component { } componentDidMount(): void { - CronTable().setInterval("refreshUploadings", { - func: updater().refreshUploadings, + CronTable().setInterval("listSharings", { + func: updater().listSharings, args: [], delay: 5000, }); } componentWillUnmount() { - CronTable().clearInterval("refreshUploadings"); + CronTable().clearInterval("listSharings"); } setLoading = (state: boolean) => { @@ -153,7 +153,8 @@ export class SharingsPanel extends React.Component { }; orderBy = (columnName: string) => { - updater().sortSharings(columnName); + const order = !this.props.sharingsInfo.order; + updater().sortSharings(columnName, order); this.props.update(updater().updateSharingsInfo); }; diff --git a/src/client/web/src/components/panel_uploadings.tsx b/src/client/web/src/components/panel_uploadings.tsx index 56ef394..e7cd050 100644 --- a/src/client/web/src/components/panel_uploadings.tsx +++ b/src/client/web/src/components/panel_uploadings.tsx @@ -184,7 +184,8 @@ export class UploadingsPanel extends React.Component { }; orderBy = (columnName: string) => { - updater().sortUploadings(columnName); + const order = !this.props.uploadingsInfo.order; + updater().sortUploadings(columnName, order); this.props.update(updater().updateUploadingsInfo); }; diff --git a/src/client/web/src/components/state_updater.ts b/src/client/web/src/components/state_updater.ts index a82a854..a450f68 100644 --- a/src/client/web/src/components/state_updater.ts +++ b/src/client/web/src/components/state_updater.ts @@ -129,6 +129,10 @@ export class Updater { return errServer; } this.props.sharingsInfo.sharings = Map(resp.data.IDs); + this.sortSharings( + this.props.sharingsInfo.orderBy, + this.props.sharingsInfo.order + ); return ""; }; @@ -242,12 +246,11 @@ export class Updater { if (status !== "") { return status; } - // TODO: this part is duplicated in the panel_files.tsx - const sortKeys = List([ - this.props.msg.pkg.get("item.type"), - this.props.msg.pkg.get("item.name"), - ]); + // const sortKeys = List([ + // this.props.msg.pkg.get("item.type"), + // this.props.msg.pkg.get("item.name"), + // ]); }; setItems = async (dirParts: List): Promise => { @@ -257,6 +260,7 @@ export class Updater { if (listResp.status === 200) { this.props.filesInfo.dirPath = dirParts; this.props.filesInfo.items = List(listResp.data.metadatas); + this.sortFiles(this.props.filesInfo.orderBy, this.props.filesInfo.order); return ""; } this.props.filesInfo.dirPath = List([]); @@ -270,6 +274,7 @@ export class Updater { if (listResp.status === 200) { this.props.filesInfo.dirPath = List(listResp.data.cwd.split("/")); this.props.filesInfo.items = List(listResp.data.metadatas); + this.sortFiles(this.props.filesInfo.orderBy, this.props.filesInfo.order); return ""; } this.props.filesInfo.dirPath = List([]); @@ -880,7 +885,7 @@ export class Updater { this.props.sharingsInfo.order = order; }; - sortFiles = (columnName: string) => { + sortFiles = (columnName: string, order: boolean) => { let orderByKey = 0; switch (columnName) { case this.props.msg.pkg.get("item.name"): @@ -892,10 +897,6 @@ export class Updater { default: orderByKey = 2; } - const order = - this.props.filesInfo.orderBy === columnName - ? !this.props.filesInfo.order - : true; const rows = this.props.filesInfo.items.map((item: MetadataResp): Row => { return { val: item, @@ -913,9 +914,8 @@ export class Updater { this.updateItems(sortedFiles); }; - sortUploadings = (columnName: string) => { + sortUploadings = (columnName: string, order: boolean) => { const orderByKey = 0; - const order = !this.props.uploadingsInfo.order; const rows = this.props.uploadingsInfo.uploadings.map( (uploading: UploadEntry): Row => { return { @@ -933,9 +933,8 @@ export class Updater { this.updateUploadings(sorted); }; - sortSharings = (columnName: string) => { + sortSharings = (columnName: string, order: boolean) => { const orderByKey = 0; - const order = !this.props.sharingsInfo.order; const rows = this.props.sharingsInfo.sharings .keySeq() .map((sharingPath: string): Row => {