Skip to content

Commit a0ce840

Browse files
Cheerego7Cheerego7
authored
fix(storybook): add mock data to the cloudStorageContainer component (#1460)
1 parent d5b0996 commit a0ce840

File tree

4 files changed

+61
-46
lines changed

4 files changed

+61
-46
lines changed

‎desktop/renderer-app/src/pages/CloudStoragePage/store.tsx

+2-16
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,9 @@ export class CloudStorageStore extends CloudStorageStoreBase {
5151
public insertCourseware: (file: CloudStorageFile) => void;
5252
public onCoursewareInserted?: () => void;
5353

54-
public cloudStorageSinglePageFiles = 50;
55-
5654
/** In order to avoid multiple calls the fetchMoreCloudStorageData
5755
* when request fetchMoreCloudStorageData after files length is 0 */
58-
public hasMoreFile = false;
59-
public isFetchingFiles = false;
56+
public hasMoreFile = true;
6057

6158
// a set of taskUUIDs representing querying tasks
6259
private convertStatusManager = new ConvertStatusManager();
@@ -80,15 +77,12 @@ export class CloudStorageStore extends CloudStorageStoreBase {
8077

8178
makeObservable(this, {
8279
filesMap: observable,
83-
isFetchingFiles: observable,
8480

8581
pendingUploadTasks: computed,
8682
uploadingUploadTasks: computed,
8783
successUploadTasks: computed,
8884
failedUploadTasks: computed,
8985
files: computed,
90-
currentFilesLength: computed,
91-
cloudStorageDataPagination: computed,
9286

9387
fileMenus: action,
9488
onItemMenuClick: action,
@@ -123,14 +117,6 @@ export class CloudStorageStore extends CloudStorageStoreBase {
123117
return observable.array([...this.filesMap.values()]);
124118
}
125119

126-
public get currentFilesLength(): number {
127-
return this.filesMap.size;
128-
}
129-
130-
public get cloudStorageDataPagination(): number {
131-
return Math.ceil(this.currentFilesLength / this.cloudStorageSinglePageFiles);
132-
}
133-
134120
/** Render file menus item base on fileUUID */
135121
public fileMenus = (
136122
file: CloudStorageFileUI,
@@ -308,7 +294,7 @@ export class CloudStorageStore extends CloudStorageStoreBase {
308294
const cloudStorageTotalPagesFilesCount =
309295
this.cloudStorageDataPagination * this.cloudStorageSinglePageFiles;
310296

311-
if (this.currentFilesLength >= cloudStorageTotalPagesFilesCount && this.hasMoreFile) {
297+
if (this.filesMap.size >= cloudStorageTotalPagesFilesCount && this.hasMoreFile) {
312298
this.isFetchingFiles = true;
313299

314300
try {

‎packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx

+48-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from "react";
22
import { Story, Meta, ArgTypes } from "@storybook/react";
33
import Chance from "chance";
44
import faker from "faker";
5-
import { action, AnnotationsMap, makeObservable } from "mobx";
5+
import { action, AnnotationsMap, makeObservable, observable } from "mobx";
66
import { Modal } from "antd";
77
import { CloudStorageContainer, CloudStorageStore } from "./index";
88
import { CloudStorageUploadTask } from "../../components/CloudStorage/types";
@@ -34,6 +34,7 @@ const fakeStoreImplProps = [
3434
"onNewFileName",
3535
"addExternalFile",
3636
"onDropFile",
37+
"fetchMoreCloudStorageData",
3738
] as const;
3839

3940
type FakeStoreImplProps = typeof fakeStoreImplProps[number];
@@ -51,6 +52,7 @@ class FakeStore extends CloudStorageStore {
5152
public onNewFileName: FakeStoreConfig["onNewFileName"];
5253
public addExternalFile;
5354
public onDropFile: FakeStoreConfig["onDropFile"];
55+
public fetchMoreCloudStorageData;
5456

5557
public pendingUploadTasks: CloudStorageStore["pendingUploadTasks"] = [];
5658
public uploadingUploadTasks: CloudStorageStore["uploadingUploadTasks"] = [];
@@ -61,7 +63,7 @@ class FakeStore extends CloudStorageStore {
6163
public constructor(config: FakeStoreConfig) {
6264
super();
6365

64-
this.files = Array(25)
66+
this.files = Array(this.cloudStorageSinglePageFiles)
6567
.fill(0)
6668
.map(() => ({
6769
fileUUID: faker.datatype.uuid(),
@@ -154,13 +156,53 @@ class FakeStore extends CloudStorageStore {
154156
});
155157
}
156158
};
159+
this.fetchMoreCloudStorageData = async (page: number): Promise<void> => {
160+
if (this.isFetchingFiles || this.files.length > 300) {
161+
console.warn("the cloud storage files is enough");
162+
return Promise.resolve();
163+
}
164+
165+
const cloudStorageTotalPagesFilesCount =
166+
this.cloudStorageDataPagination * this.cloudStorageSinglePageFiles;
167+
168+
if (this.files.length >= cloudStorageTotalPagesFilesCount) {
169+
this.isFetchingFiles = true;
170+
171+
const newFilesData = Array(this.cloudStorageSinglePageFiles * page)
172+
.fill(0)
173+
.map(() => ({
174+
fileUUID: faker.datatype.uuid(),
175+
fileName: faker.random.words() + "." + faker.system.commonFileExt(),
176+
fileSize: chance.integer({ min: 0, max: 1000 * 1000 * 100 }),
177+
convert: chance.pickone(["idle", "error", "success", "converting"]),
178+
createAt: faker.date.past(),
179+
}));
180+
181+
for (const { fileName, fileSize } of newFilesData) {
182+
this.files.push({
183+
fileUUID: faker.datatype.uuid(),
184+
fileName: fileName,
185+
fileSize: fileSize,
186+
convert: "idle",
187+
createAt: faker.date.past(),
188+
});
189+
}
190+
191+
this.isFetchingFiles = false;
192+
}
193+
};
157194

158195
makeObservable(
159196
this,
160-
fakeStoreImplProps.reduce((o, k) => {
161-
o[k] = action;
162-
return o;
163-
}, {} as AnnotationsMap<this, never>),
197+
fakeStoreImplProps.reduce(
198+
(o, k) => {
199+
o[k] = action;
200+
return o;
201+
},
202+
{
203+
files: observable,
204+
} as AnnotationsMap<this, never>,
205+
),
164206
);
165207
}
166208

‎packages/flat-components/src/containers/CloudStorageContainer/store.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ export abstract class CloudStorageStore {
2121
public isUploadPanelExpand = false;
2222
/** UUID of file that is under renaming */
2323
public renamingFileUUID?: FileUUID = "";
24+
/** Cloud storage single page data returned by the server */
25+
public cloudStorageSinglePageFiles = 50;
26+
/** In order to avoid multiple calls the fetchMoreCloudStorageData when fetching data */
27+
public isFetchingFiles = false;
2428

2529
/** Display upload panel */
2630
public get isUploadPanelVisible(): boolean {
@@ -32,6 +36,11 @@ export abstract class CloudStorageStore {
3236
return Number.isNaN(this.totalUsage) ? "" : prettyBytes(this.totalUsage);
3337
}
3438

39+
/** get fetch data pagination value of cloudStorage. */
40+
public get cloudStorageDataPagination(): number {
41+
return Math.ceil(this.files.length / this.cloudStorageSinglePageFiles);
42+
}
43+
3544
/** Uploading -> Error -> Idle -> Success */
3645
public get sortedUploadTasks(): CloudStorageUploadTask[] {
3746
return observable.array([
@@ -68,6 +77,7 @@ export abstract class CloudStorageStore {
6877
selectedFileUUIDs: observable,
6978
isUploadPanelExpand: observable,
7079
renamingFileUUID: observable,
80+
isFetchingFiles: observable,
7181

7282
isUploadPanelVisible: computed,
7383
totalUsageHR: computed,
@@ -122,9 +132,6 @@ export abstract class CloudStorageStore {
122132
/** User cloud storage files */
123133
public abstract files: CloudStorageFile[];
124134

125-
/** get fetch data pagination value of cloudStorage. */
126-
public abstract cloudStorageDataPagination: number;
127-
128135
/** Render file menus item base on fileUUID */
129136
public abstract fileMenus: (
130137
file: CloudStorageFile,
@@ -164,12 +171,6 @@ export abstract class CloudStorageStore {
164171
/** When file(s) are dropped in the container. */
165172
public abstract onDropFile(files: FileList): void;
166173

167-
/** In order to avoid multiple calls the fetchMoreCloudStorageData when fetching data */
168-
public abstract isFetchingFiles: boolean;
169-
170-
/** Cloud storage single page data returned by the server */
171-
public abstract cloudStorageSinglePageFiles: number;
172-
173174
/** When cloudStorage files is 50 or more, pull up to bottom that loading will fetch more pagination Data of the cloudStorage. */
174175
public abstract fetchMoreCloudStorageData: (page: number) => Promise<void>;
175176
}

‎web/flat-web/src/pages/CloudStoragePage/store.tsx

+1-15
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,9 @@ export class CloudStorageStore extends CloudStorageStoreBase {
5151
public insertCourseware: (file: CloudStorageFile) => void;
5252
public onCoursewareInserted?: () => void;
5353

54-
public cloudStorageSinglePageFiles = 50;
55-
5654
/** In order to avoid multiple calls the fetchMoreCloudStorageData
5755
* when request fetchMoreCloudStorageData after files length is 0 */
5856
public hasMoreFile = true;
59-
public isFetchingFiles = false;
6057

6158
// a set of taskUUIDs representing querying tasks
6259
private convertStatusManager = new ConvertStatusManager();
@@ -80,15 +77,12 @@ export class CloudStorageStore extends CloudStorageStoreBase {
8077

8178
makeObservable(this, {
8279
filesMap: observable,
83-
isFetchingFiles: observable,
8480

8581
pendingUploadTasks: computed,
8682
uploadingUploadTasks: computed,
8783
successUploadTasks: computed,
8884
failedUploadTasks: computed,
8985
files: computed,
90-
currentFilesLength: computed,
91-
cloudStorageDataPagination: computed,
9286

9387
fileMenus: action,
9488
onItemMenuClick: action,
@@ -123,14 +117,6 @@ export class CloudStorageStore extends CloudStorageStoreBase {
123117
return observable.array([...this.filesMap.values()]);
124118
}
125119

126-
public get currentFilesLength(): number {
127-
return this.filesMap.size;
128-
}
129-
130-
public get cloudStorageDataPagination(): number {
131-
return Math.ceil(this.currentFilesLength / this.cloudStorageSinglePageFiles);
132-
}
133-
134120
/** Render file menus item base on fileUUID */
135121
public fileMenus = (
136122
file: CloudStorageFileUI,
@@ -304,7 +290,7 @@ export class CloudStorageStore extends CloudStorageStoreBase {
304290
const cloudStorageTotalPagesFilesCount =
305291
this.cloudStorageDataPagination * this.cloudStorageSinglePageFiles;
306292

307-
if (this.currentFilesLength >= cloudStorageTotalPagesFilesCount && this.hasMoreFile) {
293+
if (this.filesMap.size >= cloudStorageTotalPagesFilesCount && this.hasMoreFile) {
308294
this.isFetchingFiles = true;
309295

310296
try {

0 commit comments

Comments
 (0)