Create Vuex store

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

11 files changed, 242 insertions, 9 deletions

diff --git a/package-lock.json b/package-lock.json
index 4f6a065c9..85834191c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6414,6 +6414,21 @@
 			"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
 			"dev": true
 		},
+		"nextcloud-auth": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/nextcloud-auth/-/nextcloud-auth-0.0.3.tgz",
+			"integrity": "sha512-qEAl55QJg2gZZIpfin9NzCPWm/Mfbo+HOdaXpsastPZw8oA7YLFFZon3x6SQ/p/LVIPQzRZmMpjd8R2FAAbjzg==",
+			"requires": {
+				"core-js": "^3.1.4"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.2.1",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.2.1.tgz",
+					"integrity": "sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw=="
+				}
+			}
+		},
 		"nextcloud-axios": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/nextcloud-axios/-/nextcloud-axios-0.2.1.tgz",
@@ -6422,6 +6437,21 @@
 				"axios": "^0.19.0"
 			}
 		},
+		"nextcloud-router": {
+			"version": "0.0.9",
+			"resolved": "https://registry.npmjs.org/nextcloud-router/-/nextcloud-router-0.0.9.tgz",
+			"integrity": "sha512-w0i4xqFwJJuXNWFf9AB9huCWW5XmwdJHSHa7oXlOLTAvP9WxwU3KCm/mcKy8Eb0cT0ElRPg72HLUxl7oyEWoBQ==",
+			"requires": {
+				"core-js": "^3.1.4"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.2.1",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.2.1.tgz",
+					"integrity": "sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw=="
+				}
+			}
+		},
 		"nextcloud-vue": {
 			"version": "0.12.3",
 			"resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.12.3.tgz",
@@ -10413,6 +10443,11 @@
 				"fecha": "^2.3.3"
 			}
 		},
+		"vuex": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
+			"integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
+		},
 		"watchpack": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index cbea6d92b..a987fbded 100644
--- a/package.json
+++ b/package.json
@@ -33,10 +33,14 @@
 		"stylelint:fix": "stylelint src --fix"
 	},
 	"dependencies": {
+		"nextcloud-auth": "0.0.3",
+		"nextcloud-axios": "^0.2.1",
+		"nextcloud-router": "0.0.9",
 		"nextcloud-vue": "^0.12.3",
 		"vue": "^2.6.10",
 		"vue-contenteditable-directive": "^1.2.0",
-		"vue-virtual-scroller": "^1.0.0-rc.2"
+		"vue-virtual-scroller": "^1.0.0-rc.2",
+		"vuex": "^3.1.1"
 	},
 	"browserslist": [
 		"extends browserslist-config-nextcloud"
diff --git a/src/App.vue b/src/App.vue
index 1d84325e3..73c4823fd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,7 @@
 				button-id="new-conversation-button"
 				button-class="icon-add"
 				@click="newButtonAction" />
+			<NewConversationForm />
 			<ul id="app-vueexample-navigation">
 				<AppNavigationItem title="Billie Holiday">
 					<Avatar slot="icon" user="Billie Holiday" display-name="Billie Holiday" />
@@ -100,6 +101,7 @@ import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
 import Avatar from 'nextcloud-vue/dist/Components/Avatar'
 import MessageList from './components/MessageList/MessageList'
 import NewMessageForm from './components/NewMessageForm/NewMessageForm'
+import NewConversationForm from './components/NewConversationForm/NewConversationForm'
 
 export default {
 	name: 'App',
@@ -116,7 +118,8 @@ export default {
 		ActionButton,
 		Avatar,
 		MessageList,
-		NewMessageForm
+		NewMessageForm,
+		NewConversationForm
 	},
 	data: function() {
 		return {
@@ -200,6 +203,7 @@ export default {
 	beforeMount() {
 		window.addEventListener('resize', this.onResize)
 		this.onResize()
+		this.$store.dispatch('fetchConversations')
 	},
 	methods: {
 		onResize() {
diff --git a/src/components/AdvancedInput/AdvancedInput.vue b/src/components/AdvancedInput/AdvancedInput.vue
index da9ad326b..8f127023d 100644
--- a/src/components/AdvancedInput/AdvancedInput.vue
+++ b/src/components/AdvancedInput/AdvancedInput.vue
@@ -33,7 +33,7 @@ export default {
 	props: {
 		placeholderText: {
 			type: String,
-			default: 'Type something'
+			default: 'New Message ...'
 		},
 		activeInput: {
 			type: Boolean,
diff --git a/src/components/Message/Message.vue b/src/components/Message/Message.vue
index 2bcb774ab..ea3d0146c 100644
--- a/src/components/Message/Message.vue
+++ b/src/components/Message/Message.vue
@@ -27,12 +27,12 @@
 		@mouseleave="hover=false">
 		<div class="message">
 			<div class="message-avatar">
-				<Avatar v-if="isFirstMessage" :user="userName" :display-name="userName" />
+				<Avatar v-show="isFirstMessage" :user="userName" :display-name="userName" />
 			</div>
 			<slot />
 			<div class="message-right">
 				<h6>{{ messageTime }}</h6>
-				<Actions v-if="hover" class="actions">
+				<Actions v-show="hover" class="actions">
 					<ActionButton icon="icon-reply" @click="alert('Edit')">
 						Reply
 					</ActionButton>
diff --git a/src/components/MessageList/MessageList.vue b/src/components/MessageList/MessageList.vue
index 59635e899..0c340e009 100644
--- a/src/components/MessageList/MessageList.vue
+++ b/src/components/MessageList/MessageList.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<DynamicScroller
-		:items="messagesOldArray"
+		:items="messageList"
 		:min-item-size="60"
 		class="scroller">
 		<template v-slot="{ item, index, active }">
@@ -169,6 +169,10 @@ export default {
 			})
 		},
 
+		messageList() {
+			return this.$store.getters.messagesList
+		},
+
 		messages() {
 			const messages = {}
 			this.messagesArray.forEach(message => {
@@ -185,6 +189,6 @@ export default {
 
 <style lang="scss" scoped>
 .scroller {
-	height: auto
+	flex: 1 0;
 }
 </style>
diff --git a/src/components/NewRoomForm/NewRoomForm.vue b/src/components/NewConversationForm/NewConversationForm.vue
index 4bdce35b6..4173b7ad2 100644
--- a/src/components/NewRoomForm/NewRoomForm.vue
+++ b/src/components/NewConversationForm/NewConversationForm.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="NewRoomForm">
+	<div class="NewConversationForm">
 		<Multiselect />
 		<AppNavigationNew />
 	</div>
@@ -31,7 +31,7 @@ import AppNavigationNew from 'nextcloud-vue/dist/Components/AppNavigationNew'
 import Multiselect from 'nextcloud-vue/dist/Components/Multiselect'
 
 export default {
-	name: 'NewRoomForm',
+	name: 'NewConversationForm',
 	components: {
 		AppNavigationNew,
 		Multiselect
diff --git a/src/main.js b/src/main.js
index 758ab937d..5aab72807 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,15 +21,32 @@
  */
 import Vue from 'vue'
 import App from './App'
+import Vuex from 'vuex'
 import contenteditableDirective from 'vue-contenteditable-directive'
+import store from './store'
+import { generateFilePath } from 'nextcloud-router'
+import { getRequestToken } from 'nextcloud-auth'
+
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(getRequestToken())
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// OC.generateUrl ensure the index.php (or not)
+// We do not want the index.php since we're loading files
+// eslint-disable-next-line
+__webpack_public_path__ = generateFilePath('spreed', '', 'js/')
 
 Vue.prototype.t = t
 Vue.prototype.n = n
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 Vue.use(contenteditableDirective)
+Vue.use(Vuex)
 
 export default new Vue({
 	el: '#content',
+	store,
 	render: h => h(App)
 })
diff --git a/src/store/conversations.js b/src/store/conversations.js
new file mode 100644
index 000000000..3a0149adb
--- /dev/null
+++ b/src/store/conversations.js
@@ -0,0 +1,77 @@
+/**
+ * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import axios from 'nextcloud-axios'
+import { generateOcsUrl } from 'nextcloud-router'
+
+const state = {
+	conversations: {
+	},
+	conversationsNames: {
+	}
+}
+
+const getters = {
+	conversationsList: state => Object.values(state.conversations)
+}
+
+const mutations = {
+	/**
+     * Adds a conversation to the store
+     * @param {Object} state current store state
+     * @param {Object} conversation the conversation api object
+     */
+	addConversation(state, conversation) {
+		state.conversations[conversation.id] = conversation
+	},
+	/**
+     *
+     * @param {Object} state current state object
+     * @param {Object} object destructuring object
+     * @param {int} object.id conversation id
+     * @param {string} object.displayName conversation name
+     */
+	indexConversationName(state, { id, displayName }) {
+		state.conversationsNames[id] = displayName
+	}
+}
+
+const actions = {
+	/**
+     * Add a conversation to the store and index the displayname
+     * @param {Object} context default store context
+     * @param {Object} conversation the conversation api object
+     */
+	addConversation(context, conversation) {
+		context.commit('addConversation', conversation)
+		context.commit('indexConversationName', conversation)
+	},
+	async fetchConversations(context) {
+		try {
+			const response = await axios.get(generateOcsUrl('apps/spreed/api/v1', 2) + 'room')
+			console.debug(response)
+		} catch (error) {
+			console.debug(error)
+		}
+	}
+}
+
+export default { state, mutations, getters, actions }
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 000000000..94d48265f
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,41 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import Vuex, { Store } from 'vuex'
+import conversations from './conversations'
+import messages from './messages'
+
+Vue.use(Vuex)
+
+const mutations = {}
+
+export default new Store({
+	modules: {
+		conversations,
+		messages
+	},
+
+	mutations,
+
+	strict: process.env.NODE_ENV !== 'production'
+})
diff --git a/src/store/messages.js b/src/store/messages.js
new file mode 100644
index 000000000..0ef0d57b8
--- /dev/null
+++ b/src/store/messages.js
@@ -0,0 +1,51 @@
+/**
+ * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+const state = {
+	messages: {
+		1: {
+			messageText: 'hello'
+		}
+	}
+}
+
+const getters = {
+	messagesList: state => Object.values(state.messages)
+}
+
+const mutations = {
+	addMessage(state, message) {
+		state.messages[message.id] = message
+	}
+}
+
+const actions = {
+	processMessage(context, message) {
+		if (message.parent) {
+			context.commit('addMessage', message.parent)
+			message.parent = message.parent.id
+		}
+		context.commit('addMessage', message)
+	}
+}
+
+export default { state, mutations, getters, actions }