refs #52 Use own vuex store in NewTootModal

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

@@ -14,7 +14,7 @@
       </div>
       <div class="content" v-html="message.content" @click.capture.prevent="tootClick"></div>
       <div class="tool-box">
-        <el-button type="text"><icon name="reply" scale="0.9"></icon></el-button>
+        <el-button type="text" @click="openReply(message)"><icon name="reply" scale="0.9"></icon></el-button>
         <el-button type="text"><icon name="retweet" scale="0.9"></icon></el-button>
         <el-button type="text" @click="changeFavourite(message)" :class="message.favourited ? 'favourited' : ''"><icon name="star" scale="0.9"></icon></el-button>
       </div>
@@ -41,6 +41,9 @@ export default {
         shell.openExternal(link)
       }
     },
+    openReply (message) {
+      this.$store.dispatch('TimelineSpace/openReply', message)
+    },
     changeFavourite (message) {
       if (message.favourited) {
         this.$store.dispatch('TimelineSpace/Cards/Toot/removeFavourite', message)

src/renderer/components/TimelineSpace/NewTootModal.vue

@@ -5,12 +5,12 @@
     width="400px"
     class="new-toot-modal" v-on:submit.prevent="toot">
     <el-form :model="tootForm">
-      <div class="body">
-        <textarea v-model="tootForm.body" ref="body" @keyup.ctrl.enter.exact="toot" @keyup.meta.enter.exact="toot"></textarea>
+      <div class="status">
+        <textarea v-model="tootForm.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.body.length }}</span>
+      <span class="text-count">{{ 500 - tootForm.status.length }}</span>
       <el-button @click="close">Cancel</el-button>
       <el-button type="primary" @click="toot">Toot</el-button>
     </span>
@@ -23,39 +23,39 @@ export default {
   data () {
     return {
       tootForm: {
-        body: ''
+        status: ''
       }
     }
   },
   computed: {
     newTootModal: {
       get () {
-        return this.$store.state.TimelineSpace.newTootModal
+        return this.$store.state.TimelineSpace.NewTootModal.modalOpen
       },
       set (value) {
-        this.$store.commit('TimelineSpace/changeNewTootModal', value)
+        this.$store.commit('TimelineSpace/NewTootModal/changeModal', value)
       }
     }
   },
   updated () {
     if (this.newTootModal) {
-      this.$refs.body.focus()
+      this.$refs.status.focus()
     }
   },
   methods: {
     close () {
-      this.$store.commit('TimelineSpace/changeNewTootModal', false)
+      this.$store.commit('TimelineSpace/NewTootModal/changeModal', false)
     },
     toot () {
-      if (this.tootForm.body.length <= 0 || this.tootForm.body.length >= 500) {
+      if (this.tootForm.status.length <= 0 || this.tootForm.status.length >= 500) {
         return this.$message({
           message: 'Toot length should be 1 to 500',
           type: 'error'
         })
       }
-      this.$store.dispatch('TimelineSpace/postToot', this.tootForm.body)
+      this.$store.dispatch('TimelineSpace/NewTootModal/postToot', this.tootForm)
         .then(() => {
-          this.tootForm.body = ''
+          this.tootForm.status = ''
           this.$message({
             message: 'Toot',
             type: 'success'
@@ -85,7 +85,7 @@ export default {
   .el-dialog__body {
     padding: 0;
 
-    .body {
+    .status {
       textarea {
         display: block;
         padding: 5px 15px;

src/renderer/store/TimelineSpace.js

@@ -5,6 +5,7 @@ import Favourites from './TimelineSpace/Favourites'
 import Local from './TimelineSpace/Local'
 import Public from './TimelineSpace/Public'
 import Cards from './TimelineSpace/Cards'
+import NewTootModal from './TimelineSpace/NewTootModal'
 import router from '../router'
 
 const TimelineSpace = {
@@ -14,7 +15,8 @@ const TimelineSpace = {
     Favourites,
     Local,
     Public,
-    Cards
+    Cards,
+    NewTootModal
   },
   state: {
     account: {
@@ -24,7 +26,7 @@ const TimelineSpace = {
     username: '',
     homeTimeline: [],
     notifications: [],
-    newTootModal: false
+    replyToMessage: null
   },
   mutations: {
     updateAccount (state, account) {
@@ -45,9 +47,6 @@ const TimelineSpace = {
     insertNotifications (state, notifications) {
       state.notifications = state.notifications.concat(notifications)
     },
-    changeNewTootModal (state, modal) {
-      state.newTootModal = modal
-    },
     updateToot (state, message) {
       // Replace target message in homeTimeline and notifications
       state.homeTimeline = state.homeTimeline.map((toot) => {
@@ -68,6 +67,9 @@ const TimelineSpace = {
           return notification
         }
       })
+    },
+    setReplyTo (state, message) {
+      state.replyToMessage = message
     }
   },
   actions: {
@@ -124,7 +126,7 @@ const TimelineSpace = {
     },
     watchShortcutEvents ({ commit }) {
       ipcRenderer.on('CmdOrCtrl+N', () => {
-        commit('changeNewTootModal', true)
+        commit('TimelineSpace/NewTootModal/changeModal', true, { root: true })
       })
       ipcRenderer.on('CmdOrCtrl+R', () => {
         // TODO: reply window
@@ -165,33 +167,15 @@ const TimelineSpace = {
         })
       })
     },
-    postToot ({ commit, state }, body) {
-      return new Promise((resolve, reject) => {
-        if (state.account.accessToken === undefined || state.account.accessToken === null) {
-          return reject(new AuthenticationError())
-        }
-        const client = new Mastodon(
-          {
-            access_token: state.account.accessToken,
-            api_url: state.account.baseURL + '/api/v1'
-          }
-        )
-        client.post('/statuses', {
-          status: body
-        }, (err, data, res) => {
-          if (err) return reject(err)
-          commit('changeNewTootModal', false)
-          resolve(res)
-        })
-      })
+    openReply ({ commit }, message) {
+      commit('setReplyTo', message)
+      commit('changeNewTootModal', true)
     }
   }
 }
 
 export default TimelineSpace
 
-class AuthenticationError {}
-
 function buildNotification (notification) {
   switch (notification.type) {
     case 'favourite':

src/renderer/store/TimelineSpace/NewTootModal.js

@@ -0,0 +1,37 @@
+import Mastodon from 'mastodon-api'
+
+const NewTootModal = {
+  namespaced: true,
+  state: {
+    modalOpen: false
+  },
+  mutations: {
+    changeModal (state, value) {
+      state.modalOpen = value
+    }
+  },
+  actions: {
+    postToot ({ state, commit, rootState }, form) {
+      return new Promise((resolve, reject) => {
+        if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
+          return reject(new AuthenticationError())
+        }
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          }
+        )
+        client.post('/statuses', form, (err, data, res) => {
+          if (err) return reject(err)
+          commit('changeModal', false)
+          resolve(res)
+        })
+      })
+    }
+  }
+}
+
+export default NewTootModal
+
+class AuthenticationError {}