refs #985 Move emoji suggest logic to vuex

src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue

@@ -51,10 +51,9 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import emojilib from 'emojilib'
 import { Picker } from 'emoji-mart-vue'
 import ClickOutside from 'vue-click-outside'
-import suggestText from '../../../../utils/suggestText'
+import suggestText from '@/utils/suggestText'
 
 export default {
   name: 'status',
@@ -84,9 +83,6 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      customEmojis: state => state.TimelineSpace.emojis
-    }),
     ...mapState('TimelineSpace/Modals/NewToot/Status', {
       filteredAccounts: state => state.filteredAccounts,
       filteredHashtags: state => state.filteredHashtags,
@@ -179,35 +175,17 @@ export default {
       }
     },
     suggestEmoji(start, word) {
-      // Find native emojis
-      const filteredEmojiName = emojilib.ordered.filter(emoji => `:${emoji}`.includes(word))
-      const filteredNativeEmoji = filteredEmojiName.map(name => {
-        return {
-          name: `:${name}:`,
-          code: emojilib.lib[name].char
-        }
-      })
-      // Find custom emojis
-      const filteredCustomEmoji = this.customEmojis.filter(emoji => emoji.name.includes(word))
-      const filtered = filteredNativeEmoji.concat(filteredCustomEmoji)
-      if (filtered.length > 0) {
-        this.$store.commit('TimelineSpace/Modals/NewToot/Status/changeOpenSuggest', true)
-        this.$store.commit('TimelineSpace/Modals/NewToot/Status/changeStartIndex', start)
-        this.$store.commit('TimelineSpace/Modals/NewToot/Status/changeMatchWord', word)
-        this.$store.commit(
-          'TimelineSpace/Modals/NewToot/Status/changeFilteredSuggestion',
-          filtered.filter((e, i, array) => {
-            return array.findIndex(ar => e.name === ar.name) === i
-          })
-        )
-      } else {
+      try {
+        this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/suggestEmoji', { word: word, start: start })
+        return true
+      } catch (err) {
         this.closeSuggest()
+        return false
       }
-      return true
     },
     closeSuggest() {
       if (this.openSuggest) {
-        this.$store.commit('TimelineSpace/Modals/NewToot/Status/closeSuggest')
+        this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/closeSuggest')
         this.highlightedIndex = 0
       }
     },

src/renderer/store/TimelineSpace.ts

@@ -12,16 +12,11 @@ import { UnreadNotification } from '~/src/types/unreadNotification'
 import { AccountLoadError } from '@/errors/load'
 import { TimelineFetchError } from '@/errors/fetch'
 
-type MyEmoji = {
-  name: string
-  image: string
-}
-
 export type TimelineSpaceState = {
   account: LocalAccount
   bindingAccount: LocalAccount | null
   loading: boolean
-  emojis: Array<MyEmoji>
+  emojis: Array<Emoji>
   tootMax: number
   unreadNotification: UnreadNotification
   pleroma: boolean
@@ -76,12 +71,7 @@ const mutations: MutationTree<TimelineSpaceState> = {
     state.loading = value
   },
   [MUTATION_TYPES.UPDATE_EMOJIS]: (state, emojis: Array<Emoji>) => {
-    state.emojis = emojis.map(e => {
-      return {
-        name: `:${e.shortcode}:`,
-        image: e.url
-      }
-    })
+    state.emojis = emojis
   },
   [MUTATION_TYPES.UPDATE_TOOT_MAX]: (state, value: number | null) => {
     if (value) {

src/renderer/store/TimelineSpace/Modals/NewToot/Status.ts

@@ -1,4 +1,5 @@
 import { ipcRenderer } from 'electron'
+import emojilib from 'emojilib'
 import Mastodon, { Account, Tag, Response, Results } from 'megalodon'
 import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
 import { RootState } from '@/store/index'
@@ -6,29 +7,34 @@ import { LocalTag } from '~/src/types/localTag'
 
 type Suggest = {
   name: string
-  image: string | null
+  image?: string | null
+  code?: string | null
 }
 
 type SuggestAccount = Suggest
 
 type SuggestHashtag = Suggest
 
+type SuggestEmoji = Suggest
+
 export type StatusState = {
+  filteredSuggestion: Array<Suggest>
   filteredAccounts: Array<SuggestAccount>
   filteredHashtags: Array<SuggestHashtag>
+  filteredEmojis: Array<SuggestEmoji>
   openSuggest: boolean
   startIndex: number | null
   matchWord: string | null
-  filteredSuggestion: Array<Suggest>
 }
 
 const state = (): StatusState => ({
+  filteredSuggestion: [],
   filteredAccounts: [],
   filteredHashtags: [],
+  filteredEmojis: [],
   openSuggest: false,
   startIndex: null,
-  matchWord: null,
-  filteredSuggestion: []
+  matchWord: null
 })
 
 export const MUTATION_TYPES = {
@@ -36,13 +42,15 @@ export const MUTATION_TYPES = {
   CLEAR_FILTERED_ACCOUNTS: 'clearFilteredAccounts',
   APPEND_FILTERED_HASHTAGS: 'appendFilteredHashtags',
   CLEAR_FILTERED_HASHTAGS: 'clearFilteredHashtags',
+  UPDATE_FILTERED_EMOJIS: 'updateFilteredEmojis',
+  CLEAR_FILTERED_EMOJIS: 'clearFilteredEmojis',
   CHANGE_OPEN_SUGGEST: 'changeOpenSuggest',
   CHANGE_START_INDEX: 'changeStartIndex',
   CHANGE_MATCH_WORD: 'changeMatchWord',
   FILTERED_SUGGESTION_FROM_HASHTAGS: 'filteredSuggestionFromHashtags',
   FILTERED_SUGGESTION_FROM_ACCOUNTS: 'filteredSuggestionFromAccounts',
-  CLEAR_FILTERED_SUGGESTION: 'clearFilteredSuggestion',
-  CHANGE_FILTERED_SUGGESTION: 'changeFilteredSuggestion'
+  FILTERED_SUGGESTION_FROM_EMOJIS: 'filteredSuggestionFromEmojis',
+  CLEAR_FILTERED_SUGGESTION: 'clearFilteredSuggestion'
 }
 
 const mutations: MutationTree<StatusState> = {
@@ -65,6 +73,9 @@ const mutations: MutationTree<StatusState> = {
   [MUTATION_TYPES.CLEAR_FILTERED_HASHTAGS]: state => {
     state.filteredHashtags = []
   },
+  [MUTATION_TYPES.UPDATE_FILTERED_EMOJIS]: (state, emojis: Array<SuggestEmoji>) => {
+    state.filteredEmojis = emojis
+  },
   [MUTATION_TYPES.CHANGE_OPEN_SUGGEST]: (state, value: boolean) => {
     state.openSuggest = value
   },
@@ -80,11 +91,11 @@ const mutations: MutationTree<StatusState> = {
   [MUTATION_TYPES.FILTERED_SUGGESTION_FROM_ACCOUNTS]: state => {
     state.filteredSuggestion = state.filteredAccounts
   },
+  [MUTATION_TYPES.FILTERED_SUGGESTION_FROM_EMOJIS]: state => {
+    state.filteredSuggestion = state.filteredEmojis
+  },
   [MUTATION_TYPES.CLEAR_FILTERED_SUGGESTION]: state => {
     state.filteredSuggestion = []
-  },
-  [MUTATION_TYPES.CHANGE_FILTERED_SUGGESTION]: (state, suggestion: Array<Suggest>) => {
-    state.filteredSuggestion = suggestion
   }
 }
 
@@ -142,6 +153,39 @@ const actions: ActionTree<StatusState, RootState> = {
     }
     await Promise.all([searchCache(), searchAPI()])
   },
+  suggestEmoji: ({ commit, rootState }, wordStart: WordStart) => {
+    const { word, start } = wordStart
+    // Find native emojis
+    const filteredEmojiName: Array<string> = emojilib.ordered.filter((emoji: string) => `:${emoji}:`.includes(word))
+    const filteredNativeEmoji: Array<SuggestEmoji> = filteredEmojiName.map((name: string) => {
+      return {
+        name: `:${name}:`,
+        code: emojilib.lib[name].char
+      }
+    })
+    // Find custom emojis
+    const filteredCustomEmoji: Array<Suggest> = rootState.TimelineSpace.emojis
+      .map(emoji => {
+        return {
+          name: `:${emoji.shortcode}:`,
+          image: emoji.url
+        }
+      })
+      .filter(emoji => emoji.name.includes(word))
+    const filtered: Array<SuggestEmoji> = filteredNativeEmoji.concat(filteredCustomEmoji)
+    if (filtered.length === 0) throw new Error('Empty')
+    commit(
+      MUTATION_TYPES.UPDATE_FILTERED_EMOJIS,
+      filtered.filter((e, i, array) => {
+        return array.findIndex(ar => e.name === ar.name) === i
+      })
+    )
+    commit(MUTATION_TYPES.CHANGE_OPEN_SUGGEST, true)
+    commit(MUTATION_TYPES.CHANGE_START_INDEX, start)
+    commit(MUTATION_TYPES.CHANGE_MATCH_WORD, word)
+    commit(MUTATION_TYPES.FILTERED_SUGGESTION_FROM_EMOJIS)
+    return filtered
+  },
   closeSuggest: ({ commit }) => {
     commit(MUTATION_TYPES.CHANGE_OPEN_SUGGEST, false)
     commit(MUTATION_TYPES.CHANGE_START_INDEX, null)
@@ -155,6 +199,12 @@ const actions: ActionTree<StatusState, RootState> = {
 const getters: GetterTree<StatusState, RootState> = {
   pickerEmojis: (_state, _getters, rootState) => {
     return rootState.TimelineSpace.emojis
+      .map(emoji => {
+        return {
+          name: `:${emoji.shortcode}:`,
+          image: emoji.url
+        }
+      })
       .filter((e, i, array) => {
         return array.findIndex(ar => e.name === ar.name) === i
       })