From 729b36a606047dbcd2fbc413d0a8b267a679e9a6 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 27 Nov 2022 15:13:04 +0000
Subject: [PATCH] feat: avoid reloading the page when changing accounts (#180)

---
 app.vue                   |  5 +++-
 composables/client.ts     |  8 +++++-
 composables/users.ts      | 51 ++++++++++++++++++++++-----------------
 pages/home.vue            |  6 +++++
 pages/signin/callback.vue | 21 ----------------
 plugins/masto.ts          | 21 ++++++++--------
 6 files changed, 56 insertions(+), 56 deletions(-)
 delete mode 100644 pages/signin/callback.vue

diff --git a/app.vue b/app.vue
index 586dc3b4..2d458704 100644
--- a/app.vue
+++ b/app.vue
@@ -10,13 +10,16 @@ useHead({
   ],
 })
 
+// We want to trigger rerendering the page when account changes
+const key = computed(() => useMasto().instances.config.url || 'default')
+
 // eslint-disable-next-line no-unused-expressions
 isDark.value
 </script>
 
 <template>
   <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
-  <NuxtLayout>
+  <NuxtLayout :key="key">
     <NuxtPage />
   </NuxtLayout>
   <TeleportTarget
diff --git a/composables/client.ts b/composables/client.ts
index 1c9079ae..ae74be98 100644
--- a/composables/client.ts
+++ b/composables/client.ts
@@ -1 +1,7 @@
-export const useMasto = () => useNuxtApp().$masto
+import type { MastoClient } from 'masto'
+
+export const useMasto = () => useNuxtApp().$masto.api
+
+export const setMasto = (masto: MastoClient) => {
+  useNuxtApp().$masto?.replace(masto)
+}
diff --git a/composables/users.ts b/composables/users.ts
index 7fb8c842..812b7157 100644
--- a/composables/users.ts
+++ b/composables/users.ts
@@ -27,28 +27,37 @@ export const currentInstance = computed<null | Instance>(() => currentUserId.val
 
 export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT)
 
-export async function loginTo(user: UserLogin & { account?: AccountCredentials }) {
-  const existing = users.value.find(u => u.server === user.server && u.token === user.token)
-  if (existing) {
-    if (currentUserId.value === existing.account?.id)
-      return null
-    currentUserId.value = user.account?.id
-    await reloadPage()
-    return true
+export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: AccountCredentials }) {
+  if (user) {
+    const existing = users.value.find(u => u.server === user.server && u.token === user.token)
+    if (existing && currentUserId.value !== user.account?.id)
+      currentUserId.value = user.account?.id
   }
 
   const masto = await loginMasto({
-    url: `https://${user.server}`,
-    accessToken: user.token,
+    url: `https://${user?.server || DEFAULT_SERVER}`,
+    accessToken: user?.token,
   })
-  const me = await masto.accounts.verifyCredentials()
-  user.account = me
 
-  users.value.push(user)
-  currentUserId.value = me.id
-  servers.value[me.id] = await masto.instances.fetch()
-  await reloadPage()
-  return true
+  if (user?.token) {
+    try {
+      const me = await masto.accounts.verifyCredentials()
+      user.account = me
+
+      if (!users.value.some(u => u.server === user.server && u.token === user.token))
+        users.value.push(user as UserLogin)
+
+      currentUserId.value = me.id
+      servers.value[me.id] = await masto.instances.fetch()
+    }
+    catch {
+      await signout()
+    }
+  }
+
+  setMasto(masto)
+
+  return masto
 }
 
 export async function signout() {
@@ -72,10 +81,8 @@ export async function signout() {
   // Set currentUserId to next user if available
   currentUserId.value = users.value[0]?.account?.id
 
-  await reloadPage()
-}
+  if (!currentUserId.value)
+    await useRouter().push('/public')
 
-export async function reloadPage(path = '/') {
-  await nextTick()
-  location.pathname = path
+  await loginTo(currentUser.value)
 }
diff --git a/pages/home.vue b/pages/home.vue
index d37bfa81..a4548af7 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  alias: ['/signin/callback'],
 })
 
+if (useRoute().path === '/signin/callback') {
+  // This only cleans up the URL; page content should stay the same
+  useRouter().push('/home')
+}
+
 const paginator = useMasto().timelines.getHomeIterable()
 </script>
 
diff --git a/pages/signin/callback.vue b/pages/signin/callback.vue
deleted file mode 100644
index f95b7fe7..00000000
--- a/pages/signin/callback.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: 'none',
-})
-
-const router = useRouter()
-const { query } = useRoute()
-
-onMounted(async () => {
-  await loginTo(query as any)
-  router.push('/')
-})
-</script>
-
-<template>
-  <div h-full flex>
-    <div ma>
-      Login...
-    </div>
-  </div>
-</template>
diff --git a/plugins/masto.ts b/plugins/masto.ts
index 55f3be0f..875a2f3b 100644
--- a/plugins/masto.ts
+++ b/plugins/masto.ts
@@ -1,23 +1,22 @@
-import { login } from 'masto'
+import type { MastoClient } from 'masto'
 import { currentUser } from '../composables/users'
-import { DEFAULT_SERVER } from '~/constants'
 
 export default defineNuxtPlugin(async () => {
   try {
-    const accessToken = currentUser.value?.token
+    const { query } = useRoute()
+    const user = typeof query.server === 'string' && typeof query.token === 'string'
+      ? { server: query.server, token: query.token }
+      : currentUser.value
 
     // TODO: improve upstream to make this synchronous (delayed auth)
-    const masto = await login({
-      url: `https://${currentUser.value?.server || DEFAULT_SERVER}`,
-      accessToken,
-    })
-
-    if (accessToken)
-      masto.accounts.verifyCredentials().catch(() => signout())
+    const masto = await loginTo(user) as MastoClient
 
     return {
       provide: {
-        masto,
+        masto: shallowReactive({
+          replace(api: MastoClient) { this.api = api },
+          api: masto,
+        }),
       },
     }
   }