feed and refacroting

client/src/App.vue

@@ -18,7 +18,7 @@ export default {
     AuthCheck
   },
   metaInfo() {
-    this.$helper.generateAppMeta(this.$route)
+    this.$metaGenerator.app(this.$route)
   }
 }
 </script>

client/src/app.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Helper from './plugins/helper'
+import MetaGenerator from './plugins/meta'
 import {createRouter} from './router'
 import {createStore} from './store'
 import {sync} from 'vuex-router-sync'
@@ -37,6 +38,7 @@ Vue.use(VeeValidate, {inject: false, events: 'blur'})
 Vue.use(VueAxios, axios)
 Vue.axios.defaults.baseURL = process.env.BASE_API_URL
 Vue.use(Helper)
+Vue.use(MetaGenerator)
 Vue.use(VueLocalStorage)
 
 

client/src/components/chains/comment/Comment.vue

@@ -24,13 +24,9 @@
           :post="item" 
           :account="account" 
           :chain="chain"
-          @vote="vote"
-          @reply="reply"
+          @reply="deleteComment"
           @edit="editPostBottom"
           @delete="deleteComment"
-          :is-max-deep="isMaxDeep"
-          :up-vote-processing="upVoteProcessing"
-          :down-vote-processing="downVoteProcessing"
         ></post-bottom>
     </div>
   </div>

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

@@ -44,7 +44,7 @@
 <script>
 import TagLabel from './TagLabel.vue'
 import FilterByTagsModal from './FilterByTagsModal.vue'
-const TOP_LIMIT = 5
+const TOP_LIMIT = 10
 export default {
   name: 'FilterByTags',
   components: {

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

@@ -64,8 +64,7 @@ export default {
   },
   methods: {
     toggleBodyClass({ flag }) {
-      if (flag) document.body.classList.add('modal-shown')
-      else document.body.classList.remove('modal-shown')
+      this.$helper.toggleBodyModalClass({flag})
     },
     hide() {
       this.$emit('update:isShow', false)

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

@@ -1,8 +1,9 @@
 <template>
   <article class="feed__post">
     <a 
-      href="#" 
       class="feed__post-image" 
+      :href="link"
+      @click.prevent="show"
       :style="`background-image: url('${post.image}')`">
     </a>
     <div class="feed__post-content">
@@ -12,43 +13,53 @@
           class="feed__repost-avatar" 
           :style="`background-image: url('${post.reblog_avatars[0]}');`"
         ></span>
-        <a href="#" class="link link--op">{{post.reblog_by[0]}}</a>
+        <router-link tag="a" :to="{name:'chain-account-view', params:{chain: chain, username:post.author}}" class="link link--op">
+          {{post.reblog_by[0]}}
+        </router-link>
       </div>
 
         <h3 class="feed__post-title h3">
-          <a href="#" class="link">{{cutTitle}}</a>
+          <a 
+            :href="link"
+            @click.prevent="show"
+            class="link">{{cutTitle}}
+          </a>
         </h3>
-        <p class="feed__post-text"><a href="#" class="link">{{cutPreview}}</a></p>
+        <p class="feed__post-text">
+          <a 
+            :href="link"
+            @click.prevent="show"
+            class="link">{{cutPreview}}
+          </a>
+        </p>
 
       <div class="feed__post-info">
         <div class="feed__post-author">
-          <a href="#" 
-            class="feed__post-avatar avatar" 
-            :style="`background-image: url('${post.avatar}');`">
-          </a>
+          <router-link 
+            tag="a" 
+            :to="{name:'chain-account-view', params:{chain: chain, username:post.author}}" 
+            :style="`background-image: url('${post.avatar}');`"
+            class="feed__post-avatar avatar">
+          </router-link>
           <div class="column-wrapper">
             <router-link tag="a" :to="{name:'chain-account-view', params:{chain: chain, username:post.author}}" class="link link--op">{{post.author}}</router-link>
             <time-ago :time="post.created"></time-ago>
           </div>
         </div>
 
-          <!-- <post-bottom
+          <post-bottom
             type="blog"
             :post="post"
-            :account="accountCurrent"
-            :chain="chain"
-            @focus="()=>$emit('focus', post)"
-            @vote="(isLike, weight) => vote(post, isLike, weight)"
-            :up-vote-processing="voteProcessing.upVoteProcessing"
-            :down-vote-processing="voteProcessing.downVoteProcessing"
-          ></post-bottom> -->
+            :account="account"
+          ></post-bottom>
       </div>
     </div>
   </article>
 </template>
 
 <script>
 import PostBottom from './../post/PostBottom.vue'
+import EventBus from '../../../event-bus'
 const parser = require('@oneplace/blockchains-api/parser')
 export default {
   name: 'FeedArticle',
@@ -67,7 +78,18 @@ export default {
       }
     }
   },
+  methods: {
+    show() {
+      EventBus.$emit('POST:MODAL:SHOW', {
+        post: this.post,
+        chain: this.chain
+      })
+    }
+  },
   computed: {
+    link() {
+      return this.$helper.makePathForPost(this.post, this.chain)
+    },
     cutTitle() {
       return parser.cutTitle(this.chain, this.post.title)
     },
@@ -76,6 +98,22 @@ export default {
     },
     isRepost() {
       return this.post.reblog_by.length > 0
+    },
+    accounts() {
+      return this.$auth && this.$auth.check() ? this.$auth.user().accounts : []
+    },
+    accountsByChain() {
+      return this.accounts.filter(acc => acc.chain === this.chain)
+    },
+    account() {
+      let result = { avatar: this.DEFAULT_AVATAR, username: null }
+      if (this.$auth && this.$auth.check() && this.accountsByChain.length) {
+        result =
+          this.accountsByChain.find(
+            acc => acc.id === this.$store.state.user.accounts[this.chain].active
+          ) || this.accountsByChain[0]
+      }
+      return result
     }
   }
 }

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

@@ -20,6 +20,7 @@
 <script>
 import FeedArticle from './FeedArticle.vue'
 import InfiniteLoading from 'vue-infinite-loading'
+import EventBus from '../../../event-bus'
 const LIMIT = 15
 export default {
   name: 'FeedPosts',
@@ -42,15 +43,51 @@ export default {
       exclude: {}
     }
   },
+  mounted() {
+    this.$store.dispatch('core/fetchParams', {
+      chain: this.chain,
+      $chains: this.$chains
+    })
+
+    EventBus.$on('FEED:FILTER:CHANGE', this.handlerFilterChange)
+  },
+  destroyed() {
+    EventBus.$off('FEED:FILTER:CHANGE', this.handlerFilterChange)
+  },
   computed: {
-    posts() {
+    postsWithoutFilters() {
       return this.$store.state.feed.posts.collection
     },
+    posts() {
+      const posts = this.postsWithoutFilters
+      const include = this.include
+      const exclude = this.exclude
+
+      const postsFilter = this.$helper.filterPostByTags({
+        posts,
+        include,
+        exclude
+      })
+
+      if (postsFilter.length < LIMIT && !this.complete) {
+        this.$nextTick(() => {
+          if (this.$refs.infiniteLoading) {
+            this.$refs.infiniteLoading.attemptLoad()
+          }
+        })
+      }
+
+      return postsFilter
+    },
     postsProcessing() {
       return this.$store.state.feed.posts.processing
     }
   },
   methods: {
+    handlerFilterChange({ include, exclude }) {
+      this.include = include
+      this.exclude = exclude
+    },
     infiniteHandler($state) {
       if (!this.postsProcessing) {
         this.$store

client/src/components/chains/post/DropdownVotes.vue

@@ -9,7 +9,18 @@ const CONSTANTS = require('@oneplace/constants')
 
 export default {
   name: 'DropdownVotes',
-  props: ['post', 'chain'],
+  props: {
+    post: {
+      type: Object,
+      required: true
+    },
+    chain: {
+      type: String,
+      default() {
+        return this.$router.params.chain
+      }
+    }
+  },
   methods: {
     calcFiat(vote) {
       let locale = 'ru'