Merge pull request #11634 from nextcloud/feat/3055/store-draft-messag…

…es-in-browser

Feat(draft chat input): Store input in browser storage

src/components/NewMessage/NewMessage.vue

@@ -192,6 +192,8 @@
 </template>
 
 <script>
+import debounce from 'debounce'
+
 import BellOff from 'vue-material-design-icons/BellOff.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
@@ -333,6 +335,7 @@ export default {
 			clipboardTimeStamp: null,
 			typingInterval: null,
 			wasTypingWithinInterval: false,
+			debouncedUpdateChatInput: debounce(this.updateChatInput, 200)
 		}
 	},
 
@@ -459,6 +462,10 @@ export default {
 			return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
 		},
 
+		chatInput() {
+			return this.chatExtrasStore.getChatInput(this.token)
+		},
+
 		chatEditInput() {
 			return this.chatExtrasStore.getChatEditInput(this.token)
 		},
@@ -475,23 +482,15 @@ export default {
 		},
 
 		text(newValue) {
-			if (this.messageToEdit) {
-				this.chatExtrasStore.setChatEditInput({
-					token: this.token,
-					text: newValue,
-					parameters: this.messageToEdit.messageParameters
-				})
-			} else {
-				this.chatExtrasStore.setChatInput({ token: this.token, text: newValue })
-			}
+			this.debouncedUpdateChatInput(newValue)
 		},
 
 		messageToEdit(newValue) {
 			if (newValue) {
 				this.text = this.chatExtrasStore.getChatEditInput(this.token)
 				this.chatExtrasStore.removeParentIdToReply(this.token)
 			} else {
-				this.text = this.chatExtrasStore.getChatInput(this.token)
+				this.text = this.chatInput
 			}
 		},
 
@@ -512,8 +511,8 @@ export default {
 			handler(token) {
 				if (token) {
 					this.text = this.messageToEdit
-						? this.chatExtrasStore.getChatEditInput(token)
-						: this.chatExtrasStore.getChatInput(token)
+						? this.chatEditInput
+						: this.chatInput
 				} else {
 					this.text = ''
 				}
@@ -529,7 +528,6 @@ export default {
 		EventBus.$on('upload-start', this.handleUploadSideEffects)
 		EventBus.$on('upload-discard', this.handleUploadSideEffects)
 		EventBus.$on('retry-message', this.handleRetryMessage)
-		this.text = this.chatExtrasStore.getChatInput(this.token)
 
 		if (!this.$store.getters.areFileTemplatesInitialised) {
 			this.$store.dispatch('getFileTemplates')
@@ -581,13 +579,25 @@ export default {
 			}
 		},
 
+		updateChatInput(text) {
+			if (this.messageToEdit) {
+				this.chatExtrasStore.setChatEditInput({
+					token: this.token,
+					text,
+					parameters: this.messageToEdit.messageParameters
+				})
+			} else if (text && text !== this.chatInput) {
+				this.chatExtrasStore.setChatInput({ token: this.token, text })
+			} else if (!text && this.chatInput) {
+				this.chatExtrasStore.removeChatInput(this.token)
+			}
+		},
+
 		handleUploadSideEffects() {
 			if (this.upload) {
 				return
 			}
 			this.$nextTick(() => {
-				// reset or fill main input in chat view from the store
-				this.text = this.chatExtrasStore.getChatInput(this.token)
 				// refocus input as the user might want to type further
 				this.focusInput()
 			})
@@ -622,9 +632,11 @@ export default {
 				this.text = parseSpecialSymbols(this.text)
 			}
 
+			// Clear input content from store
+			this.chatExtrasStore.removeChatInput(this.token)
+
 			if (this.upload) {
-				// Clear input content from store and remove Quote component
-				this.chatExtrasStore.setChatInput({ token: this.token, text: '' })
+				// remove Quote component
 				this.chatExtrasStore.removeParentIdToReply(this.token)
 
 				if (this.$store.getters.getInitialisedUploads(this.$store.getters.currentUploadId).length) {

src/store/conversationsStore.spec.js

@@ -63,6 +63,7 @@ jest.mock('@nextcloud/event-bus')
 jest.mock('../services/BrowserStorage.js', () => ({
 	getItem: jest.fn(),
 	setItem: jest.fn(),
+	removeItem: jest.fn(),
 }))
 
 describe('conversationsStore', () => {

src/stores/__tests__/chatExtras.spec.js

@@ -1,5 +1,6 @@
 import { setActivePinia, createPinia } from 'pinia'
 
+import BrowserStorage from '../../services/BrowserStorage.js'
 import { EventBus } from '../../services/EventBus.js'
 import { getUserAbsence } from '../../services/participantsService.js'
 import { generateOCSErrorResponse, generateOCSResponse } from '../../test-helpers.js'
@@ -103,6 +104,7 @@ describe('chatExtrasStore', () => {
 
 			// Assert
 			expect(chatExtrasStore.getChatInput('token-1')).toStrictEqual('message-1')
+			expect(BrowserStorage.getItem('chatInput_token-1')).toBe('message-1')
 		})
 
 		it('clears current input message', () => {
@@ -115,6 +117,25 @@ describe('chatExtrasStore', () => {
 			// Assert
 			expect(chatExtrasStore.chatInput['token-1']).not.toBeDefined()
 			expect(chatExtrasStore.getChatInput('token-1')).toBe('')
+			expect(BrowserStorage.getItem('chatInput_token-1')).toBe(null)
+		})
+
+		it('restores chat input from the browser storage if any', () => {
+			// Arrange
+			BrowserStorage.setItem('chatInput_token-1', 'message draft')
+
+			// Act
+			chatExtrasStore.restoreChatInput('token-1')
+
+			// Assert
+			expect(chatExtrasStore.getChatInput('token-1')).toStrictEqual('message draft')
+
+			// Arrange 2 - no chat input in the browser storage
+			chatExtrasStore.removeChatInput('token-1')
+			// Act
+			chatExtrasStore.restoreChatInput('token-1')
+			// Assert
+			expect(chatExtrasStore.getChatInput('token-1')).toBe('')
 		})
 	})
 

src/stores/chatExtras.js

@@ -24,6 +24,7 @@
 import { defineStore } from 'pinia'
 import Vue from 'vue'
 
+import BrowserStorage from '../services/BrowserStorage.js'
 import { EventBus } from '../services/EventBus.js'
 import { getUserAbsence } from '../services/participantsService.js'
 import { parseSpecialSymbols, parseMentions } from '../utils/textParse.ts'
@@ -61,10 +62,6 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 			}
 		},
 
-		getChatInput: (state) => (token) => {
-			return state.chatInput[token] ?? ''
-		},
-
 		getChatEditInput: (state) => (token) => {
 			return state.chatEditInput[token] ?? ''
 		},
@@ -75,6 +72,19 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 	},
 
 	actions: {
+		/**
+		 * Fetch an absence status for user and save to store
+		 *
+		 * @param {string} token The conversation token
+		 * @return {string} The input text
+		 */
+		getChatInput(token) {
+			if (!this.chatInput[token]) {
+				this.restoreChatInput(token)
+			}
+			return this.chatInput[token] ?? ''
+		},
+
 		/**
 		 * Fetch an absence status for user and save to store
 		 *
@@ -130,6 +140,18 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 			Vue.delete(this.parentToReply, token)
 		},
 
+		/**
+		 * Restore chat input from the browser storage and save to store
+		 *
+		 * @param {string} token The conversation token
+		 */
+		restoreChatInput(token) {
+			const chatInput = BrowserStorage.getItem('chatInput_' + token)
+			if (chatInput) {
+				Vue.set(this.chatInput, token, chatInput)
+			}
+		},
+
 		/**
 		 * Add a current input value to the store for a given conversation token
 		 *
@@ -139,6 +161,7 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 		 */
 		setChatInput({ token, text }) {
 			const parsedText = parseSpecialSymbols(text)
+			BrowserStorage.setItem('chatInput_' + token, parsedText)
 			Vue.set(this.chatInput, token, parsedText)
 		},
 
@@ -186,6 +209,7 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 		 * @param {string} token The conversation token
 		 */
 		removeChatInput(token) {
+			BrowserStorage.removeItem('chatInput_' + token)
 			Vue.delete(this.chatInput, token)
 		},