src/components/Paginator.vue

@@ -1,49 +0,0 @@
-<!--
-SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
-
-SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-  <ul class="pagination">
-    <li
-      class="page-item"
-        :class="{ active: page === current }"
-      v-for="page in pages"
-      :key="page"
-    >
-      <span
-        class="page-link pointer"
-        @click="onPageClicked(page)"
-      >
-        {{ page }}
-      </span>
-    </li>
-  </ul>
-</template>
-<script>
-
-export default {
-  name: 'Paginator',
-  props: {
-    page: Number,
-    current: Number,
-    pages: Number
-  },
-  methods: {
-    onPageClicked(page) {
-      if (page == this.current) {
-        return
-      }
-
-      this.$emit('page', page)
-    }
-  }
-}
-
-</script>
-<style>
-.pointer {
-  cursor: pointer;
-}
-</style>

src/store/search.js

@@ -12,10 +12,8 @@ export default {
       profiles: [],
       error: false,
       errorMessage: '',
-      pages: 1,
       query: {
-        search: '',
+        search: ''
-        page: 1
       }
     }
   },
@@ -42,17 +40,11 @@ export default {
       state.errorMessage = errorMessage
     },
     setQuerySearch(state, search) {
-      state.query = {...state.query, search}
+      state.query.search = search
-    },
-    setPages(state, pages) {
-      state.pages = pages
-    },
-    setQueryPage(state, page) {
-      state.query = {...state.query, page}
     }
   },
   actions: {
-    async search({state, commit, rootState, dispatch}) {
+    async search({state, commit, rootState}) {
       if (state.searching) {
         return
       }
@@ -73,8 +65,6 @@ export default {
         url.searchParams.append('search', state.query.search)
       }
 
-      url.searchParams.append('page', state.query.page)
-
       const headers = {
         Authorization: `Bearer ${rootState.token}`,
       }
@@ -91,19 +81,8 @@ export default {
         return
       }
 
-      console.log(response.ok)
-      console.log(response.status)
-      console.log(state.query.page)
-
       clearTimeout(timeoutId)
 
-      if (!response.ok && response.status === 404 && state.query.page != 1) {
-        commit('setQueryPage', 1)
-        commit('setSearching', false)
-        await dispatch('search')
-        return
-      }
-
       if (!response.ok) {
         commit('setError', true)
         commit('clearProfiles')
@@ -114,7 +93,6 @@ export default {
 
       const responseData = await response.json()
       commit('setProfiles', responseData.profiles)
-      commit('setPages', responseData.pages)
       commit('setSearching', false)
       commit('hideSpinner')
     }

src/views/Search.vue

@@ -53,26 +53,12 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
       </div>
       <div v-else-if="showResults">
-        <div class="d-flex justify-content-around">
-          <Paginator 
-            :pages="pages" 
-            :current="currentPage"
-            @page="handlePageSelected"
-          />
-        </div>
         <SearchResult
           v-for="profile in profiles"
           :key="profile.user_id"
           class="mb-3"
           :profile="profile"
         />
-        <div class="d-flex justify-content-around">
-          <Paginator 
-            :pages="pages" 
-            :current="currentPage"
-            @page="handlePageSelected"
-          />
-        </div>
       </div>
     </div>
   </div>
@@ -81,29 +67,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <script>
 import { mapState } from 'vuex'
 
-import Paginator from '@/components/Paginator'
 import SearchResult from '@/components/SearchResult'
 import Spinner from '@/components/Spinner'
 
 export default {
   name: 'Search',
   components: {
-    Paginator,
     SearchResult,
     Spinner,
   },
-  data() {
-    return {
-      textChanged: false
-    }
-  },
   computed: {
     ...mapState({
       searching: state => state.search.searching,
       profiles: state => state.search.profiles,
       error: state => state.search.error,
       showSpinner: state => state.search.showSpinner,
-      pages: state => state.search.pages,
     }),
       searchText: {
         get() {
@@ -111,15 +89,6 @@ export default {
         },
         set(text) {
           this.$store.commit('search/setQuerySearch', text)
-          this.textChanged = true
-        }
-      },
-      currentPage: {
-        get() {
-          return this.$store.state.search.query.page
-        },
-        set(page) {
-          this.$store.commit('search/setQueryPage', page)
         }
       },
       showNoResults() {
@@ -140,37 +109,21 @@ export default {
   },
   methods: {
     handleSubmit() {
-      if (this.textChanged === true) {
+      this.$router.push({ query: { query: this.searchText }})
-        this.$store.commit('search/setQueryPage', 1)
-      }
-      this.pushState()
       this.$store.dispatch('search/search')
     },
     focusSearchText() {
       this.$nextTick(() => {
         this.$refs.searchTextInput.focus()
       })
-    },
-    handlePageSelected(page) {
-      this.currentPage = page
-      this.pushState()
-      this.$store.dispatch('search/search')
-    },
-    pushState() {
-      this.$router.push({ query: { query: this.searchText, page: this.currentPage }})
     }
   },
   created() {
-    if (this.$route.query.query) {
+    if (this.$route.query.query !== undefined) {
       this.searchText = this.$route.query.query
       this.$store.commit('search/clearProfiles')
     }
 
-    if (this.$route.query.page) {
-      this.currentPage = parseInt(this.$route.query.page, 10)
-      this.$store.commit('search/clearProfiles')
-    }
-
     this.$store.dispatch('search/search')
   }
 };