refactor(client): refactor import-export to use Composition API (#8579)

packages/client/src/pages/settings/import-export.vue

@@ -37,8 +37,8 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineExpose, ref } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import FormSection from '@/components/form/section.vue';
 import FormGroup from '@/components/form/group.vue';
@@ -48,108 +48,80 @@ import { selectFile } from '@/scripts/select-file';
 import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 
-export default defineComponent({
+const excludeMutingUsers = ref(false);
-	components: {
+const excludeInactiveUsers = ref(false);
-		FormSection,
-		FormGroup,
-		FormSwitch,
-		MkButton,
-	},
 
-	emits: ['info'],
+const onExportSuccess = () => {
-
-	setup(props, context) {
-		const INFO = {
-			title: i18n.ts.importAndExport,
-			icon: 'fas fa-boxes',
-			bg: 'var(--bg)',
-		};
-
-		const excludeMutingUsers = ref(false);
-		const excludeInactiveUsers = ref(false);
-
-		const onExportSuccess = () => {
 	os.alert({
 		type: 'info',
 		text: i18n.ts.exportRequested,
 	});
-		};
+};
 
-		const onImportSuccess = () => {
+const onImportSuccess = () => {
 	os.alert({
 		type: 'info',
 		text: i18n.ts.importRequested,
 	});
-		};
+};
 
-		const onError = (e) => {
+const onError = (ev) => {
 	os.alert({
 		type: 'error',
-				text: e.message,
+		text: ev.message,
 	});
-		};
+};
 
-		const exportNotes = () => {
+const exportNotes = () => {
 	os.api('i/export-notes', {}).then(onExportSuccess).catch(onError);
-		};
+};
 
-		const exportFollowing = () => {
+const exportFollowing = () => {
 	os.api('i/export-following', {
 		excludeMuting: excludeMutingUsers.value,
 		excludeInactive: excludeInactiveUsers.value,
 	})
 	.then(onExportSuccess).catch(onError);
-		};
+};
 
-		const exportBlocking = () => {
+const exportBlocking = () => {
 	os.api('i/export-blocking', {}).then(onExportSuccess).catch(onError);
-		};
+};
 
-		const exportUserLists = () => {
+const exportUserLists = () => {
 	os.api('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
-		};
+};
 
-		const exportMuting = () => {
+const exportMuting = () => {
 	os.api('i/export-mute', {}).then(onExportSuccess).catch(onError);
-		};
+};
 
-		const importFollowing = async (ev) => {
+const importFollowing = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
 	os.api('i/import-following', { fileId: file.id }).then(onImportSuccess).catch(onError);
-		};
+};
 
-		const importUserLists = async (ev) => {
+const importUserLists = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
 	os.api('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
-		};
+};
 
-		const importMuting = async (ev) => {
+const importMuting = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
 	os.api('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
-		};
+};
 
-		const importBlocking = async (ev) => {
+const importBlocking = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
 	os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
-		};
+};
 
-		return {
+defineExpose({
-			[symbols.PAGE_INFO]: INFO,
+	[symbols.PAGE_INFO]: {
-			excludeMutingUsers,
+		title: i18n.ts.importAndExport,
-			excludeInactiveUsers,
+		icon: 'fas fa-boxes',
-
+		bg: 'var(--bg)',
-			exportNotes,
+	}
-			exportFollowing,
-			exportBlocking,
-			exportUserLists,
-			exportMuting,
-
-			importFollowing,
-			importUserLists,
-			importMuting,
-			importBlocking,
-		};
-	},
 });
 </script>