From 298e950e81eb1b78cbf79b629a9ba7cd25b25b99 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 7 Jan 2022 16:34:11 +0900
Subject: [PATCH] refactor(client): use composition api

---
 packages/client/src/pages/favorites.vue | 23 +++-------------
 packages/client/src/pages/featured.vue  | 31 +++++++++-------------
 packages/client/src/pages/mentions.vue  | 29 ++++++++------------
 packages/client/src/pages/messages.vue  | 35 ++++++++++---------------
 4 files changed, 41 insertions(+), 77 deletions(-)

diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 4a2ecb034..588b0fa66 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -1,9 +1,7 @@
 <template>
-<div class="jmelgwjh">
-	<div class="body">
-		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'"/>
-	</div>
-</div>
+<MkSpacer :content-max="800">
+	<XNotes :pagination="pagination" :detail="true" :prop="'note'"/>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
@@ -15,7 +13,7 @@ const pagination = {
 	endpoint: 'i/favorites',
 	limit: 10,
 	params: () => ({
-	})
+	}),
 };
 
 defineExpose({
@@ -26,16 +24,3 @@ defineExpose({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-.jmelgwjh {
-	background: var(--bg);
-
-	> .body {
-		box-sizing: border-box;
-		max-width: 800px;
-		margin: 0 auto;
-		padding: 16px;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/featured.vue b/packages/client/src/pages/featured.vue
index 0844c0952..efa74ca59 100644
--- a/packages/client/src/pages/featured.vue
+++ b/packages/client/src/pages/featured.vue
@@ -4,29 +4,22 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XNotes
-	},
+const pagination = {
+	endpoint: 'notes/featured',
+	limit: 10,
+	offsetMode: true,
+};
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.featured,
-				icon: 'fas fa-fire-alt',
-				bg: 'var(--bg)',
-			},
-			pagination: {
-				endpoint: 'notes/featured',
-				limit: 10,
-				offsetMode: true,
-			},
-		};
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.featured,
+		icon: 'fas fa-fire-alt',
+		bg: 'var(--bg)',
 	},
 });
 </script>
diff --git a/packages/client/src/pages/mentions.vue b/packages/client/src/pages/mentions.vue
index 691d3bd9a..ea23c6a2f 100644
--- a/packages/client/src/pages/mentions.vue
+++ b/packages/client/src/pages/mentions.vue
@@ -4,28 +4,21 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XNotes
-	},
+const pagination = {
+	endpoint: 'notes/mentions',
+	limit: 10,
+};
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.mentions,
-				icon: 'fas fa-at',
-				bg: 'var(--bg)',
-			},
-			pagination: {
-				endpoint: 'notes/mentions',
-				limit: 10,
-			},
-		};
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.mentions,
+		icon: 'fas fa-at',
+		bg: 'var(--bg)',
 	},
 });
 </script>
diff --git a/packages/client/src/pages/messages.vue b/packages/client/src/pages/messages.vue
index 9085af948..448aa0241 100644
--- a/packages/client/src/pages/messages.vue
+++ b/packages/client/src/pages/messages.vue
@@ -4,31 +4,24 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XNotes
-	},
+const pagination = {
+	endpoint: 'notes/mentions',
+	limit: 10,
+	params: () => ({
+		visibility: 'specified'
+	}),
+};
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.directNotes,
-				icon: 'fas fa-envelope',
-				bg: 'var(--bg)',
-			},
-			pagination: {
-				endpoint: 'notes/mentions',
-				limit: 10,
-				params: () => ({
-					visibility: 'specified'
-				})
-			},
-		};
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.directNotes,
+		icon: 'fas fa-envelope',
+		bg: 'var(--bg)',
 	},
 });
 </script>