refactor: page.post.vue to composition api

packages/client/src/components/page/page.post.vue

@@ -8,84 +8,69 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { defineProps, watch } from 'vue';
 import MkTextarea from '../form/textarea.vue';
 import MkButton from '../ui/button.vue';
 import { apiUrl } from '@/config';
 import * as os from '@/os';
 import { PostBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
-export default defineComponent({
-	components: {
-		MkTextarea,
-		MkButton,
-	},
-	props: {
-		block: {
-			type: Object as PropType<PostBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-			posted: false,
-			posting: false,
-		};
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	},
-	methods: {
-		upload() {
-			const promise = new Promise((ok) => {
-				const canvas = this.hpml.canvases[this.block.canvasId];
-				canvas.toBlob(blob => {
-					const formData = new FormData();
-					formData.append('file', blob);
-					if (this.$store.state.uploadFolder) {
-						formData.append('folderId', this.$store.state.uploadFolder);
-					}
+const props = defineProps<{
+	block: PostBlock;
+	hpml: Hpml;
+}>();
 
-					fetch(apiUrl + '/drive/files/create', {
-						method: 'POST',
-						body: formData,
-						headers: {
-							authorization: `Bearer ${this.$i.token}`,
-						},
-					})
-					.then(response => response.json())
-					.then(f => {
-						ok(f);
-					});
-				});
-			});
-			os.promiseDialog(promise);
-			return promise;
-		},
-		async post() {
-			this.posting = true;
-			const file = this.block.attachCanvasImage ? await this.upload() : null;
-			os.apiWithDialog('notes/create', {
-				text: this.text === '' ? null : this.text,
-				fileIds: file ? [file.id] : undefined,
-			}).then(() => {
-				this.posted = true;
-			});
-		}
-	}
+let text = $ref(props.hpml.interpolate(props.block.text));
+let posted = $ref(false);
+let posting = $ref(false);
+
+watch(props.hpml.vars, () => {
+	text = props.hpml.interpolate(props.block.text);
+}, {
+	deep: true,
 });
+
+function upload(): Promise<any> {
+	const promise = new Promise((ok) => {
+		const canvas = props.hpml.canvases[props.block.canvasId];
+		canvas.toBlob(blob => {
+			const formData = new FormData();
+			formData.append('file', blob);
+			if (defaultStore.state.uploadFolder) {
+				formData.append('folderId', defaultStore.state.uploadFolder);
+			}
+
+			fetch(apiUrl + '/drive/files/create', {
+				method: 'POST',
+				body: formData,
+				headers: {
+					authorization: `Bearer ${$i.token}`,
+				},
+			})
+			.then(response => response.json())
+			.then(f => {
+				ok(f);
+			});
+		});
+	});
+	os.promiseDialog(promise);
+	return promise;
+}
+
+async function post(): Promise<void> {
+	posting = true;
+	const file = props.block.attachCanvasImage ? await upload() : null;
+	os.apiWithDialog('notes/create', {
+		text: text === '' ? null : text,
+		fileIds: file ? [file.id] : undefined,
+	}).then(() => {
+		posted = true;
+	});
+}
 </script>
 
 <style lang="scss" scoped>