From f7f3e9c7e1e9b4823cb00ae655def031e7fd62b5 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Mon, 21 Nov 2022 16:07:55 +0100
Subject: [PATCH] fix: handle undefined displayName (#21)

---
 components/account/AccountHeader.vue         |  2 +-
 components/account/AccountInfo.vue           |  2 +-
 components/account/AccountInlineInfo.vue     |  2 +-
 components/notification/NotificationCard.vue | 12 +++++++-----
 composables/masto.ts                         |  5 +++++
 pages/@[user]/[post].vue                     |  2 +-
 6 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 composables/masto.ts

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 85dd466f..f149dbb9 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -25,7 +25,7 @@ const createdAt = $computed(() => {
             </NuxtLink>
           </div>
           <NuxtLink flex flex-col :to="`/@${account.acct}`">
-            <CommonRichContent font-bold :content="account.displayName" />
+            <CommonRichContent font-bold :content="getDisplayName(account)" />
             <p op50>
               @{{ account.acct }}
             </p>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 6b586899..8d2e8af1 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -15,7 +15,7 @@ const { link = true } = defineProps<{
       </NuxtLink>
     </div>
     <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>
         @{{ account.acct }}
       </p>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 364f7de6..a1ddad14 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -9,6 +9,6 @@ defineProps<{
 <template>
   <NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
     <img :src="account.avatar" class="w-5 h-5 rounded">
-    <CommonRichContent :content="account.displayName" />
+    <CommonRichContent :content="getDisplayName(account)" />
   </NuxtLink>
 </template>
diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index 44bed60c..64a067a1 100644
--- a/components/notification/NotificationCard.vue
+++ b/components/notification/NotificationCard.vue
@@ -1,35 +1,37 @@
 <script setup lang="ts">
 import type { Notification } from 'masto'
 
-defineProps<{
+const { notification } = defineProps<{
   notification: Notification
 }>()
+
+const displayName = $computed(() => getDisplayName(notification.account))
 </script>
 
 <template>
   <div flex flex-col>
     <template v-if="notification.type === 'follow'">
       <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>
       <AccountCard :account="notification.account" p3 />
     </template>
     <template v-if="notification.type === 'follow_request'">
       <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>
       <!-- TODO: accept request -->
       <AccountCard :account="notification.account" p3 />
     </template>
     <template v-if="notification.type === 'favourite'">
       <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>
       <StatusCard :status="notification.status!" p3 />
     </template>
     <template v-if="notification.type === 'reblog'">
       <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>
       <StatusCard :status="notification.status!" p3 />
     </template>
diff --git a/composables/masto.ts b/composables/masto.ts
new file mode 100644
index 00000000..d01f4872
--- /dev/null
+++ b/composables/masto.ts
@@ -0,0 +1,5 @@
+import type { Account } from 'masto'
+
+export function getDisplayName(account: Account) {
+  return account.displayName || account.username
+}
diff --git a/pages/@[user]/[post].vue b/pages/@[user]/[post].vue
index f23035c1..64a0f6f8 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/@[user]/[post].vue
@@ -18,7 +18,7 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
       <PublishWidget
         w-full
         :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"
       />
     </div>