Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages Activity

refactor: getAccountHandle, getAccountPath, getStatusPath

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/account/AccountHeader.vue
View file

@ -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>

6
components/account/AccountInfo.vue
View file

@ -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 }}

2
components/account/AccountInlineInfo.vue
View file

@ -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>

2
components/account/AccountLink.vue
View file

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

2
components/status/StatusActions.vue
View file

@ -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>

2
components/status/StatusCard.vue
View file

@ -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, {

2
components/user/UserSwitcher.vue
View file

@ -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>

14
composables/masto.ts
View file

@ -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