Refactor clip page to Composition API (#8822)

* Refactor clip page to use Composition API

* Refactor clip page

* Refactor clip page

* Refactor clip page

packages/client/src/pages/clip.vue

@@ -15,121 +15,90 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import MkContainer from '@/components/ui/container.vue';
-import XPostForm from '@/components/post-form.vue';
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import * as misskey from 'misskey-js';
 import XNotes from '@/components/notes.vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 
-export default defineComponent({
-	components: {
-		MkContainer,
-		XPostForm,
-		XNotes,
-	},
+const props = defineProps<{
+	clipId: string,
+}>();
 
-	props: {
-		clipId: {
-			type: String,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.clip ? {
-				title: this.clip.name,
-				icon: 'fas fa-paperclip',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-ellipsis-h',
-					handler: this.menu
-				}],
-			} : null),
-			clip: null,
-			pagination: {
+let clip: misskey.entities.Clip = $ref<misskey.entities.Clip>();
+const pagination = {
 	endpoint: 'clips/notes' as const,
 	limit: 10,
 	params: computed(() => ({
-					clipId: this.clipId,
-				}))
-			},
-		};
-	},
+		clipId: props.clipId,
+	})),
+};
 
-	computed: {
-		isOwned(): boolean {
-			return this.$i && this.clip && (this.$i.id === this.clip.userId);
-		}
-	},
+const isOwned: boolean | null = $computed<boolean | null>(() => $i && clip && ($i.id === clip.userId));
 
-	watch: {
-		clipId: {
-			async handler() {
-				this.clip = await os.api('clips/show', {
-					clipId: this.clipId,
+watch(() => props.clipId, async () => {
+	clip = await os.api('clips/show', {
+		clipId: props.clipId,
 	});
-			},
-			immediate: true
-		}
-	},
+}, {
+	immediate: true,
+}); 
 
-	created() {
-
-	},
-
-	methods: {
-		menu(ev) {
-			os.popupMenu([this.isOwned ? {
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => clip ? {
+		title: clip.name,
+		icon: 'fas fa-paperclip',
+		bg: 'var(--bg)',
+		actions: isOwned ? [{
 			icon: 'fas fa-pencil-alt',
-				text: this.$ts.edit,
-				action: async () => {
-					const { canceled, result } = await os.form(this.clip.name, {
+			text: i18n.ts.edit,
+			handler: async (): Promise<void> => {
+				const { canceled, result } = await os.form(clip.name, {
 					name: {
 						type: 'string',
-							label: this.$ts.name,
-							default: this.clip.name
+						label: i18n.ts.name,
+						default: clip.name,
 					},
 					description: {
 						type: 'string',
 						required: false,
 						multiline: true,
-							label: this.$ts.description,
-							default: this.clip.description
+						label: i18n.ts.description,
+						default: clip.description,
 					},
 					isPublic: {
 						type: 'boolean',
-							label: this.$ts.public,
-							default: this.clip.isPublic
-						}
+						label: i18n.ts.public,
+						default: clip.isPublic,
+					},
 				});
 				if (canceled) return;
 
 				os.apiWithDialog('clips/update', {
-						clipId: this.clip.id,
-						...result
+					clipId: clip.id,
+					...result,
 				});
-				}
-			} : undefined, this.isOwned ? {
+			},
+		}, {
 			icon: 'fas fa-trash-alt',
-				text: this.$ts.delete,
+			text: i18n.ts.delete,
 			danger: true,
-				action: async () => {
+			handler: async (): Promise<void> => {
 				const { canceled } = await os.confirm({
 					type: 'warning',
-						text: this.$t('deleteAreYouSure', { x: this.clip.name }),
+					text: i18n.t('deleteAreYouSure', { x: clip.name }),
 				});
 				if (canceled) return;
 
 				await os.apiWithDialog('clips/delete', {
-						clipId: this.clip.id,
+					clipId: clip.id,
 				});
-				}
-			} : undefined], ev.currentTarget ?? ev.target);
-		}
-	}
+			},
+		}] : [],
+	} : null),
 });
 </script>