fix: handle undefined displayName (#21)

This commit is contained in:
patak 2022-11-21 16:07:55 +01:00 committed by GitHub
parent 2ef2e97a30
commit f7f3e9c7e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 9 deletions

View file

@ -25,7 +25,7 @@ const createdAt = $computed(() => {
</NuxtLink> </NuxtLink>
</div> </div>
<NuxtLink flex flex-col :to="`/@${account.acct}`"> <NuxtLink flex flex-col :to="`/@${account.acct}`">
<CommonRichContent font-bold :content="account.displayName" /> <CommonRichContent font-bold :content="getDisplayName(account)" />
<p op50> <p op50>
@{{ account.acct }} @{{ account.acct }}
</p> </p>

View file

@ -15,7 +15,7 @@ const { link = true } = defineProps<{
</NuxtLink> </NuxtLink>
</div> </div>
<NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null"> <NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">
<CommonRichContent font-bold :content="account.displayName" /> <CommonRichContent font-bold :content="getDisplayName(account)" />
<p op35 text-sm> <p op35 text-sm>
@{{ account.acct }} @{{ account.acct }}
</p> </p>

View file

@ -9,6 +9,6 @@ defineProps<{
<template> <template>
<NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center> <NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
<img :src="account.avatar" class="w-5 h-5 rounded"> <img :src="account.avatar" class="w-5 h-5 rounded">
<CommonRichContent :content="account.displayName" /> <CommonRichContent :content="getDisplayName(account)" />
</NuxtLink> </NuxtLink>
</template> </template>

View file

@ -1,35 +1,37 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Notification } from 'masto' import type { Notification } from 'masto'
defineProps<{ const { notification } = defineProps<{
notification: Notification notification: Notification
}>() }>()
const displayName = $computed(() => getDisplayName(notification.account))
</script> </script>
<template> <template>
<div flex flex-col> <div flex flex-col>
<template v-if="notification.type === 'follow'"> <template v-if="notification.type === 'follow'">
<div flex ml-4> <div flex ml-4>
<div i-ri:user-follow-fill mr-3 color-purple />{{ notification.account.displayName }} followed you <div i-ri:user-follow-fill mr-3 color-purple />{{ displayName }} followed you
</div> </div>
<AccountCard :account="notification.account" p3 /> <AccountCard :account="notification.account" p3 />
</template> </template>
<template v-if="notification.type === 'follow_request'"> <template v-if="notification.type === 'follow_request'">
<div flex ml-4> <div flex ml-4>
<div i-ri:user-follow-fill mr-3 color-gray />{{ notification.account.displayName }} requested to follow you <div i-ri:user-follow-fill mr-3 color-gray />{{ displayName }} requested to follow you
</div> </div>
<!-- TODO: accept request --> <!-- TODO: accept request -->
<AccountCard :account="notification.account" p3 /> <AccountCard :account="notification.account" p3 />
</template> </template>
<template v-if="notification.type === 'favourite'"> <template v-if="notification.type === 'favourite'">
<div flex ml-4> <div flex ml-4>
<div i-ri:heart-fill mr-3 color-red />{{ notification.account.displayName }} favourited your post <div i-ri:heart-fill mr-3 color-red />{{ displayName }} favourited your post
</div> </div>
<StatusCard :status="notification.status!" p3 /> <StatusCard :status="notification.status!" p3 />
</template> </template>
<template v-if="notification.type === 'reblog'"> <template v-if="notification.type === 'reblog'">
<div flex ml-4> <div flex ml-4>
<div i-ri:repeat-fill mr-3 color-green />{{ notification.account.displayName }} reblogged your post <div i-ri:repeat-fill mr-3 color-green />{{ displayName }} reblogged your post
</div> </div>
<StatusCard :status="notification.status!" p3 /> <StatusCard :status="notification.status!" p3 />
</template> </template>

5
composables/masto.ts Normal file
View file

@ -0,0 +1,5 @@
import type { Account } from 'masto'
export function getDisplayName(account: Account) {
return account.displayName || account.username
}

View file

@ -18,7 +18,7 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
<PublishWidget <PublishWidget
w-full w-full
:draft-key="`reply-${id}`" :draft-key="`reply-${id}`"
:placeholder="`Reply to ${status?.account?.displayName || status?.account?.acct || 'this thread'}`" :placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
:in-reply-to-id="id" :in-reply-to-id="id"
/> />
</div> </div>