From 670c229cd0d5d9b6ec3d98fb627aeae70d488ea3 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Thu, 28 Jul 2022 11:58:32 +0200
Subject: [PATCH] refactor pages/follow.vue to composition API

---
 packages/client/src/pages/follow.vue | 110 +++++++++++++++------------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue
index 0c1cb7733..08c41712d 100644
--- a/packages/client/src/pages/follow.vue
+++ b/packages/client/src/pages/follow.vue
@@ -1,65 +1,75 @@
 <template>
-<div class="mk-follow-page">
-</div>
+<!-- This page does not really have any content, it is mainly processing stuff -->
+<MkLoading v-if="state == 'loading'"/>
+<MkError v-if="state == 'error'" :final="finalError" @retry="doIt"/>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
 import * as os from '@/os';
 import { mainRouter } from '@/router';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	created() {
-		const acct = new URL(location.href).searchParams.get('acct');
-		if (acct == null) return;
+let state: 'loading' | 'error' | 'done' = $ref('loading');
+let finalError: boolean = $ref(false);
 
-		let promise;
+async function follow(user) {
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.t('followConfirm', { name: user.name || user.username }),
+	});
 
-		if (acct.startsWith('https://')) {
-			promise = os.api('ap/show', {
-				uri: acct,
-			});
-			promise.then(res => {
-				if (res.type === 'User') {
-					this.follow(res.object);
-				} else if (res.type === 'Note') {
-					mainRouter.push(`/notes/${res.object.id}`);
-				} else {
-					os.alert({
-						type: 'error',
-						text: 'Not a user',
-					}).then(() => {
-						window.close();
-					});
-				}
-			});
-		} else {
-			promise = os.api('users/show', Acct.parse(acct));
-			promise.then(user => {
-				this.follow(user);
-			});
-		}
+	if (canceled) {
+		window.close();
+		return;
+	}
 
-		os.promiseDialog(promise, null, null, this.$ts.fetchingAsApObject);
-	},
+	os.apiWithDialog('following/create', {
+		userId: user.id,
+	});
+}
 
-	methods: {
-		async follow(user) {
-			const { canceled } = await os.confirm({
-				type: 'question',
-				text: this.$t('followConfirm', { name: user.name || user.username }),
-			});
+function doIt() {
+	// this might be a retry
+	state = 'loading';
 
-			if (canceled) {
-				window.close();
-				return;
+	const acct = new URL(location.href).searchParams.get('acct');
+	if (acct == null) {
+		finalError = true;
+		state = 'error';
+	}
+
+	let promise;
+
+	if (acct.startsWith('https://')) {
+		promise = os.api('ap/show', {
+			uri: acct,
+		});
+		promise.then(res => {
+			if (res.type === 'User') {
+				follow(res.object);
+			} else if (res.type === 'Note') {
+				mainRouter.push(`/notes/${res.object.id}`);
+			} else {
+				os.alert({
+					type: 'error',
+					text: 'Not a user',
+				}).then(() => {
+					finalError = true;
+					state = 'error';
+				});
 			}
-			
-			os.apiWithDialog('following/create', {
-				userId: user.id,
-			});
-		},
-	},
-});
+		});
+	} else {
+		promise = os.api('users/show', Acct.parse(acct));
+		promise.then(user => {
+			follow(user);
+		});
+	}
+
+	os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
+}
+
+doIt();
 </script>