From e59c8dd31c5704bb0e17caab940b4607002fdd3d Mon Sep 17 00:00:00 2001 From: cheerchen Date: Thu, 31 Mar 2022 18:05:59 +0800 Subject: [PATCH] fix(storybook): add mock data to the cloudStorageContainer component --- .../src/pages/CloudStoragePage/store.tsx | 18 +------ .../CloudStorageContainer.stories.tsx | 54 ++++++++++++++++--- .../containers/CloudStorageContainer/store.ts | 19 +++---- .../src/pages/CloudStoragePage/store.tsx | 16 +----- 4 files changed, 61 insertions(+), 46 deletions(-) diff --git a/desktop/renderer-app/src/pages/CloudStoragePage/store.tsx b/desktop/renderer-app/src/pages/CloudStoragePage/store.tsx index 0fc9adf5efa..a257f551378 100644 --- a/desktop/renderer-app/src/pages/CloudStoragePage/store.tsx +++ b/desktop/renderer-app/src/pages/CloudStoragePage/store.tsx @@ -51,12 +51,9 @@ export class CloudStorageStore extends CloudStorageStoreBase { public insertCourseware: (file: CloudStorageFile) => void; public onCoursewareInserted?: () => void; - public cloudStorageSinglePageFiles = 50; - /** In order to avoid multiple calls the fetchMoreCloudStorageData * when request fetchMoreCloudStorageData after files length is 0 */ - public hasMoreFile = false; - public isFetchingFiles = false; + public hasMoreFile = true; // a set of taskUUIDs representing querying tasks private convertStatusManager = new ConvertStatusManager(); @@ -80,15 +77,12 @@ export class CloudStorageStore extends CloudStorageStoreBase { makeObservable(this, { filesMap: observable, - isFetchingFiles: observable, pendingUploadTasks: computed, uploadingUploadTasks: computed, successUploadTasks: computed, failedUploadTasks: computed, files: computed, - currentFilesLength: computed, - cloudStorageDataPagination: computed, fileMenus: action, onItemMenuClick: action, @@ -123,14 +117,6 @@ export class CloudStorageStore extends CloudStorageStoreBase { return observable.array([...this.filesMap.values()]); } - public get currentFilesLength(): number { - return this.filesMap.size; - } - - public get cloudStorageDataPagination(): number { - return Math.ceil(this.currentFilesLength / this.cloudStorageSinglePageFiles); - } - /** Render file menus item base on fileUUID */ public fileMenus = ( file: CloudStorageFileUI, @@ -308,7 +294,7 @@ export class CloudStorageStore extends CloudStorageStoreBase { const cloudStorageTotalPagesFilesCount = this.cloudStorageDataPagination * this.cloudStorageSinglePageFiles; - if (this.currentFilesLength >= cloudStorageTotalPagesFilesCount && this.hasMoreFile) { + if (this.filesMap.size >= cloudStorageTotalPagesFilesCount && this.hasMoreFile) { this.isFetchingFiles = true; try { diff --git a/packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx b/packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx index 1067d703093..fd4e9e58989 100644 --- a/packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx +++ b/packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { Story, Meta, ArgTypes } from "@storybook/react"; import Chance from "chance"; import faker from "faker"; -import { action, AnnotationsMap, makeObservable } from "mobx"; +import { action, AnnotationsMap, makeObservable, observable } from "mobx"; import { Modal } from "antd"; import { CloudStorageContainer, CloudStorageStore } from "./index"; import { CloudStorageUploadTask } from "../../components/CloudStorage/types"; @@ -34,6 +34,7 @@ const fakeStoreImplProps = [ "onNewFileName", "addExternalFile", "onDropFile", + "fetchMoreCloudStorageData", ] as const; type FakeStoreImplProps = typeof fakeStoreImplProps[number]; @@ -51,6 +52,7 @@ class FakeStore extends CloudStorageStore { public onNewFileName: FakeStoreConfig["onNewFileName"]; public addExternalFile; public onDropFile: FakeStoreConfig["onDropFile"]; + public fetchMoreCloudStorageData; public pendingUploadTasks: CloudStorageStore["pendingUploadTasks"] = []; public uploadingUploadTasks: CloudStorageStore["uploadingUploadTasks"] = []; @@ -61,7 +63,7 @@ class FakeStore extends CloudStorageStore { public constructor(config: FakeStoreConfig) { super(); - this.files = Array(25) + this.files = Array(this.cloudStorageSinglePageFiles) .fill(0) .map(() => ({ fileUUID: faker.datatype.uuid(), @@ -154,13 +156,53 @@ class FakeStore extends CloudStorageStore { }); } }; + this.fetchMoreCloudStorageData = async (page: number): Promise => { + if (this.isFetchingFiles || this.files.length > 300) { + console.warn("the cloud storage files is enough"); + return Promise.resolve(); + } + + const cloudStorageTotalPagesFilesCount = + this.cloudStorageDataPagination * this.cloudStorageSinglePageFiles; + + if (this.files.length >= cloudStorageTotalPagesFilesCount) { + this.isFetchingFiles = true; + + const newFilesData = Array(this.cloudStorageSinglePageFiles * page) + .fill(0) + .map(() => ({ + fileUUID: faker.datatype.uuid(), + fileName: faker.random.words() + "." + faker.system.commonFileExt(), + fileSize: chance.integer({ min: 0, max: 1000 * 1000 * 100 }), + convert: chance.pickone(["idle", "error", "success", "converting"]), + createAt: faker.date.past(), + })); + + for (const { fileName, fileSize } of newFilesData) { + this.files.push({ + fileUUID: faker.datatype.uuid(), + fileName: fileName, + fileSize: fileSize, + convert: "idle", + createAt: faker.date.past(), + }); + } + + this.isFetchingFiles = false; + } + }; makeObservable( this, - fakeStoreImplProps.reduce((o, k) => { - o[k] = action; - return o; - }, {} as AnnotationsMap), + fakeStoreImplProps.reduce( + (o, k) => { + o[k] = action; + return o; + }, + { + files: observable, + } as AnnotationsMap, + ), ); } diff --git a/packages/flat-components/src/containers/CloudStorageContainer/store.ts b/packages/flat-components/src/containers/CloudStorageContainer/store.ts index bae15db23fb..a84d6798da2 100644 --- a/packages/flat-components/src/containers/CloudStorageContainer/store.ts +++ b/packages/flat-components/src/containers/CloudStorageContainer/store.ts @@ -21,6 +21,10 @@ export abstract class CloudStorageStore { public isUploadPanelExpand = false; /** UUID of file that is under renaming */ public renamingFileUUID?: FileUUID = ""; + /** Cloud storage single page data returned by the server */ + public cloudStorageSinglePageFiles = 50; + /** In order to avoid multiple calls the fetchMoreCloudStorageData when fetching data */ + public isFetchingFiles = false; /** Display upload panel */ public get isUploadPanelVisible(): boolean { @@ -32,6 +36,11 @@ export abstract class CloudStorageStore { return Number.isNaN(this.totalUsage) ? "" : prettyBytes(this.totalUsage); } + /** get fetch data pagination value of cloudStorage. */ + public get cloudStorageDataPagination(): number { + return Math.ceil(this.files.length / this.cloudStorageSinglePageFiles); + } + /** Uploading -> Error -> Idle -> Success */ public get sortedUploadTasks(): CloudStorageUploadTask[] { return observable.array([ @@ -68,6 +77,7 @@ export abstract class CloudStorageStore { selectedFileUUIDs: observable, isUploadPanelExpand: observable, renamingFileUUID: observable, + isFetchingFiles: observable, isUploadPanelVisible: computed, totalUsageHR: computed, @@ -122,9 +132,6 @@ export abstract class CloudStorageStore { /** User cloud storage files */ public abstract files: CloudStorageFile[]; - /** get fetch data pagination value of cloudStorage. */ - public abstract cloudStorageDataPagination: number; - /** Render file menus item base on fileUUID */ public abstract fileMenus: ( file: CloudStorageFile, @@ -164,12 +171,6 @@ export abstract class CloudStorageStore { /** When file(s) are dropped in the container. */ public abstract onDropFile(files: FileList): void; - /** In order to avoid multiple calls the fetchMoreCloudStorageData when fetching data */ - public abstract isFetchingFiles: boolean; - - /** Cloud storage single page data returned by the server */ - public abstract cloudStorageSinglePageFiles: number; - /** When cloudStorage files is 50 or more, pull up to bottom that loading will fetch more pagination Data of the cloudStorage. */ public abstract fetchMoreCloudStorageData: (page: number) => Promise; } diff --git a/web/flat-web/src/pages/CloudStoragePage/store.tsx b/web/flat-web/src/pages/CloudStoragePage/store.tsx index 389e87edbfd..4eebaed6fd4 100644 --- a/web/flat-web/src/pages/CloudStoragePage/store.tsx +++ b/web/flat-web/src/pages/CloudStoragePage/store.tsx @@ -51,12 +51,9 @@ export class CloudStorageStore extends CloudStorageStoreBase { public insertCourseware: (file: CloudStorageFile) => void; public onCoursewareInserted?: () => void; - public cloudStorageSinglePageFiles = 50; - /** In order to avoid multiple calls the fetchMoreCloudStorageData * when request fetchMoreCloudStorageData after files length is 0 */ public hasMoreFile = true; - public isFetchingFiles = false; // a set of taskUUIDs representing querying tasks private convertStatusManager = new ConvertStatusManager(); @@ -80,15 +77,12 @@ export class CloudStorageStore extends CloudStorageStoreBase { makeObservable(this, { filesMap: observable, - isFetchingFiles: observable, pendingUploadTasks: computed, uploadingUploadTasks: computed, successUploadTasks: computed, failedUploadTasks: computed, files: computed, - currentFilesLength: computed, - cloudStorageDataPagination: computed, fileMenus: action, onItemMenuClick: action, @@ -123,14 +117,6 @@ export class CloudStorageStore extends CloudStorageStoreBase { return observable.array([...this.filesMap.values()]); } - public get currentFilesLength(): number { - return this.filesMap.size; - } - - public get cloudStorageDataPagination(): number { - return Math.ceil(this.currentFilesLength / this.cloudStorageSinglePageFiles); - } - /** Render file menus item base on fileUUID */ public fileMenus = ( file: CloudStorageFileUI, @@ -304,7 +290,7 @@ export class CloudStorageStore extends CloudStorageStoreBase { const cloudStorageTotalPagesFilesCount = this.cloudStorageDataPagination * this.cloudStorageSinglePageFiles; - if (this.currentFilesLength >= cloudStorageTotalPagesFilesCount && this.hasMoreFile) { + if (this.filesMap.size >= cloudStorageTotalPagesFilesCount && this.hasMoreFile) { this.isFetchingFiles = true; try {