Merge pull request #178 from a-kriya/store

Push root props in store for direct access

Author: a-kriya

src/ChatWindow.vue

@@ -2,12 +2,9 @@
   <div class="sc-chat-window" :class="{opened: isOpen, closed: !isOpen}">
     <Header
       v-if="showHeader"
-      :show-close-button="showCloseButton"
       :title="title"
-      :image-url="titleImageUrl"
-      :on-close="onClose"
       :colors="colors"
-      :disable-user-list-toggle="disableUserListToggle"
+      @close="$emit('close')"
       @userList="handleUserListToggle"
     >
       <template>
@@ -83,10 +80,6 @@ export default {
       type: Boolean,
       default: false
     },
-    showCloseButton: {
-      type: Boolean,
-      default: true
-    },
     showFile: {
       type: Boolean,
       default: false
@@ -103,18 +96,10 @@ export default {
       type: String,
       required: true
     },
-    titleImageUrl: {
-      type: String,
-      default: ''
-    },
     onUserInputSubmit: {
       type: Function,
       required: true
     },
-    onClose: {
-      type: Function,
-      required: true
-    },
     messageList: {
       type: Array,
       default: () => []
@@ -143,10 +128,6 @@ export default {
       type: Boolean,
       required: true
     },
-    disableUserListToggle: {
-      type: Boolean,
-      default: false
-    },
     showEdition: {
       type: Boolean,
       required: true

src/Header.vue

@@ -1,19 +1,20 @@
 <template>
   <div class="sc-header" :style="{background: colors.header.bg, color: colors.header.text}">
     <slot>
-      <img v-if="imageUrl" class="sc-header--img" :src="imageUrl" alt="" />
+      <img v-if="titleImageUrl" class="sc-header--img" :src="titleImageUrl" alt="" />
       <div v-if="!disableUserListToggle" class="sc-header--title enabled" @click="toggleUserList">
         {{ title }}
       </div>
       <div v-else class="sc-header--title">{{ title }}</div>
     </slot>
-    <div v-if="showCloseButton" class="sc-header--close-button" @click="onClose">
+    <div v-if="showCloseButton" class="sc-header--close-button" @click="$emit('close')">
       <img :src="icons.close.img" :alt="icons.close.name" />
     </div>
   </div>
 </template>
 
 <script>
+import {mapState} from './store/'
 import CloseIcon from './assets/close-icon-big.png'
 
 export default {
@@ -29,36 +30,23 @@ export default {
         }
       }
     },
-    imageUrl: {
-      type: String,
-      required: true
-    },
     title: {
       type: String,
       required: true
     },
-    onClose: {
-      type: Function,
-      required: true
-    },
     colors: {
       type: Object,
       required: true
-    },
-    disableUserListToggle: {
-      type: Boolean,
-      default: false
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
     return {
       inUserList: false
     }
   },
+  computed: {
+    ...mapState(['disableUserListToggle', 'titleImageUrl', 'showCloseButton'])
+  },
   methods: {
     toggleUserList() {
       this.inUserList = !this.inUserList

src/Launcher.vue

@@ -14,15 +14,11 @@
       <img v-else class="sc-open-icon" :src="icons.open.img" :alt="icons.open.name" />
     </div>
     <ChatWindow
-      :show-launcher="showLauncher"
-      :show-close-button="showCloseButton"
       :message-list="messageList"
       :on-user-input-submit="onMessageWasSent"
       :participants="participants"
       :title="chatWindowTitle"
-      :title-image-url="titleImageUrl"
       :is-open="isOpen"
-      :on-close="close"
       :show-emoji="showEmoji"
       :show-file="showFile"
       :show-edition="showEdition"
@@ -35,7 +31,7 @@
       :colors="colors"
       :always-scroll-to-bottom="alwaysScrollToBottom"
       :message-styling="messageStyling"
-      :disable-user-list-toggle="disableUserListToggle"
+      @close="close"
       @scrollToTop="$emit('scrollToTop')"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
@@ -69,6 +65,7 @@
 </template>
 
 <script>
+import store from './store/'
 import ChatWindow from './ChatWindow.vue'
 
 import CloseIcon from './assets/close-icon.png'
@@ -235,15 +232,23 @@ export default {
   },
   computed: {
     chatWindowTitle() {
-      if (this.title !== '') {
-        return this.title
-      }
-      if (this.participants.length === 0) {
-        return 'You'
-      } else if (this.participants.length > 1) {
-        return 'You, ' + this.participants[0].name + ' & others'
-      } else {
-        return 'You & ' + this.participants[0].name
+      if (this.title !== '') return this.title
+
+      if (this.participants.length === 0) return 'You'
+      if (this.participants.length > 1) return 'You, ' + this.participants[0].name + ' & others'
+
+      return 'You & ' + this.participants[0].name
+    }
+  },
+  watch: {
+    $props: {
+      deep: true,
+      immediate: true,
+      handler(props) {
+        // TODO: optimize
+        for (const prop in props) {
+          store.setState(prop, props[prop])
+        }
       }
     }
   },

src/Message.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sc-message" :id="message.id">
+  <div :id="message.id" class="sc-message">
     <div
       class="sc-message--content"
       :class="{
@@ -71,7 +71,6 @@ import EmojiMessage from './messages/EmojiMessage.vue'
 import TypingMessage from './messages/TypingMessage.vue'
 import SystemMessage from './messages/SystemMessage.vue'
 import chatIcon from './assets/chat-icon.svg'
-import store from './store/'
 
 export default {
   components: {
@@ -219,7 +218,7 @@ export default {
   &.confirm-delete .sc-message--toolbox {
     width: auto;
   }
-  .sc-message--toolbox{
+  .sc-message--toolbox {
     transition: left 0.2s ease-out 0s;
     white-space: normal;
     opacity: 0;

src/MessageList.vue

@@ -100,7 +100,7 @@ export default {
     },
     confirmationDeletionMessage: {
       type: String,
-      required: true,
+      required: true
     }
   },
   computed: {

src/UserInput.vue

@@ -145,23 +145,22 @@ export default {
   data() {
     return {
       file: null,
-      inputActive: false,
-      store
+      inputActive: false
     }
   },
   computed: {
     editMessageId() {
-      return this.isEditing && store.editMessage.id
+      return this.isEditing && store.state.editMessage.id
     },
     isEditing() {
-      return store.editMessage && store.editMessage.id
+      return store.state.editMessage && store.state.editMessage.id
     }
   },
   watch: {
     editMessageId(m) {
-      if (store.editMessage != null && store.editMessage != undefined) {
+      if (store.state.editMessage != null && store.state.editMessage != undefined) {
         this.$refs.userInput.focus()
-        this.$refs.userInput.textContent = store.editMessage.data.text
+        this.$refs.userInput.textContent = store.state.editMessage.data.text
       } else {
         this.$refs.userInput.textContent = ''
       }
@@ -262,7 +261,7 @@ export default {
         this.$emit('edit', {
           author: 'me',
           type: 'text',
-          id: store.editMessage.id,
+          id: store.state.editMessage.id,
           data: {text}
         })
         this._editFinish()
@@ -281,7 +280,7 @@ export default {
       this.file = file
     },
     _editFinish() {
-      this.store.editMessage = null
+      store.setState('editMessage', null)
     }
   }
 }

src/messages/TextMessage.vue

@@ -2,13 +2,22 @@
   <div class="sc-message--text" :style="messageColors">
     <template>
       <div class="sc-message--toolbox" :style="{background: messageColors.backgroundColor}">
-        <button v-if="showEdition && me && message.id" @click="edit" :disabled="isEditing">
-          <IconBase :color="isEditing? 'black': messageColors.color" width="10" icon-name="edit">
+        <button v-if="showEdition && me && message.id" :disabled="isEditing" @click="edit">
+          <IconBase :color="isEditing ? 'black' : messageColors.color" width="10" icon-name="edit">
             <IconEdit />
           </IconBase>
         </button>
         <div v-if="showDeletion">
-          <button v-if="me && message.id != null && message.id != undefined" @click="ifelse(showConfirmationDeletion, withConfirm(confirmationDeletionMessage, () => $emit('remove')), () => $emit('remove'))()">
+          <button
+            v-if="me && message.id != null && message.id != undefined"
+            @click="
+              ifelse(
+                showConfirmationDeletion,
+                withConfirm(confirmationDeletionMessage, () => $emit('remove')),
+                () => $emit('remove')
+              )()
+            "
+          >
             <IconBase :color="messageColors.color" width="10" icon-name="remove">
               <IconCross />
             </IconBase>
@@ -38,14 +47,15 @@ import IconEdit from './../components/icons/IconEdit.vue'
 import IconCross from './../components/icons/IconCross.vue'
 import escapeGoat from 'escape-goat'
 import Autolinker from 'autolinker'
-import store from './../store/'
+import store from '../store/'
+
 const fmt = require('msgdown')
 
 export default {
-  data() {
-    return {
-      store
-    }
+  components: {
+    IconBase,
+    IconCross,
+    IconEdit
   },
   props: {
     message: {
@@ -90,12 +100,12 @@ export default {
       return this.message.author === 'me'
     },
     isEditing() {
-      return (store.editMessage && store.editMessage.id) == this.message.id
+      return (store.state.editMessage && store.state.editMessage.id) === this.message.id
     }
   },
   methods: {
     edit() {
-      this.store.editMessage = this.message
+      store.setState('editMessage', this.message)
     },
     ifelse(cond, funcIf, funcElse) {
       return () => {
@@ -107,12 +117,7 @@ export default {
       return () => {
         if (confirm(msg)) func()
       }
-    },
-  },
-  components:{
-    IconBase,
-    IconCross,
-    IconEdit,
+    }
   }
 }
 </script>

src/store/index.js

@@ -1,2 +1,29 @@
+/*
+ * Use store pattern instead of Vuex since this is a plugin
+ * and instantiated externally
+ **/
+
 import Vue from 'vue'
-export default Vue.observable({editMessage: null})
+
+const store = {
+  state: Vue.observable({
+    editMessage: null
+  }),
+
+  setState(key, val) {
+    Vue.set(this.state, key, val)
+  }
+}
+
+function mapState(keys) {
+  const map = {}
+  keys.forEach((key) => {
+    map[key] = function () {
+      return store.state[key]
+    }
+  })
+  return map
+}
+
+export default store
+export {mapState}