refs #52 Set in reply to id when reply in new toot modal

src/renderer/components/TimelineSpace/Cards/Toot.vue

@@ -42,7 +42,7 @@ export default {
       }
     },
     openReply (message) {
-      this.$store.dispatch('TimelineSpace/openReply', message)
+      this.$store.dispatch('TimelineSpace/NewTootModal/openReply', message)
     },
     changeFavourite (message) {
       if (message.favourited) {

src/renderer/components/TimelineSpace/NewTootModal.vue

@@ -4,13 +4,13 @@
     :visible.sync="newTootModal"
     width="400px"
     class="new-toot-modal" v-on:submit.prevent="toot">
-    <el-form :model="tootForm">
+    <el-form>
       <div class="status">
-        <textarea v-model="tootForm.status" ref="status" @keyup.ctrl.enter.exact="toot" @keyup.meta.enter.exact="toot"></textarea>
+        <textarea v-model="status" ref="status" @keyup.ctrl.enter.exact="toot" @keyup.meta.enter.exact="toot"></textarea>
       </div>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <span class="text-count">{{ 500 - tootForm.status.length }}</span>
+      <span class="text-count">{{ 500 - status.length }}</span>
       <el-button @click="close">Cancel</el-button>
       <el-button type="primary" @click="toot">Toot</el-button>
     </span>
@@ -18,16 +18,20 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'new-toot-modal',
-  data () {
-    return {
-      tootForm: {
-        status: ''
-      }
-    }
-  },
   computed: {
+    ...mapState({
+      replyToId: (state) => {
+        if (state.TimelineSpace.NewTootModal.replyToMessage !== null) {
+          return state.TimelineSpace.NewTootModal.replyToMessage.id
+        } else {
+          return null
+        }
+      }
+    }),
     newTootModal: {
       get () {
         return this.$store.state.TimelineSpace.NewTootModal.modalOpen
@@ -35,6 +39,14 @@ export default {
       set (value) {
         this.$store.commit('TimelineSpace/NewTootModal/changeModal', value)
       }
+    },
+    status: {
+      get () {
+        return this.$store.state.TimelineSpace.NewTootModal.status
+      },
+      set (value) {
+        this.$store.commit('TimelineSpace/NewTootModal/updateStatus', value)
+      }
     }
   },
   updated () {
@@ -47,15 +59,22 @@ export default {
       this.$store.commit('TimelineSpace/NewTootModal/changeModal', false)
     },
     toot () {
-      if (this.tootForm.status.length <= 0 || this.tootForm.status.length >= 500) {
+      if (this.status.length <= 0 || this.status.length >= 500) {
         return this.$message({
           message: 'Toot length should be 1 to 500',
           type: 'error'
         })
       }
-      this.$store.dispatch('TimelineSpace/NewTootModal/postToot', this.tootForm)
+      let form = {
+        status: this.status
+      }
+      if (this.replyToId !== null) {
+        form = Object.assign(form, {
+          in_reply_to_id: this.replyToId
+        })
+      }
+      this.$store.dispatch('TimelineSpace/NewTootModal/postToot', form)
         .then(() => {
-          this.tootForm.status = ''
           this.$message({
             message: 'Toot',
             type: 'success'

src/renderer/store/TimelineSpace.js

@@ -25,8 +25,7 @@ const TimelineSpace = {
     },
     username: '',
     homeTimeline: [],
-    notifications: [],
-    replyToMessage: null
+    notifications: []
   },
   mutations: {
     updateAccount (state, account) {
@@ -67,9 +66,6 @@ const TimelineSpace = {
           return notification
         }
       })
-    },
-    setReplyTo (state, message) {
-      state.replyToMessage = message
     }
   },
   actions: {
@@ -166,10 +162,6 @@ const TimelineSpace = {
           resolve(res)
         })
       })
-    },
-    openReply ({ commit }, message) {
-      commit('setReplyTo', message)
-      commit('changeNewTootModal', true)
     }
   }
 }

src/renderer/store/TimelineSpace/NewTootModal.js

@@ -3,11 +3,19 @@ import Mastodon from 'mastodon-api'
 const NewTootModal = {
   namespaced: true,
   state: {
-    modalOpen: false
+    modalOpen: false,
+    status: '',
+    replyToMessage: null
   },
   mutations: {
     changeModal (state, value) {
       state.modalOpen = value
+    },
+    setReplyTo (state, message) {
+      state.replyToMessage = message
+    },
+    updateStatus (state, status) {
+      state.status = status
     }
   },
   actions: {
@@ -25,9 +33,16 @@ const NewTootModal = {
         client.post('/statuses', form, (err, data, res) => {
           if (err) return reject(err)
           commit('changeModal', false)
+          commit('setReplyTo', null)
+          commit('updateStatus', '')
           resolve(res)
         })
       })
+    },
+    openReply ({ commit }, message) {
+      commit('setReplyTo', message)
+      commit('updateStatus', `@${message.account.acct} `)
+      commit('changeModal', true)
     }
   }
 }