feat: status route using full account (#115)

This commit is contained in:
patak 2022-11-26 00:49:56 +01:00 committed by GitHub
parent b36a803eef
commit 4bb2910761
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 104 additions and 81 deletions

View file

@ -12,7 +12,7 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
<NuxtLink
v-if="status.inReplyToId"
flex="~ wrap" items-center text-sm text-gray:85
:to="getStatusPath({ id: status.inReplyToId } as any)"
:to="getStatusInReplyToPath(status)"
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
>
<div i-ri:reply-fill rotate-180 op50 class="mr-1.5" />

View file

@ -58,7 +58,11 @@ export function getAccountPath(account: Account) {
}
export function getStatusPath(status: Status) {
return `/status/${status.id}`
return `/${getFullHandle(status.account)}/${status.id}`
}
export function getStatusInReplyToPath(status: Status) {
return `/status/${status.inReplyToId}`
}
export function useAccountHandle(account: Account, fullServer = true) {

View file

@ -1,25 +0,0 @@
<script setup lang="ts">
const params = useRoute().params
const accountName = $computed(() => toShortHandle(params.account as string))
const account = await fetchAccountByName(accountName).catch(() => null)
if (account) {
useHead({
title: () => `${account.displayName?.replace(/\:\w+\:/g, '') ?? ''} (@${account.acct})`,
})
}
</script>
<template>
<MainContent>
<template v-if="account">
<AccountHeader :account="account" border="b base" />
<NuxtPage />
</template>
<CommonNotFound v-else>
Account @{{ accountName }} not found
</CommonNotFound>
</MainContent>
</template>

View file

@ -0,0 +1,41 @@
<script setup lang="ts">
import type { Component } from 'vue'
const route = useRoute()
const id = $computed(() => route.params.status as string)
const main = ref<Component | null>(null)
const status = window.history.state?.status ?? await fetchStatus(id)
const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
</script>
<template>
<MainContent>
<template v-if="status">
<template v-if="context">
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t base" py3 />
</template>
</template>
<StatusDetails ref="main" :status="status" border="t base" />
<PublishWidget
v-if="currentUser"
border="t base"
:draft-key="`reply-${id}`"
:placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
:in-reply-to-id="id"
/>
<template v-if="context">
<template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" border="t base" py3 />
</template>
</template>
</template>
<CommonNotFound v-else>
Status not found
</CommonNotFound>
</MainContent>
</template>

View file

@ -1,26 +1,25 @@
<script setup lang="ts">
const params = useRoute().params
const accountName = $computed(() => params.account as string)
const accountName = $computed(() => toShortHandle(params.account as string))
const account = await fetchAccountByName(accountName)
const tabNames = ['Posts', 'Posts and replies'] as const
const account = await fetchAccountByName(accountName).catch(() => null)
// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
const tab = $ref('Posts')
const paginatorPosts = masto.accounts.getStatusesIterable(account.id, { excludeReplies: true })
const paginatorPostsWithReply = masto.accounts.getStatusesIterable(account.id, { excludeReplies: false })
const paginator = $computed(() => {
return tab === 'Posts' ? paginatorPosts : paginatorPostsWithReply
if (account) {
useHead({
title: () => `${account.displayName?.replace(/\:\w+\:/g, '') ?? ''} (@${account.acct})`,
})
}
</script>
<template>
<div>
<CommonTabs v-model="tab" :options="tabNames" />
<KeepAlive>
<TimelinePaginator :key="tab" :paginator="paginator" />
</KeepAlive>
</div>
<MainContent>
<template v-if="account">
<AccountHeader :account="account" border="b base" />
<NuxtPage />
</template>
<CommonNotFound v-else>
Account @{{ accountName }} not found
</CommonNotFound>
</MainContent>
</template>

View file

@ -0,0 +1,26 @@
<script setup lang="ts">
const params = useRoute().params
const accountName = $computed(() => params.account as string)
const account = await fetchAccountByName(accountName)
const tabNames = ['Posts', 'Posts and replies'] as const
// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
const tab = $ref('Posts')
const paginatorPosts = masto.accounts.getStatusesIterable(account.id, { excludeReplies: true })
const paginatorPostsWithReply = masto.accounts.getStatusesIterable(account.id, { excludeReplies: false })
const paginator = $computed(() => {
return tab === 'Posts' ? paginatorPosts : paginatorPostsWithReply
})
</script>
<template>
<div>
<CommonTabs v-model="tab" :options="tabNames" />
<KeepAlive>
<TimelinePaginator :key="tab" :paginator="paginator" />
</KeepAlive>
</div>
</template>

View file

@ -1,41 +1,19 @@
<script setup lang="ts">
import type { Component } from 'vue'
const params = useRoute().params
const id = $computed(() => params.status as string)
const main = ref<Component | null>(null)
definePageMeta({
middleware: async (to) => {
const params = to.params
const id = params.status as string
const status = await fetchStatus(id)
const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
return {
path: getStatusPath(status),
state: {
status,
},
}
}
})
</script>
<template>
<MainContent>
<template v-if="status">
<template v-if="context">
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t base" py3 />
</template>
</template>
<StatusDetails ref="main" :status="status" border="t base" />
<PublishWidget
v-if="currentUser"
border="t base"
:draft-key="`reply-${id}`"
:placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
:in-reply-to-id="id"
/>
<template v-if="context">
<template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" border="t base" py3 />
</template>
</template>
</template>
<CommonNotFound v-else>
Status not found
</CommonNotFound>
</MainContent>
<div />
</template>