Merge branch 'hotfix/separateFilterAndModal'

client/src/components/chains/common/FilterByTags.vue

@@ -11,8 +11,6 @@
       <tag-label 
         v-for="tag in tagsTop" :key="tag.text" 
         :tag="tag"
-        :include="include"
-        :exclude="exclude"
         @add="add"
         @remove="remove"
         ></tag-label>
@@ -27,37 +25,16 @@
       </a>
       <a href="#" class="link" @click.prevent="showAllTags" v-if="showAllTagsBtn">{{$t('profile.showAllTags')}}</a>
     </div>
-    <filter-by-tags-modal
-      v-if="modalShow"
-      :tags="tags"
-      :is-show.sync="modalShow"
-      :include="include"
-      :exclude="exclude"
-      :clear-filter-in-active="clearFilterInActive"
-      @add="add"
-      @remove="remove"
-      @clear="clear"
-    ></filter-by-tags-modal>
   </div>
 </template>
 
 <script>
 import TagLabel from './TagLabel.vue'
-import FilterByTagsModal from './FilterByTagsModal.vue'
 const TOP_LIMIT = 10
 export default {
   name: 'FilterByTags',
   components: {
-    TagLabel,
-    FilterByTagsModal
-  },
-  data() {
-    return {
-      fixed: false,
-      modalShow: false,
-      include: {},
-      exclude: {}
-    }
+    TagLabel
   },
   props: {
     tags: {
@@ -70,24 +47,18 @@ export default {
       this.$emit('change', { include: this.include, exclude: this.exclude })
     },
     clear() {
-      this.include = {}
-      this.exclude = {}
+      this.$store.commit('filterByTags/CLEAR_FILTERS')
       this.change()
     },
     showAllTags() {
-      this.modalShow = true
+      this.$store.commit('filterByTags/SET_MODAL_SHOW', true)
     },
     add(tag) {
-      if (!this.exclude[tag.text]) {
-        if (this.include[tag.text]) this.$delete(this.include, tag.text)
-        else this.$set(this.include, tag.text, true)
-      }
-      this.$delete(this.exclude, tag.text)
+      this.$store.commit('filterByTags/ADD_TAG', tag)
       this.change()
     },
     remove(tag) {
-      this.$set(this.exclude, tag.text, true)
-      this.$delete(this.include, tag.text)
+      this.$store.commit('filterByTags/REMOVE_TAG', tag)
       this.change()
     }
   },
@@ -102,6 +73,15 @@ export default {
     },
     tagsTop() {
       return this.tags.slice(0, TOP_LIMIT)
+    },
+    include() {
+      return this.$store.state.filterByTags.include
+    },
+    exclude() {
+      return this.$store.state.filterByTags.exclude
+    },
+    modalShow() {
+      return this.$store.state.filterByTags.modalShow
     }
   }
 }

client/src/components/chains/common/FilterByTagsModal.vue

@@ -15,8 +15,6 @@
         <tag-label 
           v-for="tag in tags" :key="tag.text" 
           :tag="tag"
-          :include="include"
-          :exclude="exclude"
           @add="add"
           @remove="remove"
         ></tag-label>
@@ -37,22 +35,6 @@ export default {
     tags: {
       type: Array,
       required: true
-    },
-    isShow: {
-      type: Boolean,
-      required: true
-    },
-    include: {
-      type: Object,
-      required: true
-    },
-    exclude: {
-      type: Object,
-      required: true
-    },
-    clearFilterInActive: {
-      type: Boolean,
-      required: true
     }
   },
   mixins: [onClickOutside],
@@ -62,21 +44,43 @@ export default {
   beforeDestroy() {
     this.toggleBodyClass({ flag: false })
   },
+  computed:{
+    clearFilterInActive() {
+      const includes = Object.keys(this.include).length
+      const excludes = Object.keys(this.exclude).length
+      return !(includes || excludes)
+    },
+    include(){
+      return this.$store.state.filterByTags.include
+    },
+    exclude(){
+      return this.$store.state.filterByTags.exclude
+    },
+    isShow(){
+      return this.$store.state.filterByTags.modalShow
+    }
+  },
   methods: {
+    change() {
+      this.$emit('change', { include: this.include, exclude: this.exclude })
+    },
     toggleBodyClass({ flag }) {
       this.$helper.toggleBodyModalClass({flag})
     },
     hide() {
-      this.$emit('update:isShow', false)
+     this.$store.commit('filterByTags/SET_MODAL_SHOW', false)
     },
     add(tag) {
-      this.$emit('add', tag)
+      this.$store.commit('filterByTags/ADD_TAG', tag)
+      this.change()
     },
     remove(tag) {
-      this.$emit('remove', tag)
+      this.$store.commit('filterByTags/REMOVE_TAG', tag)
+      this.change()
     },
     clear() {
-      this.$emit('clear')
+      this.$store.commit('filterByTags/CLEAR_FILTERS')
+      this.change()
     }
   }
 }

client/src/components/chains/common/TagLabel.vue

@@ -15,14 +15,6 @@ export default {
     tag: {
       type: Object,
       required: true
-    },
-    include: {
-      type: Object,
-      required: true
-    },
-    exclude: {
-      type: Object,
-      required: true
     }
   },
   methods: {
@@ -35,10 +27,10 @@ export default {
   },
   computed: {
     isInclude() {
-      return this.include[this.tag.text]
+      return this.$store.state.filterByTags.include[this.tag.text]
     },
     isExclude() {
-      return this.exclude[this.tag.text]
+      return this.$store.state.filterByTags.exclude[this.tag.text]
     }
   }
 }

client/src/components/chains/feed/FeedFilterByTags.vue

@@ -18,12 +18,17 @@
 const TOP_LIMIT = 10
 import FilterByTags from '../../../components/chains/common/FilterByTags.vue'
 import EventBus from '../../../event-bus'
-const parser = require('@oneplace/blockchains-api/parser')
+
 export default {
   name: 'FeedFilterByTags',
   components: {
     FilterByTags
   },
+  props: {
+    tags: {
+      type: Array
+    }
+  },
   data() {
     return {
       fixed: false
@@ -47,14 +52,6 @@ export default {
     change({ include, exclude }) {
       EventBus.$emit('FEED:FILTER:CHANGE', { include, exclude })
     }
-  },
-  computed: {
-    tags() {
-      const posts = this.$store.state.feed.posts.collection
-      const tags = parser.getTagsFromPosts(posts)
-      tags.sort((a, b) => b.count - a.count)
-      return tags
-    }
   }
 }
 </script>

client/src/components/chains/profile/ProfileFilterByTags.vue

@@ -9,9 +9,14 @@
 const TOP_LIMIT = 10
 import FilterByTags from '../../../components/chains/common/FilterByTags.vue'
 import EventBus from '../../../event-bus'
-const parser = require('@oneplace/blockchains-api/parser')
+
 export default {
   name: 'ProfileFilterByTags',
+  props: {
+    tags: {
+      type: Array
+    }
+  },
   components: {
     FilterByTags
   },
@@ -38,14 +43,6 @@ export default {
     change({ include, exclude }) {
       EventBus.$emit('PROFILE:FILTER:CHANGE', { include, exclude })
     }
-  },
-  computed: {
-    tags() {
-      const posts = this.$store.state.profile.posts.collection
-      const tags = parser.getTagsFromPosts(posts)
-      tags.sort((a, b) => b.count - a.count)
-      return tags
-    }
   }
 }
 </script>

client/src/containers/chains/Feed.vue

@@ -15,7 +15,8 @@
       <div class="feed__wrapper" v-show="firstFetched">
         <feed-posts></feed-posts>
         <aside class="feed__aside">
-          <feed-filter-by-tags></feed-filter-by-tags>
+          <feed-filter-by-tags :tags="tags"></feed-filter-by-tags>
+          <filter-by-tags-modal v-if="filterByTagsShow" :tags="tags" @change="change"></filter-by-tags-modal>
         </aside>
       </div>
     </section>
@@ -24,11 +25,15 @@
 <script>
 import FeedPosts from '../../components/chains/feed/FeedPosts.vue'
 import FeedFilterByTags from '../../components/chains/feed/FeedFilterByTags.vue'
+import FilterByTagsModal from '../../components/chains/common/FilterByTagsModal.vue'
+const parser = require('@oneplace/blockchains-api/parser')
+import EventBus from '../../event-bus'
 
 export default {
   name: 'Feed',
   asyncData({ store, route, router }) {
     if (!store.state.feed.posts.collection.length) {
+      store.commit('filterByTags/CLEAR_ALL_DATA')
       return store
         .dispatch('feed/fetchState', {
           chain: route.params.chain,
@@ -44,14 +49,29 @@ export default {
         })
     } else return Promise.resolve()
   },
-  computed:{
-    firstFetched(){
+  computed: {
+    filterByTagsShow() {
+      return this.$store.state.filterByTags.modalShow
+    },
+    firstFetched() {
       return this.$store.state.feed.posts.firstFetched
+    },
+    tags() {
+      const posts = this.$store.state.feed.posts.collection
+      const tags = parser.getTagsFromPosts(posts)
+      tags.sort((a, b) => b.count - a.count)
+      return tags
+    }
+  },
+  methods: {
+    change({ include, exclude }) {
+      EventBus.$emit('FEED:FILTER:CHANGE', { include, exclude })
     }
   },
   components: {
     FeedPosts,
-    FeedFilterByTags
+    FeedFilterByTags,
+    FilterByTagsModal
   },
   destroyed() {
     this.$store.commit('feed/CLEAR_ALL_DATA')

client/src/containers/chains/Profile.vue

@@ -45,7 +45,8 @@
               {{$tc('profile.following', followCount.following_count)}}
             </div>
           </div>
-          <profile-filter-by-tags></profile-filter-by-tags>
+          <profile-filter-by-tags :tags="tags"></profile-filter-by-tags>
+          <filter-by-tags-modal v-if="filterByTagsShow" :tags="tags" @change="change"></filter-by-tags-modal>
         </div>
         <profile-blog :account="account" v-if="!accountProcessing"></profile-blog>
       </div>
@@ -57,6 +58,9 @@
 import ProfileBlog from '../../components/chains/profile/ProfileBlog.vue'
 import ProfileFollowBtn from '../../components/chains/profile/ProfileFollowBtn.vue'
 import ProfileFilterByTags from '../../components/chains/profile/ProfileFilterByTags.vue'
+const parser = require('@oneplace/blockchains-api/parser')
+import FilterByTagsModal from '../../components/chains/common/FilterByTagsModal.vue'
+import EventBus from '../../event-bus'
 
 import CONSTANTS from '@oneplace/constants'
 import { mixin as onClickOutside } from 'vue-on-click-outside'
@@ -66,14 +70,16 @@ export default {
   components: {
     ProfileBlog,
     ProfileFollowBtn,
-    ProfileFilterByTags
+    ProfileFilterByTags,
+    FilterByTagsModal
   },
   mixins: [onClickOutside],
   asyncData({ store, route, router }) {
     const username = store.state.profile.account.data.name
     const chain = store.state.profile.chain
     if (username !== route.params.username || chain !== route.params.chain) {
       store.commit('profile/CLEAR_ALL_DATA')
+      store.commit('filterByTags/CLEAR_ALL_DATA')
       return store
         .dispatch('profile/fetchState', {
           chain: route.params.chain,
@@ -93,7 +99,21 @@ export default {
   metaInfo() {
     return this.$metaGenerator.profile(this.account, this.$route)
   },
+  methods: {
+    change({ include, exclude }) {
+      EventBus.$emit('PROFILE:FILTER:CHANGE', { include, exclude })
+    }
+  },
   computed: {
+    filterByTagsShow() {
+      return this.$store.state.filterByTags.modalShow
+    },
+    tags() {
+      const posts = this.$store.state.profile.posts.collection
+      const tags = parser.getTagsFromPosts(posts)
+      tags.sort((a, b) => b.count - a.count)
+      return tags
+    },
     showAllTagsModal() {
       return this.$store.state.profile.tags.showAllTags
     },