From fe808490bdcb18ae7344b86507fe4d0df3952422 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Tue, 15 Oct 2024 18:53:10 +0200
Subject: [PATCH] (ts) migrate <CircleMentions> to composition API with
 typescript

---
 components/CircleMentions.vue | 39 ++++++++++++++---------------------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/components/CircleMentions.vue b/components/CircleMentions.vue
index 81411462f..a7aa9bb34 100644
--- a/components/CircleMentions.vue
+++ b/components/CircleMentions.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+const { $translator: translator } = useNuxtApp();
+
+const { data: circleMentions } = useFetch<Record<string, Record<string, string>>>(
+    '/api/profile/my-circle-mentions',
+    { lazy: true },
+);
+
+const dialogue = useDialogue();
+const removeSelf = async (username: string) => {
+    await dialogue.confirm(translator.translate('profile.circles.removeSelf.confirm', { username }), 'warning');
+    await dialogue.postWithAlertOnError(`/api/profile/remove-self-circle/${encodeURIComponent(username)}`);
+    window.location.reload();
+};
+</script>
+
 <template>
     <Loading :value="circleMentions">
         <p class="small text-muted">
@@ -41,26 +57,3 @@
         </table>
     </Loading>
 </template>
-
-<script>
-import { useFetch } from 'nuxt/app';
-
-import useDialogue from '../composables/useDialogue.ts';
-
-export default {
-    setup() {
-        const { data: circleMentions } = useFetch('/api/profile/my-circle-mentions', { lazy: true });
-        return {
-            circleMentions,
-            dialogue: useDialogue(),
-        };
-    },
-    methods: {
-        async removeSelf(username) {
-            await this.dialogue.confirm(this.$t('profile.circles.removeSelf.confirm', { username }), 'warning');
-            await this.dialogue.postWithAlertOnError(`/api/profile/remove-self-circle/${encodeURIComponent(username)}`);
-            window.location.reload();
-        },
-    },
-};
-</script>