From ebc09cdf556bec74a85cc8ba47ce4d099296ff64 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 30 Apr 2022 01:50:09 +0900
Subject: [PATCH] Rewrite Modals/NewToot/Quote with composition API

---
 spec/renderer/unit/utils/emojify.spec.ts      | 12 ++-
 .../TimelineSpace/Modals/NewToot/Quote.vue    | 37 +++++----
 .../TimelineSpace/Modals/NewToot/Status.vue   |  9 ++-
 src/renderer/components/atoms/FailoverImg.vue | 77 ++++++++++---------
 .../{exifImageUrl.js => exifImageUrl.ts}      | 15 ++--
 src/renderer/utils/{emojify.js => emojify.ts} |  6 +-
 6 files changed, 86 insertions(+), 70 deletions(-)
 rename src/renderer/components/utils/{exifImageUrl.js => exifImageUrl.ts} (79%)
 rename src/renderer/utils/{emojify.js => emojify.ts} (72%)

diff --git a/spec/renderer/unit/utils/emojify.spec.ts b/spec/renderer/unit/utils/emojify.spec.ts
index 0ef34e16..6ec25210 100644
--- a/spec/renderer/unit/utils/emojify.spec.ts
+++ b/spec/renderer/unit/utils/emojify.spec.ts
@@ -4,15 +4,21 @@ describe('emojify', () => {
   const emoji = [
     {
       shortcode: 'python',
-      url: 'https://example.com/python'
+      static_url: 'https://example.com/python',
+      url: 'https://example.com/python',
+      visible_in_picker: true
     },
     {
       shortcode: 'nodejs',
-      url: 'https://example.com/nodejs'
+      static_url: 'https://example.com/nodejs',
+      url: 'https://example.com/nodejs',
+      visible_in_picker: true
     },
     {
       shortcode: 'slack',
-      url: 'https://example.com/slack'
+      static_url: 'https://example.com/slack',
+      url: 'https://example.com/slack',
+      visible_in_picker: true
     }
   ]
   describe('Does not contain shortcode', () => {
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
index 3b408632..a3307fe5 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
@@ -20,12 +20,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, toRefs } from 'vue'
 import DisplayStyle from '~/src/constants/displayStyle'
-import FailoverImg from '@/components/atoms/FailoverImg'
+import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import emojify from '@/utils/emojify'
+import { Entity } from 'megalodon'
 
-export default {
+export default defineComponent({
   new: 'quote-target',
   components: {
     FailoverImg
@@ -40,9 +42,10 @@ export default {
       default: 0
     }
   },
-  methods: {
-    username(account) {
-      switch (this.displayNameStyle) {
+  setup(props) {
+    const { displayNameStyle } = toRefs(props)
+    const username = (account: Entity.Account) => {
+      switch (displayNameStyle.value) {
         case DisplayStyle.DisplayNameAndUsername.value:
           if (account.display_name !== '') {
             return emojify(account.display_name, account.emojis)
@@ -55,24 +58,30 @@ export default {
           } else {
             return account.acct
           }
-        case DisplayStyle.Username.value:
+        default:
           return account.acct
       }
-    },
-    accountName(account) {
-      switch (this.displayNameStyle) {
+    }
+    const accountName = (account: Entity.Account) => {
+      switch (displayNameStyle.value) {
         case DisplayStyle.DisplayNameAndUsername.value:
           return `@${account.acct}`
         case DisplayStyle.DisplayName.value:
-        case DisplayStyle.Username.value:
+        default:
           return ''
       }
-    },
-    emojiText(content, emojis) {
+    }
+    const emojiText = (content: string, emojis: Array<Entity.Emoji>) => {
       return emojify(content, emojis)
     }
+
+    return {
+      username,
+      accountName,
+      emojiText
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
index 9715174b..8243e3bb 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
@@ -45,7 +45,6 @@
           set="twitter"
           :autoFocus="true"
           @select="selectEmoji"
-          :custom="pickerEmojis"
           :perLine="7"
           :emojiSize="24"
           :showPreview="false"
@@ -96,7 +95,7 @@ export default defineComponent({
   setup(props, ctx) {
     const space = 'TimelineSpace/Modals/NewToot/Status'
     const store = useStore()
-    const emojiIndex = new EmojiIndex(data)
+
     const { modelValue } = toRefs(props)
     const highlightedIndex = ref(0)
     const statusRef = ref<HTMLTextAreaElement>()
@@ -110,7 +109,10 @@ export default defineComponent({
     })
     const startIndex = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.startIndex)
     const matchWord = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.matchWord)
-    const pickerEmojis = computed(() => store.getters[`${space}/pickerEmojis`])
+    const customEmojis = computed(() => store.getters[`${space}/pickerEmojis`])
+    const emojiIndex = new EmojiIndex(data, {
+      custom: customEmojis.value
+    })
 
     const closeSuggest = () => {
       store.dispatch(`${space}/${ACTION_TYPES.CLOSE_SUGGEST}`)
@@ -223,7 +225,6 @@ export default defineComponent({
       filteredAccounts,
       filteredHashtags,
       filteredSuggestion,
-      pickerEmojis,
       openSuggest,
       startSuggest,
       suggestHighlight,
diff --git a/src/renderer/components/atoms/FailoverImg.vue b/src/renderer/components/atoms/FailoverImg.vue
index 39ce5129..418fb911 100644
--- a/src/renderer/components/atoms/FailoverImg.vue
+++ b/src/renderer/components/atoms/FailoverImg.vue
@@ -10,69 +10,72 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, ref, toRefs, onMounted, watch } from 'vue'
 import exifImageUrl from '@/components/utils/exifImageUrl'
 
-export default {
+export default defineComponent({
   name: 'FailoverImg',
   props: {
     src: {
       type: String,
-      default: '',
+      default: ''
     },
     title: {
       type: String,
-      default: '',
+      default: ''
     },
     alt: {
       type: String,
-      default: '',
+      default: ''
     },
     readExif: {
       type: Boolean,
-      default: false,
+      default: false
     },
     failoverSrc: {
       type: String,
       default:
-        'data:image/png;base64,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8uyu8TbiNgXmedEw05izs7P8Fjrdad3pzMSyT9ylsyYpjwipvI2p/fBe+djEq1evGofN8qLr7PLptJane13xzkgK3Gjx2bn2BQ58QJVXf0yN6t9CeeDReNpz4Ltqy9jyucT6jwjNrtBOz5g+5rtowtnmtPB6fLPznZEU2NjhOAtMyt15/eflyw268WCm3MIG+JRA5ZbxrsPgxv9fo+/dbTnmNzY28CJaq+no3AJzh2l4mUqBafXHxppGj/r/MWM5ZWr8NG25Tf/69WuYUb180k7fp1R+bKLxCD9f7pu9jzSeMf/HOC6tP8E2/CJakwhrCpzb4cgLzCc2aq4jl1tYvjKeTqguOnsUG2L5/WLDfP9AumCdn7f86EOnYTB2LvUR5q/VmP2Yb/x7vgsi3VizaIiLRyizn+7d3nfGVmBlXjqJAlMnp6enLUebcu4693JZbJfl1c4h76jKO4X0Af8eE8vyXu1Fynlv5ZNNlVlxrP258/byK/C67i9u9UjYssDcYf3x1djEllcOIzXnP9JVmbLD/LHX9AUq5YQ2Rs4hb7OMd/Hu3buuf6v82ESbS03xZvOMIIa72H+Ve5m0iNKqj39Gh2mIjr+1tbV179696LacdMSP6vcXsVLa/H+j4zXUfEfGOkTYqcA8aZnWLu3k5KTxvHz6tXJ4j+1p0Z2NabMY/xcBl3PRljPn2LPkoSyiKitKH5nf29srK1q0d0sfEG98usFuexj1dLScPKyrll8oFNvN4eFh4zmP+LWjo6NJnPQrP8Lb8qaL8tdmT8/ETz9+/Nh4K1n8WiyiqX9b+XAj4XRvrYw1nfajbVZ27ODzd9rXZBYPFVtPuq5Y+SBf/Cjdi9z761hj281PPZtE+dOuN0zm86XlW4sXn/cU7W+hTsd+Naey0q4qLZ9Kpekt1JyzyUeenT6DsqqY/zk4OFjG41Zm4XGYMfDtRen76svD+pHfQJhe5+35OHm/RZT+RxRr9r62rNqRkN+tXUS+3gJECCIcxpAXu8zucEw4x9nZ2fn5+TDnSK+urm7JV1YiwrYGvlR694+NKV8XQYR/WZubhsAxISBCMB39W9K9V6N6q+t3pwUibNjix3yPGJiOAiIEEQIiBBGCCC0CECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBDG6D8BBgBNIRvwsstoqwAAAABJRU5ErkJggg==',
-    },
-  },
-  data() {
-    return {
-      loading: true,
-      originalSrc: this.src,
+        'data:image/png;base64,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8uyu8TbiNgXmedEw05izs7P8Fjrdad3pzMSyT9ylsyYpjwipvI2p/fBe+djEq1evGofN8qLr7PLptJane13xzkgK3Gjx2bn2BQ58QJVXf0yN6t9CeeDReNpz4Ltqy9jyucT6jwjNrtBOz5g+5rtowtnmtPB6fLPznZEU2NjhOAtMyt15/eflyw268WCm3MIG+JRA5ZbxrsPgxv9fo+/dbTnmNzY28CJaq+no3AJzh2l4mUqBafXHxppGj/r/MWM5ZWr8NG25Tf/69WuYUb180k7fp1R+bKLxCD9f7pu9jzSeMf/HOC6tP8E2/CJakwhrCpzb4cgLzCc2aq4jl1tYvjKeTqguOnsUG2L5/WLDfP9AumCdn7f86EOnYTB2LvUR5q/VmP2Yb/x7vgsi3VizaIiLRyizn+7d3nfGVmBlXjqJAlMnp6enLUebcu4693JZbJfl1c4h76jKO4X0Af8eE8vyXu1Fynlv5ZNNlVlxrP258/byK/C67i9u9UjYssDcYf3x1djEllcOIzXnP9JVmbLD/LHX9AUq5YQ2Rs4hb7OMd/Hu3buuf6v82ESbS03xZvOMIIa72H+Ve5m0iNKqj39Gh2mIjr+1tbV179696LacdMSP6vcXsVLa/H+j4zXUfEfGOkTYqcA8aZnWLu3k5KTxvHz6tXJ4j+1p0Z2NabMY/xcBl3PRljPn2LPkoSyiKitKH5nf29srK1q0d0sfEG98usFuexj1dLScPKyrll8oFNvN4eFh4zmP+LWjo6NJnPQrP8Lb8qaL8tdmT8/ETz9+/Nh4K1n8WiyiqX9b+XAj4XRvrYw1nfajbVZ27ODzd9rXZBYPFVtPuq5Y+SBf/Cjdi9z761hj281PPZtE+dOuN0zm86XlW4sXn/cU7W+hTsd+Naey0q4qLZ9Kpekt1JyzyUeenT6DsqqY/zk4OFjG41Zm4XGYMfDtRen76svD+pHfQJhe5+35OHm/RZT+RxRr9r62rNqRkN+tXUS+3gJECCIcxpAXu8zucEw4x9nZ2fn5+TDnSK+urm7JV1YiwrYGvlR694+NKV8XQYR/WZubhsAxISBCMB39W9K9V6N6q+t3pwUibNjix3yPGJiOAiIEEQIiBBGCCC0CECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBDG6D8BBgBNIRvwsstoqwAAAABJRU5ErkJggg=='
     }
   },
-  async mounted() {
-    if (this.readExif) {
-      try {
-        const transformed = await exifImageUrl(this.src)
-        this.originalSrc = transformed
-      } catch (err) {
-        console.warn(err)
-      }
-    }
-  },
-  watch: {
-    src: async function (newSrc, _oldSrc) {
-      this.originalSrc = newSrc
-      if (this.readExif) {
+  setup(props) {
+    const { src, readExif, failoverSrc } = toRefs(props)
+    const loading = ref<boolean>(false)
+    const originalSrc = ref<string>(src.value)
+
+    onMounted(async () => {
+      if (readExif.value) {
         try {
-          const transformed = await exifImageUrl(newSrc)
-          this.originalSrc = transformed
+          const transformed = await exifImageUrl(src.value)
+          originalSrc.value = transformed
         } catch (err) {
           console.warn(err)
         }
       }
-    },
-  },
-  methods: {
-    failover() {
-      this.originalSrc = this.failoverSrc
-    },
-  },
-}
+    })
+
+    watch(src, async (newSrc, _oldSrc) => {
+      originalSrc.value = newSrc
+      if (readExif.value) {
+        try {
+          const transformed = await exifImageUrl(newSrc)
+          originalSrc.value = transformed
+        } catch (err) {}
+      }
+    })
+
+    const failover = () => {
+      originalSrc.value = failoverSrc.value
+    }
+
+    return {
+      loading,
+      originalSrc,
+      failover
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/utils/exifImageUrl.js b/src/renderer/components/utils/exifImageUrl.ts
similarity index 79%
rename from src/renderer/components/utils/exifImageUrl.js
rename to src/renderer/components/utils/exifImageUrl.ts
index 6d12b49e..4eb5b383 100644
--- a/src/renderer/components/utils/exifImageUrl.js
+++ b/src/renderer/components/utils/exifImageUrl.ts
@@ -1,15 +1,10 @@
 import loadImage from 'blueimp-load-image'
 
-const parseExtension = (url) => {
+const parseExtension = (url: string) => {
   if (!url) {
     return null
   }
-  if (
-    url.match(/\.jpg$/) ||
-    url.match(/\.jpeg$/) ||
-    url.match(/\.JPG$/) ||
-    url.match(/\.JPEG$/)
-  ) {
+  if (url.match(/\.jpg$/) || url.match(/\.jpeg$/) || url.match(/\.JPG$/) || url.match(/\.JPEG$/)) {
     return 'image/jpeg'
   } else if (url.match(/\.png$/) || url.match(/\.PNG$/)) {
     return 'image/png'
@@ -23,7 +18,7 @@ const parseExtension = (url) => {
   return null
 }
 
-const exifImageUrl = (url) => {
+const exifImageUrl = (url: string): Promise<string> => {
   return new Promise((resolve, reject) => {
     const extension = parseExtension(url)
     if (!extension) {
@@ -31,7 +26,7 @@ const exifImageUrl = (url) => {
     }
     loadImage(
       url,
-      (canvas) => {
+      canvas => {
         if (canvas.type === 'error') {
           return reject(Error(`can not load image: ${url}`))
         }
@@ -41,7 +36,7 @@ const exifImageUrl = (url) => {
       {
         canvas: true,
         meta: true,
-        orientation: true,
+        orientation: true
       }
     )
   })
diff --git a/src/renderer/utils/emojify.js b/src/renderer/utils/emojify.ts
similarity index 72%
rename from src/renderer/utils/emojify.js
rename to src/renderer/utils/emojify.ts
index 478eeace..6e7f4ae0 100644
--- a/src/renderer/utils/emojify.js
+++ b/src/renderer/utils/emojify.ts
@@ -1,6 +1,8 @@
-const emojify = (str, customEmoji = []) => {
+import { Entity } from 'megalodon'
+
+const emojify = (str: string, customEmoji: Array<Entity.Emoji> = []): string => {
   let result = str
-  customEmoji.map((emoji) => {
+  customEmoji.map(emoji => {
     const reg = new RegExp(`:${emoji.shortcode}:`, 'g')
     const match = result.match(reg)
     if (!match) return emoji