From c81c4c224aa2ebe44f69875b80a272152a2401d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?=
 <syuilotan@yahoo.co.jp>
Date: Sat, 17 Feb 2018 09:19:16 +0900
Subject: [PATCH] wip

---
 src/web/app/mobile/tags/page/search.tag   | 26 ---------
 src/web/app/mobile/tags/search-posts.tag  | 42 --------------
 src/web/app/mobile/tags/search.tag        | 16 ------
 src/web/app/mobile/views/pages/search.vue | 70 +++++++++++++++++++++++
 4 files changed, 70 insertions(+), 84 deletions(-)
 delete mode 100644 src/web/app/mobile/tags/page/search.tag
 delete mode 100644 src/web/app/mobile/tags/search-posts.tag
 delete mode 100644 src/web/app/mobile/tags/search.tag
 create mode 100644 src/web/app/mobile/views/pages/search.vue

diff --git a/src/web/app/mobile/tags/page/search.tag b/src/web/app/mobile/tags/page/search.tag
deleted file mode 100644
index 44af3a2ad..000000000
--- a/src/web/app/mobile/tags/page/search.tag
+++ /dev/null
@@ -1,26 +0,0 @@
-<mk-search-page>
-	<mk-ui ref="ui">
-		<mk-search ref="search" query={ parent.opts.query }/>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		import ui from '../../scripts/ui-event';
-		import Progress from '../../../common/scripts/loading';
-
-		this.on('mount', () => {
-			document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
-			// TODO: クエリをHTMLエスケープ
-			ui.trigger('title', '%fa:search%' + this.opts.query);
-			document.documentElement.style.background = '#313a42';
-
-			Progress.start();
-
-			this.$refs.ui.refs.search.on('loaded', () => {
-				Progress.done();
-			});
-		});
-	</script>
-</mk-search-page>
diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag
deleted file mode 100644
index 7b4d73f2d..000000000
--- a/src/web/app/mobile/tags/search-posts.tag
+++ /dev/null
@@ -1,42 +0,0 @@
-<mk-search-posts>
-	<mk-timeline init={ init } more={ more } empty={ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', query) }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 8px auto
-			max-width 500px
-			width calc(100% - 16px)
-			background #fff
-			border-radius 8px
-			box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
-
-			@media (min-width 500px)
-				margin 16px auto
-				width calc(100% - 32px)
-	</style>
-	<script lang="typescript">
-		import parse from '../../common/scripts/parse-search-query';
-
-		this.mixin('api');
-
-		this.limit = 30;
-		this.offset = 0;
-
-		this.query = this.opts.query;
-
-		this.init = new Promise((res, rej) => {
-			this.$root.$data.os.api('posts/search', parse(this.query)).then(posts => {
-				res(posts);
-				this.$emit('loaded');
-			});
-		});
-
-		this.more = () => {
-			this.offset += this.limit;
-			return this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
-				limit: this.limit,
-				offset: this.offset
-			}));
-		};
-	</script>
-</mk-search-posts>
diff --git a/src/web/app/mobile/tags/search.tag b/src/web/app/mobile/tags/search.tag
deleted file mode 100644
index 61f3093e0..000000000
--- a/src/web/app/mobile/tags/search.tag
+++ /dev/null
@@ -1,16 +0,0 @@
-<mk-search>
-	<mk-search-posts ref="posts" query={ query }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		this.query = this.opts.query;
-
-		this.on('mount', () => {
-			this.$refs.posts.on('loaded', () => {
-				this.$emit('loaded');
-			});
-		});
-	</script>
-</mk-search>
diff --git a/src/web/app/mobile/views/pages/search.vue b/src/web/app/mobile/views/pages/search.vue
new file mode 100644
index 000000000..89710d7c2
--- /dev/null
+++ b/src/web/app/mobile/views/pages/search.vue
@@ -0,0 +1,70 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:search% {{ query }}</span>
+	<main v-if="!fetching">
+		<mk-posts :class="$style.posts">
+			<span v-if="posts.length == 0">{{ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', query) }}</span>
+			<button v-if="canFetchMore" @click="more" :disabled="fetching" slot="tail">
+				<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
+				<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
+			</button>
+		</mk-posts>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+import parse from '../../../common/scripts/parse-search-query';
+
+const limit = 30;
+
+export default Vue.extend({
+	props: ['query'],
+	data() {
+		return {
+			fetching: true,
+			posts: [],
+			offset: 0
+		};
+	},
+	mounted() {
+		document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.query} | Misskey`;
+		document.documentElement.style.background = '#313a42';
+
+		Progress.start();
+
+		this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
+			limit: limit
+		})).then(posts => {
+			this.posts = posts;
+			this.fetching = false;
+			Progress.done();
+		});
+	},
+	methods: {
+		more() {
+			this.offset += limit;
+			return this.$root.$data.os.api('posts/search', Object.assign({}, parse(this.query), {
+				limit: limit,
+				offset: this.offset
+			}));
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.posts
+	margin 8px auto
+	max-width 500px
+	width calc(100% - 16px)
+	background #fff
+	border-radius 8px
+	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+	@media (min-width 500px)
+		margin 16px auto
+		width calc(100% - 32px)
+</style>