From 620451122d72eec71ea20eb82488b596d017c9d7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 12 Jun 2018 19:03:57 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB=E3=81=A7?=
 =?UTF-8?q?=E3=82=82=E3=83=8F=E3=83=83=E3=82=B7=E3=83=A5=E3=82=BF=E3=82=B0?=
 =?UTF-8?q?=E3=82=92=E6=A4=9C=E7=B4=A2=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/mobile/script.ts           |  2 +
 src/client/app/mobile/views/pages/tag.vue | 81 +++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 src/client/app/mobile/views/pages/tag.vue

diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 300615ec5..d505b38dc 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -42,6 +42,7 @@ import MkUserLists from './views/pages/user-lists.vue';
 import MkUserList from './views/pages/user-list.vue';
 import MkSettings from './views/pages/settings.vue';
 import MkOthello from './views/pages/othello.vue';
+import MkTag from './views/pages/tag.vue';
 
 Vue.use(MdCard);
 Vue.use(MdButton);
@@ -88,6 +89,7 @@ init((launch) => {
 			{ path: '/i/drive/file/:file', component: MkDrive },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
+			{ path: '/tags/:tag', component: MkTag },
 			{ path: '/othello', name: 'othello', component: MkOthello },
 			{ path: '/othello/:game', component: MkOthello },
 			{ path: '/@:user', component: MkUser },
diff --git a/src/client/app/mobile/views/pages/tag.vue b/src/client/app/mobile/views/pages/tag.vue
new file mode 100644
index 000000000..b4c993e66
--- /dev/null
+++ b/src/client/app/mobile/views/pages/tag.vue
@@ -0,0 +1,81 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:hashtag%{{ $route.params.tag }}</span>
+
+	<main>
+		<p v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p>
+		<mk-notes ref="timeline" :more="existMore ? more : null"/>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+const limit = 20;
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			offset: 0,
+			empty: false
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.fetch();
+		});
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
+			Progress.start();
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/search_by_tag', {
+					limit: limit + 1,
+					offset: this.offset,
+					tag: this.$route.params.tag
+				}).then(notes => {
+					if (notes.length == 0) this.empty = true;
+					if (notes.length == limit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					Progress.done();
+				}, rej);
+			}));
+		},
+		more() {
+			this.offset += limit;
+
+			const promise = (this as any).api('notes/search_by_tag', {
+				limit: limit + 1,
+				offset: this.offset,
+				tag: this.$route.params.tag
+			});
+
+			promise.then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+
+			return promise;
+		}
+	}
+});
+</script>