From f5969736033278297debda6eb047e77bb84d1ad7 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Wed, 23 Nov 2022 23:40:35 +0100
Subject: [PATCH] refactor: getAccountHandle, getAccountPath, getStatusPath

---
 components/account/AccountHeader.vue     | 10 +++++-----
 components/account/AccountInfo.vue       |  6 +++---
 components/account/AccountInlineInfo.vue |  2 +-
 components/account/AccountLink.vue       |  2 +-
 components/status/StatusActions.vue      |  2 +-
 components/status/StatusCard.vue         |  2 +-
 components/user/UserSwitcher.vue         |  2 +-
 composables/masto.ts                     | 14 +++++++++++++-
 8 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index f52fcc10..e35cf2fe 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -20,14 +20,14 @@ const createdAt = $computed(() => {
       <div flex justify-between>
         <div flex flex-col gap-2>
           <div>
-            <NuxtLink :to="`/@${account.acct}`">
+            <NuxtLink :to="getAccountPath(account)">
               <AccountAvatar :account="account" w-30 h-30 />
             </NuxtLink>
           </div>
           <div flex flex-col>
             <CommonRichContent font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
-              @{{ account.acct }}
+              {{ getAccountHandle(account) }}
             </p>
           </div>
         </div>
@@ -65,13 +65,13 @@ const createdAt = $computed(() => {
         </div>
       </div>
       <div flex gap-5>
-        <NuxtLink :to="`/@${account.acct}/`" active-class="text-primary">
+        <NuxtLink :to="`/${getAccountHandle(account)}/`" active-class="text-primary">
           <span font-bold>{{ account.statusesCount }}</span> Posts
         </NuxtLink>
-        <NuxtLink :to="`/@${account.acct}/following`" active-class="text-primary">
+        <NuxtLink :to="`/${getAccountHandle(account)}/following`" active-class="text-primary">
           <span font-bold>{{ account.followingCount }}</span> Following
         </NuxtLink>
-        <NuxtLink :to="`/@${account.acct}/followers`" active-class="text-primary">
+        <NuxtLink :to="`/${getAccountHandle(account)}/followers`" active-class="text-primary">
           <span font-bold>{{ account.followersCount }}</span> Followers
         </NuxtLink>
       </div>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index f7a32c9f..6b87b01f 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -7,17 +7,17 @@ const { account, link = true, fullServer = false } = defineProps<{
   fullServer?: boolean
 }>()
 
-const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : `@${account.acct}`)
+const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account))
 </script>
 
 <template>
   <div flex gap-3>
     <div>
-      <NuxtLink :to="link ? `/@${account.acct}` : null">
+      <NuxtLink :to="link ? getAccountPath(account) : null">
         <AccountAvatar :account="account" w-12 h-12 />
       </NuxtLink>
     </div>
-    <NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">
+    <NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
       <CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
       <p op35 text-sm>
         {{ id }}
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 72006ce9..6e96cb25 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :href="`/@${account.acct}`" flex gap-1 items-center>
+  <NuxtLink :href="getAccountPath(account)" flex gap-1 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
     <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>
diff --git a/components/account/AccountLink.vue b/components/account/AccountLink.vue
index ddfb0a45..22f14432 100644
--- a/components/account/AccountLink.vue
+++ b/components/account/AccountLink.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="`/@${account.acct}`">
+  <NuxtLink :to="getAccountPath(account)">
     {{ getDisplayName(account) }}
   </NuxtLink>
 </template>
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 5e0c9d9d..773256ea 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -37,7 +37,7 @@ const toggleBookmark = () => toggleStatusAction(
 
 <template>
   <div flex justify-between gap-8>
-    <RouterLink flex gap-1 items-center rounded op50 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
+    <RouterLink flex gap-1 items-center rounded op50 hover="op100 text-blue" group :to="getStatusPath(status)">
       <div rounded-full p2 group-hover="bg-blue/10">
         <div i-ri:chat-3-line />
       </div>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 0f68391d..6debcf14 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -26,7 +26,7 @@ function go(e: MouseEvent) {
   const path = e.composedPath() as HTMLElement[]
   const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
   if (!el)
-    router.push(`/@${status.account.acct}/${status.id}`)
+    router.push(getStatusPath(status))
 }
 
 const timeago = useTimeAgo(() => status.createdAt, {
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 953ceb7d..4617dd99 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -41,7 +41,7 @@ const sorted = computed(() => {
         @click="signout"
       >
         <div i-ri:logout-box-line />
-        Sign out @{{ currentUser.account!.acct }}
+        Sign out {{ getAccountHandle(currentUser.account!) }}
       </button>
     </div>
   </div>
diff --git a/composables/masto.ts b/composables/masto.ts
index 3f08466e..2cb72d4a 100644
--- a/composables/masto.ts
+++ b/composables/masto.ts
@@ -1,10 +1,22 @@
 import type { Ref } from 'vue'
-import type { Account, Relationship } from 'masto'
+import type { Account, Relationship, Status } from 'masto'
 
 export function getDisplayName(account: Account) {
   return account.displayName || account.username
 }
 
+export function getAccountHandle(account: Account) {
+  return `@${account.acct}`
+}
+
+export function getAccountPath(account: Account) {
+  return `/${getAccountHandle(account)}`
+}
+
+export function getStatusPath(status: Status) {
+  return `${getAccountPath(status.account)}/${status.id}`
+}
+
 // Batch requests for relationships when used in the UI
 // We don't want to hold to old values, so every time a Relationship is needed it
 // is requested again from the server to show the latest state