Merge pull request #35 from h3poteto/iss-28

closes #28 Post new toot

src/main/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { app, ipcMain, BrowserWindow, shell } from 'electron'
+import { app, ipcMain, BrowserWindow, shell, Menu } from 'electron'
 import Datastore from 'nedb'
 import storage from 'electron-json-storage'
 import empty from 'is-empty'
@@ -28,6 +28,39 @@ let db = new Datastore({
 })
 
 function createWindow () {
+  /**
+   * Set menu
+   */
+  const template = [
+    {
+      label: 'Toot',
+      submenu: [
+        {
+          label: 'New Toot',
+          accelerator: 'CmdOrCtrl+N',
+          role: 'toot',
+          click: () => {
+            mainWindow.webContents.send('CmdOrCtrl+N')
+          }
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Reply',
+          accelerator: 'CmdOrCtrl+R',
+          role: 'reply',
+          click: () => {
+            mainWindow.webContents.send('CmdOrCtrl+R')
+          }
+        }
+      ]
+    }
+  ]
+
+  const menu = Menu.buildFromTemplate(template)
+  Menu.setApplicationMenu(menu)
+
   /**
    * Initial window options
    */

src/renderer/components/TimelineSpace.vue

@@ -4,15 +4,17 @@
   <div class="content">
     <router-view></router-view>
   </div>
+  <new-toot-modal></new-toot-modal>
 </div>
 </template>
 
 <script>
 import SideMenu from './TimelineSpace/SideMenu'
+import NewTootModal from './TimelineSpace/NewTootModal'
 
 export default {
   name: 'timeline-space',
-  components: { SideMenu },
+  components: { SideMenu, NewTootModal },
   created () {
     this.$store.dispatch('TimelineSpace/fetchAccount', this.$route.params.id)
       .then((account) => {
@@ -20,6 +22,7 @@ export default {
         this.$store.dispatch('TimelineSpace/startUserStreaming', account)
         this.$store.dispatch('TimelineSpace/username', account)
         this.$store.dispatch('TimelineSpace/fetchNotifications', account)
+        this.$store.dispatch('TimelineSpace/watchShortcutEvents', account)
       })
       .catch(() => {
         this.$message({
@@ -35,8 +38,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .content {
   margin-left: 180px;
 }
+
 </style>

src/renderer/components/TimelineSpace/NewTootModal.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-dialog
+    title="New Toot"
+    :visible.sync="newTootModal"
+    width="400px"
+    custom-class="new-toot-modal">
+    <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>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <span class="text-count">{{ 500 - tootForm.body.length }}</span>
+      <el-button @click="close">Cancel</el-button>
+      <el-button type="primary" @click="toot">Toot</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'new-toot-modal',
+  data () {
+    return {
+      tootForm: {
+        body: ''
+      }
+    }
+  },
+  computed: {
+    newTootModal: {
+      get () {
+        return this.$store.state.TimelineSpace.newTootModal
+      },
+      set (value) {
+        this.$store.commit('TimelineSpace/changeNewTootModal', value)
+      }
+    }
+  },
+  updated () {
+    if (this.newTootModal) {
+      this.$refs.body.focus()
+    }
+  },
+  methods: {
+    close () {
+      this.$store.commit('TimelineSpace/changeNewTootModal', false)
+    },
+    toot () {
+      if (this.tootForm.body.length <= 0 || this.tootForm.body.length >= 500) {
+        return this.$message({
+          message: 'Toot length should be 1 to 500',
+          type: 'error'
+        })
+      }
+      this.$store.dispatch('TimelineSpace/postToot', this.tootForm.body)
+        .then(() => {
+          this.tootForm.body = ''
+          this.$message({
+            message: 'Toot',
+            type: 'success'
+          })
+        })
+        .catch(() => {
+          this.$message({
+            message: 'Could not toot',
+            type: 'error'
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.new-toot-modal {
+  .el-dialog__header {
+    background-color: #4a5664;
+
+    .el-dialog__title {
+      color: #ebeef5;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0;
+
+    .body {
+      textarea {
+        display: block;
+        padding: 5px 15px;
+        line-height: 1.5;
+        box-sizing: border-box;
+        width: 100%;
+        font-size: inherit;
+        color: #606266;
+        background-color: #ffffff;
+        background-image: none;
+        border: 0;
+        border-radius: 4px;
+        resize: none;
+        height: 120px;
+        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+      }
+
+      textarea:focus {
+        outline: 0;
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    background-color: #f2f6fc;
+
+    .text-count {
+      padding-right: 24px;
+      color: #909399;
+    }
+  }
+}
+</style>

src/renderer/store/TimelineSpace.js

@@ -14,7 +14,8 @@ const TimelineSpace = {
     },
     username: '',
     homeTimeline: [],
-    notifications: []
+    notifications: [],
+    newTootModal: false
   },
   mutations: {
     updateAccount (state, account) {
@@ -34,6 +35,9 @@ const TimelineSpace = {
     },
     insertNotifications (state, notifications) {
       state.notifications = state.notifications.concat(notifications)
+    },
+    changeNewTootModal (state, modal) {
+      state.newTootModal = modal
     }
   },
   actions: {
@@ -82,6 +86,14 @@ const TimelineSpace = {
     stopUserStreaming ({ commit }) {
       ipcRenderer.send('stop-user-streaming')
     },
+    watchShortcutEvents ({ commit }, account) {
+      ipcRenderer.on('CmdOrCtrl+N', () => {
+        commit('changeNewTootModal', true)
+      })
+      ipcRenderer.on('CmdOrCtrl+R', () => {
+        console.log('reply')
+      })
+    },
     fetchHomeTimeline ({ commit }, account) {
       return new Promise((resolve, reject) => {
         const client = new Mastodon(
@@ -117,8 +129,34 @@ const TimelineSpace = {
             reject(err)
           })
       })
+    },
+    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
+        })
+          .then((res) => {
+            commit('changeNewTootModal', false)
+            resolve(res)
+          })
+          .catch((err) => {
+            reject(err)
+          })
+      })
     }
   }
 }
 
 export default TimelineSpace
+
+class AuthenticationError {
+}