[Client] Implement more file fetching and some refactors

3 files changed, 70 insertions, 20 deletions

diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag
index 2044a5ea90..05d4c335b2 100644
--- a/src/web/app/desktop/tags/drive/browser.tag
+++ b/src/web/app/desktop/tags/drive/browser.tag
@@ -21,7 +21,7 @@
 				<virtual each={ file in files }>
 					<mk-drive-browser-file class="file" file={ file }></mk-drive-browser-file>
 				</virtual>
-				<button if={ moreFiles }>もっと読み込む</button>
+				<button if={ moreFiles } onclick={ fetchMoreFiles }>もっと読み込む</button>
 			</div>
 			<div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }>
 				<p if={ draghover }>ドロップですか？いいですよ、ボクはカワイイですからね</p>
@@ -287,7 +287,7 @@
 			if (this.opts.folder && this.opts.folder != '') {
 				this.move(this.opts.folder);
 			} else {
-				this.load();
+				this.fetch();
 			}
 		});
 
@@ -567,7 +567,7 @@
 				if (folder.parent) dive(folder.parent);
 
 				this.update();
-				this.load();
+				this.fetch();
 			});
 		};
 
@@ -636,10 +636,10 @@
 				folder: null,
 				hierarchyFolders: []
 			});
-			this.load();
+			this.fetch();
 		};
 
-		this.load = () => {
+		this.fetch = () => {
 			this.update({
 				folders: [],
 				files: [],
@@ -694,5 +694,30 @@
 			};
 		};
 
+		this.fetchMoreFiles = () => {
+			this.update({
+				fetching: true
+			});
+
+			const max = 30;
+
+			// ファイル一覧取得
+			this.api('drive/files', {
+				folder_id: this.folder ? this.folder.id : null,
+				limit: max + 1
+			}).then(files => {
+				if (files.length == max + 1) {
+					this.moreFiles = true;
+					files.pop();
+				} else {
+					this.moreFiles = false;
+				}
+				files.forEach(this.appendFile);
+				this.update({
+					fetching: false
+				});
+			});
+		};
+
 	</script>
 </mk-drive-browser>
diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index e3b41ab641..de1abf3da7 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -14,7 +14,7 @@
 			<p>{ file.name }</p>
 		</virtual>
 	</nav>
-	<div class="browser { loading: fetching }" if={ file == null }>
+	<div class="browser { fetching: fetching }" if={ file == null }>
 		<div class="folders" if={ folders.length > 0 }>
 			<virtual each={ folder in folders }>
 				<mk-drive-folder folder={ folder }></mk-drive-folder>
@@ -25,13 +25,13 @@
 			<virtual each={ file in files }>
 				<mk-drive-file file={ file }></mk-drive-file>
 			</virtual>
-			<p if={ moreFiles }>もっと読み込む</p>
+			<p if={ moreFiles } onclick={ fetchMoreFiles }>もっと読み込む</p>
 		</div>
 		<div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }>
 			<p if={ !folder == null }>ドライブには何もありません。</p>
 			<p if={ folder != null }>このフォルダーは空です</p>
 		</div>
-		<div class="loading" if={ fetching }>
+		<div class="fetching" if={ fetching }>
 			<div class="spinner">
 				<div class="dot1"></div>
 				<div class="dot2"></div>
@@ -71,7 +71,7 @@
 					opacity 0.5
 
 			> .browser
-				&.loading
+				&.fetching
 					opacity 0.5
 
 				> .folders
@@ -91,7 +91,7 @@
 					> p
 						margin 0
 
-				> .loading
+				> .fetching
 					.spinner
 						margin 100px auto
 						width 40px
@@ -160,7 +160,7 @@
 			} else if (this.opts.file && this.opts.file != '') {
 				this.cf(this.opts.file, true);
 			} else {
-				this.load();
+				this.fetch();
 			}
 		});
 
@@ -223,7 +223,7 @@
 
 				this.update();
 				this.trigger('open-folder', this.folder, silent);
-				this.load();
+				this.fetch();
 			});
 		};
 
@@ -290,11 +290,11 @@
 					hierarchyFolders: []
 				});
 				this.trigger('move-root');
-				this.load();
+				this.fetch();
 			}
 		};
 
-		this.load = () => {
+		this.fetch = () => {
 			this.update({
 				folders: [],
 				files: [],
@@ -303,7 +303,7 @@
 				fetching: true
 			});
 
-			this.trigger('begin-load');
+			this.trigger('begin-fetch');
 
 			let fetchedFolders = null;
 			let fetchedFiles = null;
@@ -346,15 +346,40 @@
 						fetching: false
 					});
 					// 一連の読み込みが完了したイベントを発行
-					this.trigger('loaded');
+					this.trigger('fetched');
 				} else {
 					flag = true;
 					// 一連の読み込みが半分完了したイベントを発行
-					this.trigger('load-mid');
+					this.trigger('fetch-mid');
 				}
 			};
 		};
 
+		this.fetchMoreFiles = () => {
+			this.update({
+				fetching: true
+			});
+
+			const max = 30;
+
+			// ファイル一覧取得
+			this.api('drive/files', {
+				folder_id: this.folder ? this.folder.id : null,
+				limit: max + 1
+			}).then(files => {
+				if (files.length == max + 1) {
+					this.moreFiles = true;
+					files.pop();
+				} else {
+					this.moreFiles = false;
+				}
+				files.forEach(this.appendFile);
+				this.update({
+					fetching: false
+				});
+			});
+		};
+
 		this.chooseFile = file => {
 			if (this.isSelectMode) {
 				if (this.selectedFiles.some(f => f.id == file.id)) {
diff --git a/src/web/app/mobile/tags/page/drive.tag b/src/web/app/mobile/tags/page/drive.tag
index a064a05598..577f47ec78 100644
--- a/src/web/app/mobile/tags/page/drive.tag
+++ b/src/web/app/mobile/tags/page/drive.tag
@@ -14,15 +14,15 @@
 			document.title = 'Misskey Drive';
 			this.ui.trigger('title', '<i class="fa fa-cloud"></i>ドライブ');
 
-			this.refs.ui.refs.browser.on('begin-load', () => {
+			this.refs.ui.refs.browser.on('begin-fetch', () => {
 				this.Progress.start();
 			});
 
-			this.refs.ui.refs.browser.on('loaded-mid', () => {
+			this.refs.ui.refs.browser.on('fetched-mid', () => {
 				this.Progress.set(0.5);
 			});
 
-			this.refs.ui.refs.browser.on('loaded', () => {
+			this.refs.ui.refs.browser.on('fetched', () => {
 				this.Progress.done();
 			});