refactor: Avoid store use query parameters+routing

webapp/components/generic/SearchableInput/SearchableInput.vue

@@ -100,25 +100,10 @@ export default {
       }, this.delay)
     },
     onEnter(event) {
-
-      if (this.$router.history.current.path === '/search/search-results') {
-        this.$store.commit('search/SET_VALUE', {
-          searchValue: this.unprocessedSearchInput,
-        })
-
-        this.$router.replace({
-          path: '/search/search-results',
-          query: { item: this.unprocessedSearchInput },
-        })
-        this.clear()
-      } else {
-        if (this.options.length === 0 ) return 
-        this.$router.replace({
-          path: '/search/search-results',
-          query: { item: this.unprocessedSearchInput },
-        })
-        this.clear()
-      }
+      this.$router.push({
+        path: '/search/search-results',
+        query: { item: this.unprocessedSearchInput },
+      })
     },
     onDelete(event) {
       clearTimeout(this.searchProcess)

webapp/pages/search/search-results.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="search-results">
-    <filter-menu :hashtag="value" @clearSearch="closeSearch" />
+
     <tab-navigation
       :tabs="tabOptions"
-      @openTab="value => showActive = value"
+      @openTab="switchTab"
     />
     <section>
       <ul v-if="activeResources.length">
         <li v-for="resource in activeResources" :key="resource.key">
-          <post-teaser v-if="showActive === 'posts'" :post="resource" />
-          <base-card v-else-if="showActive === 'users'" :wideContent="true">
+          <post-teaser v-if="activeTab === 'posts'" :post="resource" />
+          <base-card v-else-if="activeTab === 'users'" :wideContent="true">
             <user-teaser :user="resource" />
           </base-card>
         </li>
@@ -19,7 +19,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { findResourcesQuery } from '~/graphql/Search.js'
 import FilterMenu from '~/components/FilterMenu/FilterMenu'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
@@ -40,27 +39,27 @@ export default {
     UserTeaser,
   },
   data() {
+    const { item = null } = this.$route.query
+    console.log('data', item)
     return {
       loading: true,
       value: '',
       pending: false,
-      searchResults: [],
-      showActive: 'posts',
+      findResources: [],
+      activeTab : 'posts',
+      item,
     }
   },
   computed: {
-    ...mapGetters({
-      searchValue: 'search/searchValue',
-    }),
     posts() {
-      return this.searchResults.filter(result => result.__typename === 'Post')
+      return this.findResources.filter(result => result.__typename === 'Post')
     },
     users() {
-      return this.searchResults.filter(result => result.__typename === 'User')
+      return this.findResources.filter(result => result.__typename === 'User')
     },
     activeResources() {
-      if (this.showActive === 'posts') return this.posts
-      else if (this.showActive === 'users') return this.users
+      if (this.activeTab === 'posts') return this.posts
+      else if (this.activeTab === 'users') return this.users
     },
     tabOptions() {
       return [
@@ -69,44 +68,23 @@ export default {
       ]
     },
   },
-  mounted() {
-    if (this.$route.query.item){
-    this.value = this.$route.query.item
-    this.query(this.value)
-    } else {
-      this.$router.push('/')
+  methods: {
+    switchTab(tab) {
+      this.activeTab = tab
     }
   },
-  watch: {
-    searchValue(value) {
-      this.query(value)
-    },
-  },
-  methods: {
-    async query(value) {
-      this.pending = true
-      try {
-        const {
-          data: { findResources },
-        } = await this.$apollo.query({
-          query: findResourcesQuery,
-          variables: {
-            query: value,
-            limit: 37,
-          },
-        })
-        // console.log('users', this.users)
-        // console.log('posts', this.posts)
-        console.log("findResources",findResources)
-        this.searchResults = findResources
-      } catch (error) {
-        this.searchResults = []
-      } finally {
-        this.pending = false
-      }
-    },
-    closeSearch() {
-      this.$router.push('/')
+  apollo: {
+    findResources: {
+      query() {
+        return findResourcesQuery
+      },
+      variables() {
+        return {
+          query: this.item,
+          limit: 37
+        }
+      },
+      fetchPolicy: 'cache-and-network',
     },
   },
 }