refactor: renote-button to composition api

packages/client/src/components/renote-button.vue

@@ -13,8 +13,9 @@
 </button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue';
+import { computed, ref } from 'vue';
+import { Note } from 'misskey-js/built/entities';
 import XDetails from '@/components/users-tooltip.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
@@ -22,72 +23,56 @@ import { $i } from '@/account';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { i18n } from '@/i18n';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	count: number;
-		count: {
+	note: Note;
-			type: Number,
+}>();
-			required: true,
-		},
-		note: {
-			type: Object,
-			required: true,
-		},
-	},
 
-	setup(props) {
+const buttonRef = ref<HTMLElement>();
-		const buttonRef = ref<HTMLElement>();
 
-		const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
+const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i?.id);
 
-		useTooltip(buttonRef, async (showing) => {
+useTooltip(buttonRef, async (showing) => {
-			const renotes = await os.api('notes/renotes', {
+	const renotes = await os.api('notes/renotes', {
-				noteId: props.note.id,
+		noteId: props.note.id,
-				limit: 11,
+		limit: 11,
-			});
+	});
 
-			const users = renotes.map(x => x.user);
+	const users = renotes.map(x => x.user);
 
-			if (users.length < 1) return;
+	if (users.length < 1) return;
 
-			os.popup(XDetails, {
+	os.popup(XDetails, {
-				showing,
+		showing,
-				users,
+		users,
-				count: props.count,
+		count: props.count,
-				targetElement: buttonRef.value,
+		targetElement: buttonRef.value,
-			}, {}, 'closed');
+	}, {}, 'closed');
-		});
-
-		const renote = (viaKeyboard = false) => {
-			pleaseLogin();
-			os.popupMenu([{
-				text: i18n.ts.renote,
-				icon: 'fas fa-retweet',
-				action: () => {
-					os.api('notes/create', {
-						renoteId: props.note.id,
-						visibility: props.note.visibility,
-					});
-				},
-			}, {
-				text: i18n.ts.quote,
-				icon: 'fas fa-quote-right',
-				action: () => {
-					os.post({
-						renote: props.note,
-					});
-				},
-			}], buttonRef.value, {
-				viaKeyboard,
-			});
-		};
-
-		return {
-			buttonRef,
-			canRenote,
-			renote,
-		};
-	},
 });
+
+function renote(viaKeyboard = false): void {
+	pleaseLogin();
+	os.popupMenu([{
+		text: i18n.ts.renote,
+		icon: 'fas fa-retweet',
+		action: () => {
+			os.api('notes/create', {
+				renoteId: props.note.id,
+				visibility: props.note.visibility,
+			});
+		},
+	}, {
+		text: i18n.ts.quote,
+		icon: 'fas fa-quote-right',
+		action: () => {
+			os.post({
+				renote: props.note,
+			});
+		},
+	}], buttonRef.value, {
+		viaKeyboard,
+	});
+}
 </script>
 
 <style lang="scss" scoped>