refactor: getAccountHandle, getAccountPath, getStatusPath

This commit is contained in:
patak 2022-11-23 23:40:35 +01:00
parent 713617e19a
commit f596973603
8 changed files with 26 additions and 14 deletions

View file

@ -20,14 +20,14 @@ const createdAt = $computed(() => {
<div flex justify-between> <div flex justify-between>
<div flex flex-col gap-2> <div flex flex-col gap-2>
<div> <div>
<NuxtLink :to="`/@${account.acct}`"> <NuxtLink :to="getAccountPath(account)">
<AccountAvatar :account="account" w-30 h-30 /> <AccountAvatar :account="account" w-30 h-30 />
</NuxtLink> </NuxtLink>
</div> </div>
<div flex flex-col> <div flex flex-col>
<CommonRichContent font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" /> <CommonRichContent font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
<p op50> <p op50>
@{{ account.acct }} {{ getAccountHandle(account) }}
</p> </p>
</div> </div>
</div> </div>
@ -65,13 +65,13 @@ const createdAt = $computed(() => {
</div> </div>
</div> </div>
<div flex gap-5> <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 <span font-bold>{{ account.statusesCount }}</span> Posts
</NuxtLink> </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 <span font-bold>{{ account.followingCount }}</span> Following
</NuxtLink> </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 <span font-bold>{{ account.followersCount }}</span> Followers
</NuxtLink> </NuxtLink>
</div> </div>

View file

@ -7,17 +7,17 @@ const { account, link = true, fullServer = false } = defineProps<{
fullServer?: boolean 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> </script>
<template> <template>
<div flex gap-3> <div flex gap-3>
<div> <div>
<NuxtLink :to="link ? `/@${account.acct}` : null"> <NuxtLink :to="link ? getAccountPath(account) : null">
<AccountAvatar :account="account" w-12 h-12 /> <AccountAvatar :account="account" w-12 h-12 />
</NuxtLink> </NuxtLink>
</div> </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" /> <CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op35 text-sm> <p op35 text-sm>
{{ id }} {{ id }}

View file

@ -7,7 +7,7 @@ defineProps<{
</script> </script>
<template> <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 /> <AccountAvatar :account="account" w-5 h-5 />
<CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" /> <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink> </NuxtLink>

View file

@ -7,7 +7,7 @@ defineProps<{
</script> </script>
<template> <template>
<NuxtLink :to="`/@${account.acct}`"> <NuxtLink :to="getAccountPath(account)">
{{ getDisplayName(account) }} {{ getDisplayName(account) }}
</NuxtLink> </NuxtLink>
</template> </template>

View file

@ -37,7 +37,7 @@ const toggleBookmark = () => toggleStatusAction(
<template> <template>
<div flex justify-between gap-8> <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 rounded-full p2 group-hover="bg-blue/10">
<div i-ri:chat-3-line /> <div i-ri:chat-3-line />
</div> </div>

View file

@ -26,7 +26,7 @@ function go(e: MouseEvent) {
const path = e.composedPath() as HTMLElement[] const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase())) const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
if (!el) if (!el)
router.push(`/@${status.account.acct}/${status.id}`) router.push(getStatusPath(status))
} }
const timeago = useTimeAgo(() => status.createdAt, { const timeago = useTimeAgo(() => status.createdAt, {

View file

@ -41,7 +41,7 @@ const sorted = computed(() => {
@click="signout" @click="signout"
> >
<div i-ri:logout-box-line /> <div i-ri:logout-box-line />
Sign out @{{ currentUser.account!.acct }} Sign out {{ getAccountHandle(currentUser.account!) }}
</button> </button>
</div> </div>
</div> </div>

View file

@ -1,10 +1,22 @@
import type { Ref } from 'vue' import type { Ref } from 'vue'
import type { Account, Relationship } from 'masto' import type { Account, Relationship, Status } from 'masto'
export function getDisplayName(account: Account) { export function getDisplayName(account: Account) {
return account.displayName || account.username 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 // 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 // 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 // is requested again from the server to show the latest state