Refactor emoji-edit-dialog to use Composition API (#8657)

* refactor(client): refactor emoji-edit-dialog to use Composition API

* fix(client): fix editing emoji not updating emoji list

* Apply review suggestions from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

* fix(client): use cached category info instead of making a request

* fix(client): use updateItem in emoji pagination when editing

* fix(client): reimplement removeItem in MkPagination

* Apply review suggestion from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

packages/client/src/components/ui/pagination.vue

@@ -244,6 +244,11 @@ const append = (item: Item): void => {
 	items.value.push(item);
 };
 
+const removeItem = (finder: (item: Item) => boolean) => {
+	const i = items.value.findIndex(finder);
+	items.value.splice(i, 1);
+};
+
 const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => {
 	const i = items.value.findIndex(item => item.id === id);
 	items.value[i] = replacer(items.value[i]);
@@ -276,6 +281,7 @@ defineExpose({
 	fetchMoreAhead,
 	prepend,
 	append,
+	removeItem,
 	updateItem,
 });
 </script>

packages/client/src/pages/admin/emoji-edit-dialog.vue

@@ -27,85 +27,71 @@
 </XModalWindow>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import * as os from '@/os';
 import { unique } from '@/scripts/array';
+import { i18n } from '@/i18n';
+import { emojiCategories } from '@/instance';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	emoji: any,
-		XModalWindow,
+}>();
-		MkButton,
-		MkInput,
-	},
 
-	props: {
+let dialog = $ref(null);
-		emoji: {
+let name: string = $ref(props.emoji.name);
-			required: true,
+let category: string = $ref(props.emoji.category);
+let aliases: string = $ref(props.emoji.aliases.join(' '));
+let categories: string[] = $ref(emojiCategories);
+
+const emit = defineEmits<{
+	(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
+	(ev: 'closed'): void
+}>();
+
+function ok() {
+	update();
+}
+
+async function update() {
+	await os.apiWithDialog('admin/emoji/update', {
+		id: props.emoji.id,
+		name,
+		category,
+		aliases: aliases.split(' '),
+	});
+
+	emit('done', {
+		updated: {
+			id: props.emoji.id,
+			name,
+			category,
+			aliases: aliases.split(' '),
 		}
-	},
+	});
 
-	emits: ['done', 'closed'],
+	dialog.close();
+}
 
-	data() {
+async function del() {
-		return {
+	const { canceled } = await os.confirm({
-			name: this.emoji.name,
+		type: 'warning',
-			category: this.emoji.category,
+		text: i18n.t('removeAreYouSure', { x: name }),
-			aliases: this.emoji.aliases?.join(' '),
+	});
-			categories: [],
+	if (canceled) return;
-		}
-	},
 
-	created() {
+	os.api('admin/emoji/delete', {
-		os.api('meta', { detail: false }).then(({ emojis }) => {
+		id: props.emoji.id
-			this.categories = unique(emojis.map((x: any) => x.category || '').filter((x: string) => x !== ''));
+	}).then(() => {
+		emit('done', {
+			deleted: true
 		});
-	},
+		dialog.close();
-
+	});
-	methods: {
+}
-		ok() {
-			this.update();
-		},
-
-		async update() {
-			await os.apiWithDialog('admin/emoji/update', {
-				id: this.emoji.id,
-				name: this.name,
-				category: this.category,
-				aliases: this.aliases.split(' '),
-			});
-
-			this.$emit('done', {
-				updated: {
-					name: this.name,
-					category: this.category,
-					aliases: this.aliases.split(' '),
-				}
-			});
-			this.$refs.dialog.close();
-		},
-
-		async del() {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.emoji.name }),
-			});
-			if (canceled) return;
-
-			os.api('admin/emoji/delete', {
-				id: this.emoji.id
-			}).then(() => {
-				this.$emit('done', {
-					deleted: true
-				});
-				this.$refs.dialog.close();
-			});
-		},
-	}
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/pages/admin/emojis.vue

@@ -135,12 +135,12 @@ const edit = (emoji) => {
 	}, {
 		done: result => {
 			if (result.updated) {
-				emojisPaginationComponent.value.replaceItem(item => item.id === emoji.id, {
+				emojisPaginationComponent.value.updateItem(result.updated.id, (oldEmoji: any) => ({
-					...emoji,
+					...oldEmoji,
 					...result.updated
-				});
+				}));
 			} else if (result.deleted) {
-				emojisPaginationComponent.value.removeItem(item => item.id === emoji.id);
+				emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
 			}
 		},
 	}, 'closed');