Merge pull request #564 from Adamant-im/Feat/save-texts-in-input-fiel…

…ds-message-drafts

feat(Chat): save draft messages

src/components/AChat/AChatForm.vue

@@ -7,6 +7,7 @@
     <v-textarea
       ref="messageTextarea"
       v-model="message"
+      @input="onInput"
       :placeholder="label"
       hide-details
       single-line
@@ -35,6 +36,10 @@ import { nextTick } from 'vue'
 
 export default {
   props: {
+    partnerId: {
+      default: '',
+      type: String
+    },
     messageText: {
       default: '',
       type: String
@@ -124,11 +129,21 @@ export default {
     }
   },
   methods: {
+    onInput: function () {
+      this.$store.commit('draftMessage/saveMessage', {
+        message: this.message,
+        partnerId: this.partnerId
+      })
+    },
     submitMessage() {
       const error = this.validator(this.message)
       if (error === false) {
         this.$emit('message', this.message)
         this.message = ''
+        this.$store.commit('draftMessage/deleteMessage', {
+          message: this.message,
+          partnerId: this.partnerId
+        })
       } else {
         this.$emit('error', error)
       }

src/components/Chat/Chat.vue

@@ -206,11 +206,14 @@
           :send-on-enter="sendMessageOnEnter"
           :show-divider="true"
           :label="chatFormLabel"
-          :message-text="$route.query.messageText"
+          :message-text="
+            $route.query.messageText || $store.getters['draftMessage/draftMessage'](this.partnerId)
+          "
           @message="onMessage"
           @error="onMessageError"
           @esc="replyMessageId = -1"
           :validator="messageValidator.bind(this)"
+          :partner-id="partnerId"
         >
           <template #prepend>
             <chat-menu
@@ -223,7 +226,7 @@
             <a-chat-reply-preview
               :partner-id="partnerId"
               :message="replyMessage"
-              @cancel="replyMessageId = -1"
+              @cancel="cancelReplyMessage"
             />
           </template>
         </a-chat-form>
@@ -252,7 +255,6 @@
         </v-badge>
       </template>
     </a-chat>
-
     <ProgressIndicator :show="replyLoadingChatHistory" />
   </v-card>
 </template>
@@ -484,8 +486,9 @@ export default {
         'Windows 10': this.$t('chats.message_windows_10')
       }[detect().os] || this.$t('chats.message')
 
-    if (this.$route.query.replyToId) {
-      this.replyMessageId = this.$route.query.replyToId
+   const draftMessage = this.$store.getters['draftMessage/draftReplyTold'](this.partnerId)
+    if (draftMessage) {
+      this.replyMessageId = draftMessage
     }
   },
   methods: {
@@ -510,7 +513,15 @@ export default {
           return
       }
     },
+    cancelReplyMessage() {
+      this.replyMessageId = -1
+      this.$store.commit('draftMessage/deleteReplyTold', {
+        replyToId: this.replyMessageId,
+        partnerId: this.partnerId
+      })
+    },
     sendMessage(message) {
+      this.$store.dispatch('draftMessage/deleteDraft', { partnerId: this.partnerId })
       const replyToId = this.replyMessageId > -1 ? this.replyMessageId : undefined
 
       return this.$store
@@ -667,6 +678,10 @@ export default {
 
       this.replyMessageId = message.id
       this.$refs.chatForm.focus()
+      this.$store.commit('draftMessage/saveReplyToId', {
+        replyToId: message.id,
+        partnerId: this.partnerId
+      })
     },
     copyMessageToClipboard({ message }) {
       this.closeActionsMenu()

src/store/index.js

@@ -27,6 +27,7 @@ import bitcoinModule from './modules/btc'
 import nodesModule from './modules/nodes'
 import delegatesModule from './modules/delegates'
 import nodesPlugin from './modules/nodes/nodes-plugin'
+import draftMessage from '@/store/modules/draft-message'
 import snackbar from './modules/snackbar'
 import language from './modules/language'
 import chat from './modules/chat'
@@ -133,6 +134,7 @@ const store = {
     },
     logout({ dispatch }) {
       dispatch('reset')
+      dispatch('draftMessage/resetState', null, { root: true })
     },
     unlock({ state, dispatch }) {
       // user updated an app, F5 or something
@@ -228,6 +230,7 @@ const store = {
     delegates: delegatesModule, // Voting for delegates screen
     nodes: nodesModule, // ADAMANT nodes
     snackbar,
+    draftMessage,
     language,
     chat,
     options,

src/store/modules/draft-message/index.ts

@@ -0,0 +1,83 @@
+import { MutationTree, GetterTree, ActionTree } from 'vuex'
+import { RootState } from '@/store/types'
+
+export interface DraftState {
+  drafts: { [key: string]: { replyToId?: string; message?: string } }
+}
+
+const state = (): DraftState => ({
+  drafts: {}
+})
+
+const mutations: MutationTree<DraftState> = {
+  saveReplyToId(state, payload: { partnerId: string; replyToId: string }) {
+    if (state.drafts[payload.partnerId]) {
+      state.drafts[payload.partnerId].replyToId = payload.replyToId
+    } else {
+      state.drafts[payload.partnerId] = {
+        replyToId: payload.replyToId
+      }
+    }
+  },
+
+  saveMessage(state, payload: { partnerId: string; message: string }) {
+    if (state.drafts[payload.partnerId]) {
+      state.drafts[payload.partnerId].message = payload.message
+    } else {
+      state.drafts[payload.partnerId] = {
+        message: payload.message
+      }
+    }
+  },
+
+  deleteReplyTold(state, payload: { partnerId: string; replyToId: string }) {
+    delete state.drafts[payload.partnerId].replyToId
+  },
+
+  deleteMessage(state, payload: { partnerId: string; message: string }) {
+    delete state.drafts[payload.partnerId].message
+  },
+
+  reset(state) {
+    state.drafts = {}
+  }
+}
+
+const getters: GetterTree<DraftState, RootState> = {
+  draftMessage: (state) => (partnerId: string) => {
+    const objMessage = state.drafts[partnerId]
+    if (objMessage) {
+      return objMessage.message
+    } else {
+      return ''
+    }
+  },
+
+  draftReplyTold: (state) => (partnerId: string) => {
+    const objMessage = state.drafts[partnerId]
+    if (objMessage) {
+      return objMessage.replyToId
+    } else {
+      return ''
+    }
+  }
+}
+
+const actions: ActionTree<DraftState, RootState> = {
+  resetState(context) {
+    context.commit('reset')
+  },
+
+  deleteDraft(context, payload: { partnerId: string }) {
+    context.commit('deleteReplyTold', payload)
+    context.commit('deleteMessage', payload)
+  }
+}
+
+export default {
+  state,
+  mutations,
+  getters,
+  actions,
+  namespaced: true
+}

src/store/types.ts

@@ -1,3 +1,5 @@
+import { DraftState } from '@/store/modules/draft-message'
+
 export interface RootState {
   address: string
   balance: number
@@ -25,4 +27,5 @@ export interface RootState {
   identicon: any
   notification: any
   rate: any
+  draftMessage: DraftState
 }