From 5db59ba5603529b14d86be6adb6525209fb8809f Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 31 Jul 2022 14:04:29 +0200
Subject: [PATCH] refactor pages/emojis.category.vue to composition API

---
 packages/client/src/pages/emojis.category.vue | 88 ++++---------------
 1 file changed, 18 insertions(+), 70 deletions(-)

diff --git a/packages/client/src/pages/emojis.category.vue b/packages/client/src/pages/emojis.category.vue
index 6d915c584..9b4c38842 100644
--- a/packages/client/src/pages/emojis.category.vue
+++ b/packages/client/src/pages/emojis.category.vue
@@ -1,98 +1,46 @@
 <template>
 <div class="driuhtrh">
 	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="$ts.search">
+		<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
 			<template #prefix><i class="fas fa-search"></i></template>
 		</MkInput>
-
-		<!-- たくさんあると邪魔
-		<div class="tags">
-			<span class="tag _button" v-for="tag in tags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span>
-		</div>
-		-->
 	</div>
 
 	<MkFolder v-if="searchEmojis" class="emojis">
-		<template #header>{{ $ts.searchResult }}</template>
+		<template #header>{{ i18n.ts.searchResult }}</template>
 		<div class="zuvgdzyt">
 			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
 		</div>
 	</MkFolder>
 	
-	<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
-		<template #header>{{ category || $ts.other }}</template>
+	<MkFolder v-for="category in emojiCategories" :key="category" class="emojis">
+		<template #header>{{ category || i18n.ts.other }}</template>
 		<div class="zuvgdzyt">
-			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
+			<XEmoji v-for="emoji in instance.emojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
 		</div>
 	</MkFolder>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-import MkButton from '@/components/ui/button.vue';
+<script lang="ts" setup>
+import { watch } from 'vue';
 import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
 import MkFolder from '@/components/ui/folder.vue';
-import MkTab from '@/components/tab.vue';
-import * as os from '@/os';
-import { emojiCategories, emojiTags } from '@/instance';
+import { i18n } from '@/i18n';
+import { emojiCategories, instance } from '@/instance';
 import XEmoji from './emojis.emoji.vue';
 
-export default defineComponent({
-	components: {
-		MkButton,
-		MkInput,
-		MkSelect,
-		MkFolder,
-		MkTab,
-		XEmoji,
-	},
+let q: string = $ref('');
+let searchEmojis: null | Record<string, any>[] = $ref(null);
 
-	data() {
-		return {
-			q: '',
-			customEmojiCategories: emojiCategories,
-			customEmojis: this.$instance.emojis,
-			tags: emojiTags,
-			selectedTags: new Set(),
-			searchEmojis: null,
-		};
-	},
-
-	watch: {
-		q() { this.search(); },
-		selectedTags: {
-			handler() {
-				this.search();
-			},
-			deep: true
-		},
-	},
-
-	methods: {
-		search() {
-			if ((this.q === '' || this.q == null) && this.selectedTags.size === 0) {
-				this.searchEmojis = null;
-				return;
-			}
-
-			if (this.selectedTags.size === 0) {
-				this.searchEmojis = this.customEmojis.filter(emoji => emoji.name.includes(this.q) || emoji.aliases.includes(this.q));
-			} else {
-				this.searchEmojis = this.customEmojis.filter(emoji => (emoji.name.includes(this.q) || emoji.aliases.includes(this.q)) && [...this.selectedTags].every(t => emoji.aliases.includes(t)));
-			}
-		},
-
-		toggleTag(tag) {
-			if (this.selectedTags.has(tag)) {
-				this.selectedTags.delete(tag);
-			} else {
-				this.selectedTags.add(tag);
-			}
-		}
+function search() {
+	if (q === '') {
+		searchEmojis = null;
+	} else {
+		searchEmojis = instance.emojis.filter(emoji => emoji.name.includes(this.q) || emoji.aliases.includes(this.q));
 	}
-});
+}
+watch(q, search);
 </script>
 
 <style lang="scss" scoped>