Merge pull request #1550 from traPtitech/refactor/use-optional-chaining

テンプレート内でのoptional chaining、nullish coalescingの利用 refs #1295
traPtitech · Nov 1, 2020 · 221e4f9 · 221e4f9
2 parents c8e62a8 + 43912c5
commit 221e4f9
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 22 deletions.
diff --git a/src/components/Main/MainView/MessageElement/StampDetailElementContent.vue b/src/components/Main/MainView/MessageElement/StampDetailElementContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.container" @click="openModal">
-    {{ user ? user.displayName : 'unknown' }}
+    {{ user?.displayName ?? 'unknown' }}
     <span :class="$style.numberWrap">
       <spin-number :value="count" />
     </span>

diff --git a/src/components/Main/Modal/FileModal/FileModalContentFooter.vue b/src/components/Main/Modal/FileModal/FileModalContentFooter.vue
@@ -3,7 +3,7 @@
     <div :class="$style.channelPath" @click="onClick">#{{ channelPath }}</div>
     <file-modal-content-footer-username
       :class="$style.userName"
-      :user-id="user ? user.id : undefined"
+      :user-id="user?.id"
     />
     <div :class="$style.createdAt">{{ createdAt }}</div>
   </div>

diff --git a/src/components/Main/Modal/FileModal/FileModalContentFooterUsername.vue b/src/components/Main/Modal/FileModal/FileModalContentFooterUsername.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.container" @click="openModal">
-    {{ user ? user.displayName : 'unknown' }}
+    {{ user?.displayName ?? 'unknown' }}
   </div>
 </template>
 

diff --git a/src/components/Main/Modal/FileModal/FileModalImage.vue b/src/components/Main/Modal/FileModal/FileModalImage.vue
@@ -2,19 +2,19 @@
   <div :class="$style.container">
     <div :class="$style.header">
       <file-modal-content-header
-        :file-id="fileMeta ? fileMeta.id : ''"
+        :file-id="fileMeta?.id ?? ''"
         :is-white="true"
       />
     </div>
     <img
       :class="$style.img"
       :src="fileRawPath"
-      :alt="fileMeta ? fileMeta.name : 'unknown'"
+      :alt="fileMeta?.name ?? 'unknown'"
       draggable="false"
     />
     <div :class="$style.footer">
       <file-modal-content-footer
-        :file-id="fileMeta ? fileMeta.id : ''"
+        :file-id="fileMeta?.id ?? ''"
         :is-white="true"
       />
     </div>

diff --git a/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue b/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue
@@ -5,13 +5,13 @@
       <p>
         <online-indicator-with-tooltip
           :user-id="user.id"
-          :last-online="detail ? detail.lastOnline : undefined"
+          :last-online="detail?.lastOnline"
         />
         @{{ user.name }}
       </p>
     </div>
     <buttons
-      :home-channel-id="detail ? detail.homeChannel : undefined"
+      :home-channel-id="detail?.homeChannel"
       :user-name="user.name"
       show-title
     />

diff --git a/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue b/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue
@@ -7,14 +7,14 @@
         <online-indicator-with-tooltip
           :class="$style.indicator"
           :user-id="user.id"
-          :last-online="detail ? detail.lastOnline : undefined"
+          :last-online="detail?.lastOnline"
         />
         <span>@{{ user.name }}</span>
       </p>
     </div>
     <buttons
       :class="$style.buttons"
-      :home-channel-id="detail ? detail.homeChannel : undefined"
+      :home-channel-id="detail?.homeChannel"
       :user-name="user.name"
     />
   </section>

diff --git a/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue b/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue
@@ -1,21 +1,15 @@
 <template>
   <div>
     <account-state :class="$style.section" :state="user.state" />
-    <bio :class="$style.section" :bio="detail ? detail.bio : undefined" />
-    <home-channel
-      :class="$style.section"
-      :id="detail ? detail.homeChannel : undefined"
-    />
+    <bio :class="$style.section" :bio="detail?.bio" />
+    <home-channel :class="$style.section" :id="detail?.homeChannel" />
     <accounts
       :class="$style.section"
       :bot="user.bot"
       :name="user.name"
-      :twitter-id="detail ? detail.twitterId : undefined"
-    />
-    <last-online
-      :class="$style.section"
-      :last-online="detail ? detail.lastOnline : undefined"
+      :twitter-id="detail?.twitterId"
     />
+    <last-online :class="$style.section" :last-online="detail?.lastOnline" />
   </div>
 </template>
 

diff --git a/src/components/Main/Navigation/NavigationSelectorItem.vue b/src/components/Main/Navigation/NavigationSelectorItem.vue
@@ -20,7 +20,7 @@ import NotificationIndicator from '@/components/UI/NotificationIndicator.vue'
 const useStyles = (props: { colorClaim?: ThemeClaim<string> }) => {
   return reactive({
     container: makeStyles((theme, common) => ({
-      color: props.colorClaim ? props.colorClaim(theme, common) : undefined
+      color: props.colorClaim?.(theme, common)
     }))
   })
 }

diff --git a/src/components/UI/FileDescription.vue b/src/components/UI/FileDescription.vue
@@ -2,7 +2,7 @@
   <div :class="$style.container" :data-is-white="$boolAttr(isWhite)">
     <file-type-icon :type="fileType" :size="36" :class="$style.icon" />
     <div :class="$style.fileName" :data-is-ellipsis="$boolAttr(isEllipsis)">
-      {{ fileMeta ? fileMeta.name : 'unknown' }}
+      {{ fileMeta?.name ?? 'unknown' }}
     </div>
     <div :class="$style.fileSize">
       {{ fileSize }}