refactor: Move logics to store in new toot

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

@@ -22,7 +22,8 @@
           maxlength="420"
           class="image-description"
           :placeholder="$t('modals.new_toot.description')"
-          v-model="mediaDescriptions[media.id]"
+          :value="mediaDescriptions[media.id]"
+          @input="updateDescription(media.id, $event.target.value)"
           v-shortkey="{ left: ['arrowleft'], right: ['arrowright'] }"
           @shortkey="handleDescriptionKey"
           role="textbox"
@@ -128,7 +129,6 @@ export default {
   data() {
     return {
       status: '',
-      mediaDescriptions: {},
       spoiler: '',
       showContentWarning: false,
       visibilityList: Visibility
@@ -145,6 +145,7 @@ export default {
       },
       attachedMedias: state => state.attachedMedias,
       attachedMediaId: state => state.attachedMediaId,
+      mediaDescriptions: state => state.mediaDescriptions,
       blockSubmit: state => state.blockSubmit,
       visibility: state => state.visibility,
       sensitive: state => state.sensitive,
@@ -210,50 +211,13 @@ export default {
       this.$store.dispatch('TimelineSpace/Modals/NewToot/closeModal')
     },
     async toot() {
-      if (!this.newTootModal) {
+      const form = {
-        return
-      }
-      if (this.status.length < 1 || this.status.length > this.tootMax) {
-        return this.$message({
-          message: this.$t('validation.new_toot.toot_length', { min: 1, max: this.tootMax }),
-          type: 'error'
-        })
-      }
-      const visibilityKey = Object.keys(Visibility).find(key => {
-        return Visibility[key].value === this.visibility
-      })
-      let form = {
         status: this.status,
-        visibility: Visibility[visibilityKey].key,
+        spoiler: this.spoiler
-        sensitive: this.sensitive,
-        spoiler_text: this.spoiler
-      }
-      if (this.replyToId !== null) {
-        form = Object.assign(form, {
-          in_reply_to_id: this.replyToId
-        })
-      }
-      if (this.attachedMedias.length > 0) {
-        if (this.attachedMedias.length > 4) {
-          return this.$message({
-            message: this.$t('validation.new_toot.attach_length', { max: 4 }),
-            type: 'error'
-          })
-        }
-        form = Object.assign(form, {
-          media_ids: this.attachedMedias.map(m => {
-            return m.id
-          })
-        })
       }
 
-      const status = await this.$store
+      await this.$store.dispatch('TimelineSpace/Modals/NewToot/postToot', form).catch(err => {
-        .dispatch('TimelineSpace/Modals/NewToot/updateMedia', this.mediaDescriptions)
+        console.error(err)
-        .then(() => {
-          return this.$store.dispatch('TimelineSpace/Modals/NewToot/postToot', form)
-        })
-        .catch(e => {
-          console.error(e)
         this.$message({
           message: this.$t('message.toot_error'),
           type: 'error'
@@ -305,8 +269,7 @@ export default {
       })
     },
     removeAttachment(media) {
-      this.$store.commit('TimelineSpace/Modals/NewToot/removeMedia', media)
+      this.$store.dispatch('TimelineSpace/Modals/NewToot/removeMedia', media)
-      delete this.mediaDescriptions[media.id]
     },
     changeVisibility(level) {
       this.$store.commit('TimelineSpace/Modals/NewToot/changeVisibilityValue', level)
@@ -340,6 +303,9 @@ export default {
         default:
           return true
       }
+    },
+    updateDescription(id, value) {
+      this.$store.commit('TimelineSpace/Modals/NewToot/updateMediaDescription', { id: id, description: value })
     }
   }
 }

src/renderer/errors/validations/index.js

@@ -0,0 +1,7 @@
+export class NewTootModalOpen extends Error {}
+
+export class NewTootTootLength extends Error {}
+
+export class NewTootAttachLength extends Error {}
+
+export class NewTootMediaDescription extends Error {}

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

@@ -5,6 +5,12 @@ import TootStatus, { StatusState } from './NewToot/Status'
 import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
 import { RootState } from '@/store'
 import AxiosLoading from '@/utils/axiosLoading'
+import { NewTootModalOpen, NewTootTootLength, NewTootAttachLength, NewTootMediaDescription } from '@/errors/validations'
+
+type MediaDescription = {
+  id: number
+  description: string
+}
 
 export interface NewTootState {
   modalOpen: boolean
@@ -13,6 +19,7 @@ export interface NewTootState {
   replyToMessage: Status | null
   blockSubmit: boolean
   attachedMedias: Array<Attachment>
+  mediaDescriptions: { [key: number]: string | null }
   visibility: number
   sensitive: boolean
   attachedMediaId: number
@@ -32,6 +39,7 @@ const state = (): NewTootState => ({
   replyToMessage: null,
   blockSubmit: false,
   attachedMedias: [],
+  mediaDescriptions: {},
   visibility: Visibility.Public.value,
   sensitive: false,
   attachedMediaId: 0,
@@ -49,6 +57,9 @@ export const MUTATION_TYPES = {
   APPEND_ATTACHED_MEDIAS: 'appendAttachedMedias',
   CLEAR_ATTACHED_MEDIAS: 'clearAttachedMedias',
   REMOVE_MEDIA: 'removeMedia',
+  UPDATE_MEDIA_DESCRIPTION: 'updateMediaDescription',
+  CLEAR_MEDIA_DESCRIPTIONS: 'clearMediaDescriptions',
+  REMOVE_MEDIA_DESCRIPTION: 'removeMediaDescription',
   CHANGE_VISIBILITY_VALUE: 'changeVisibilityValue',
   CHANGE_SENSITIVE: 'changeSensitive',
   UPDATE_MEDIA_ID: 'updateMediaId',
@@ -82,6 +93,17 @@ const mutations: MutationTree<NewTootState> = {
   [MUTATION_TYPES.REMOVE_MEDIA]: (state, media: Attachment) => {
     state.attachedMedias = state.attachedMedias.filter(m => m.id !== media.id)
   },
+  [MUTATION_TYPES.UPDATE_MEDIA_DESCRIPTION]: (state, value: MediaDescription) => {
+    state.mediaDescriptions[value.id] = value.description
+  },
+  [MUTATION_TYPES.CLEAR_MEDIA_DESCRIPTIONS]: state => {
+    state.mediaDescriptions = {}
+  },
+  [MUTATION_TYPES.REMOVE_MEDIA_DESCRIPTION]: (state, id: number) => {
+    const descriptions = state.mediaDescriptions
+    delete descriptions[id]
+    state.mediaDescriptions = descriptions
+  },
   /**
    * changeVisibilityValue
    * Update visibility using direct value
@@ -118,20 +140,52 @@ const actions: ActionTree<NewTootState, RootState> = {
       commit(MUTATION_TYPES.CHANGE_LOADING, false)
     })
   },
-  updateMedia: async ({ rootState }, media: Attachment) => {
+  updateMedia: async ({ rootState }, mediaDescription: MediaDescription) => {
     if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
       throw new AuthenticationError()
     }
     const client = new Mastodon(rootState.TimelineSpace.account.accessToken, rootState.TimelineSpace.account.baseURL + '/api/v1')
-    const attachments = Object.keys(media).map(async id => {
+    const attachments = Object.keys(mediaDescription).map(async id => {
-      return client.put<Attachment>(`/media/${id}`, { description: media[id] })
+      if (mediaDescription[id] !== null) {
+        return client.put<Attachment>(`/media/${id}`, { description: mediaDescription[id] })
+      } else {
+        return Promise.resolve({})
+      }
     })
     return Promise.all(attachments).catch(err => {
       console.error(err)
       throw err
     })
   },
-  postToot: async ({ state, commit, rootState }, form) => {
+  postToot: async ({ state, commit, rootState, dispatch }, { status, spoiler }) => {
+    if (!state.modalOpen) {
+      throw new NewTootModalOpen()
+    }
+
+    if (status.length < 1 || status.length > rootState.TimelineSpace.tootMax) {
+      throw new NewTootTootLength()
+    }
+
+    const visibilityKey: string | undefined = Object.keys(Visibility).find(key => {
+      return Visibility[key].value === state.visibility
+    })
+    let specifiedVisibility: string = Visibility.Public.key
+    if (visibilityKey !== undefined) {
+      specifiedVisibility = Visibility[visibilityKey].key
+    }
+    let form = {
+      status: status,
+      visibility: specifiedVisibility,
+      sensitive: state.sensitive,
+      spoiler_text: spoiler
+    }
+
+    if (state.replyToMessage !== null) {
+      form = Object.assign(form, {
+        in_reply_to_id: state.replyToMessage.id
+      })
+    }
+
     if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
       throw new AuthenticationError()
     }
@@ -139,6 +193,22 @@ const actions: ActionTree<NewTootState, RootState> = {
       return
     }
     commit(MUTATION_TYPES.CHANGE_BLOCK_SUBMIT, true)
+
+    if (state.attachedMedias.length > 0) {
+      if (state.attachedMedias.length > 4) {
+        throw new NewTootAttachLength()
+      }
+      form = Object.assign(form, {
+        media_ids: state.attachedMedias.map(m => {
+          return m.id
+        })
+      })
+      // Update media descriptions
+      await dispatch('updateMedia', state.mediaDescriptions).catch(_ => {
+        throw new NewTootMediaDescription()
+      })
+    }
+
     const client = new Mastodon(rootState.TimelineSpace.account.accessToken, rootState.TimelineSpace.account.baseURL + '/api/v1')
     return client
       .post<Status>('/statuses', form)
@@ -182,6 +252,7 @@ const actions: ActionTree<NewTootState, RootState> = {
     commit(MUTATION_TYPES.SET_REPLY_TO, null)
     commit(MUTATION_TYPES.CHANGE_BLOCK_SUBMIT, false)
     commit(MUTATION_TYPES.CLEAR_ATTACHED_MEDIAS)
+    commit(MUTATION_TYPES.CLEAR_MEDIA_DESCRIPTIONS)
     commit(MUTATION_TYPES.CHANGE_SENSITIVE, false)
     commit(MUTATION_TYPES.CHANGE_VISIBILITY_VALUE, Visibility.Public.value)
   },
@@ -210,9 +281,17 @@ const actions: ActionTree<NewTootState, RootState> = {
   incrementMediaId: ({ commit, state }) => {
     commit(MUTATION_TYPES.UPDATE_MEDIA_ID, state.attachedMediaId + 1)
   },
+  decrementMediaId: ({ commit, state }) => {
+    commit(MUTATION_TYPES.UPDATE_MEDIA_ID, state.attachedMediaId - 1)
+  },
   resetMediaId: ({ commit }) => {
     commit(MUTATION_TYPES.UPDATE_MEDIA_ID, 0)
   },
+  removeMedia: ({ commit, dispatch }, media: Attachment) => {
+    commit(MUTATION_TYPES.REMOVE_MEDIA, media)
+    commit(MUTATION_TYPES.REMOVE_MEDIA_DESCRIPTION, media.id)
+    dispatch('decrementMediaId')
+  },
   updateHashtags: ({ commit, state }, tags: Array<Tag>) => {
     if (state.pinedHashtag && tags.length > 0) {
       commit(MUTATION_TYPES.UPDATE_HASHTAGS, tags)