From 449e335abc164027bafc570f8f3efd2fedcee003 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Sun, 28 Nov 2021 22:50:28 +0100
Subject: [PATCH 1/4] refactor pagination into composable and cleanup store,
 views and tests

---
 .../src/components/AppBar/ViewOptions.vue     |  51 ++-----
 .../src/components/FilesList/Pagination.vue   |  21 ---
 .../src/components/Search/List.vue            |  52 ++++---
 .../web-app-files/src/composables/index.ts    |   5 +-
 .../src/composables/router/index.ts           |   2 +
 .../src/composables/router/useRouteQuery.ts   |  25 ++++
 .../src/composables/router/useRouter.ts       |   6 +
 .../src/composables/store/index.ts            |   4 +-
 ...cription.ts => useMutationSubscription.ts} |   2 +-
 .../store/{store.ts => useStore.ts}           |   0
 .../src/composables/useDefaults/index.ts      |  38 +++++
 .../src/composables/usePagination/index.ts    |  34 +++++
 .../src/composables/utils/index.ts            |   1 +
 .../src/composables/utils/types.ts            |   3 +
 .../src/mixins/actions/emptyTrashBin.js       |   4 +-
 .../src/mixins/filesListFilter.js             |  20 +--
 .../src/mixins/filesListPagination.js         |  13 --
 packages/web-app-files/src/store/getters.js   |   8 --
 packages/web-app-files/src/store/index.js     |   4 +-
 .../src/store/modules/pagination.js           |  27 ----
 .../web-app-files/src/views/Favorites.vue     |  56 +++++---
 .../src/views/LocationPicker.vue              |  64 ++++++---
 packages/web-app-files/src/views/Personal.vue |  59 +++++---
 .../web-app-files/src/views/PublicFiles.vue   |  60 +++++---
 .../web-app-files/src/views/SharedViaLink.vue |  69 +++++----
 .../src/views/SharedWithOthers.vue            |  69 +++++----
 packages/web-app-files/src/views/Trashbin.vue |  64 +++++----
 .../integration/specs/pagination.spec.js      |  35 ++---
 .../components/AppBar/ViewOptions.spec.js     |  25 ++--
 .../components/FilesList/Pagination.spec.js   | 113 ---------------
 .../tests/unit/components/Search/List.spec.js |  43 ++----
 .../Search/__snapshots__/List.spec.js.snap    |   2 +-
 .../unit/composables/router/spec/index.ts     |  23 +++
 .../composables/router/useRouteQuery.spec.ts  | 131 +++++++++++++++++
 .../unit/composables/router/useRouter.spec.ts |  16 +++
 ...pec.ts => useMutationSubscription.spec.ts} |   0
 .../store/{store.spec.ts => useStore.spec.ts} |   0
 .../composables/usePagination/index.spec.ts   |  89 ++++++++++++
 .../composables/usePagination/spec/index.ts   |  19 +++
 .../tests/unit/store/getters.spec.js          |  39 +----
 .../unit/store/modules/pagination.spec.js     |  29 ----
 .../tests/unit/views/Favorites.spec.js        | 134 ++++++++++++------
 .../tests/unit/views/Personal.spec.js         |  16 +--
 .../tests/unit/views/PublicFiles.spec.ts      |  12 ++
 .../tests/unit/views/views.setup.js           |   3 +-
 .../tests/unit/views/views.shared.ts          |  34 ++++-
 46 files changed, 892 insertions(+), 632 deletions(-)
 delete mode 100644 packages/web-app-files/src/components/FilesList/Pagination.vue
 create mode 100644 packages/web-app-files/src/composables/router/index.ts
 create mode 100644 packages/web-app-files/src/composables/router/useRouteQuery.ts
 create mode 100644 packages/web-app-files/src/composables/router/useRouter.ts
 rename packages/web-app-files/src/composables/store/{mutationSubscription.ts => useMutationSubscription.ts} (93%)
 rename packages/web-app-files/src/composables/store/{store.ts => useStore.ts} (100%)
 create mode 100644 packages/web-app-files/src/composables/useDefaults/index.ts
 create mode 100644 packages/web-app-files/src/composables/usePagination/index.ts
 create mode 100644 packages/web-app-files/src/composables/utils/index.ts
 create mode 100644 packages/web-app-files/src/composables/utils/types.ts
 delete mode 100644 packages/web-app-files/src/mixins/filesListPagination.js
 delete mode 100644 packages/web-app-files/src/store/modules/pagination.js
 delete mode 100644 packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
 create mode 100644 packages/web-app-files/tests/unit/composables/router/spec/index.ts
 create mode 100644 packages/web-app-files/tests/unit/composables/router/useRouteQuery.spec.ts
 create mode 100644 packages/web-app-files/tests/unit/composables/router/useRouter.spec.ts
 rename packages/web-app-files/tests/unit/composables/store/{mutationSubscription.spec.ts => useMutationSubscription.spec.ts} (100%)
 rename packages/web-app-files/tests/unit/composables/store/{store.spec.ts => useStore.spec.ts} (100%)
 create mode 100644 packages/web-app-files/tests/unit/composables/usePagination/index.spec.ts
 create mode 100644 packages/web-app-files/tests/unit/composables/usePagination/spec/index.ts
 delete mode 100644 packages/web-app-files/tests/unit/store/modules/pagination.spec.js

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 4eef7af04c3..c7dba42825e 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -39,7 +39,7 @@
         </li>
         <li class="files-view-options-list-item">
           <oc-page-size
-            v-model="itemsPerPageModel"
+            v-model="itemsPerPage"
             data-testid="files-pagination-size"
             :label="$gettext('Items per page')"
             :options="[100, 500, 1000, $gettext('All')]"
@@ -53,12 +53,24 @@
 
 <script>
 import { mapMutations, mapState, mapActions } from 'vuex'
+import { watch } from '@vue/composition-api'
+import { useRouteQuery, useDefaults } from '../../composables'
 
 export default {
+  setup() {
+    const { pagination: paginationDefaults } = useDefaults()
+    const itemsPerPage = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    watch(itemsPerPage, (v) => {
+      paginationDefaults.perPage.value = v
+    })
+
+    return {
+      itemsPerPage
+    }
+  },
   computed: {
     ...mapState('Files', ['areHiddenFilesShown']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
-    ...mapState('Files/pagination', ['itemsPerPage']),
 
     viewOptionsButtonLabel() {
       return this.$gettext('Display customization options of the files list')
@@ -81,44 +93,11 @@ export default {
       set(value) {
         this.SET_HIDDEN_FILES_VISIBILITY(value)
       }
-    },
-
-    itemsPerPageModel: {
-      get() {
-        return this.itemsPerPage
-      },
-
-      set(value) {
-        this.updateQuery(value)
-      }
-    }
-  },
-
-  watch: {
-    $route: {
-      handler(route) {
-        if (Object.prototype.hasOwnProperty.call(route.query, 'items-per-page')) {
-          this.SET_ITEMS_PER_PAGE(route.query['items-per-page'])
-
-          return
-        }
-
-        this.updateQuery()
-      },
-      immediate: true
     }
   },
   methods: {
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY']),
-    ...mapActions('Files/sidebar', { toggleSidebar: 'toggle' }),
-    ...mapMutations('Files/pagination', ['SET_ITEMS_PER_PAGE']),
-
-    updateQuery(limit = this.itemsPerPageModel) {
-      const query = { ...this.$route.query, 'items-per-page': limit }
-
-      this.SET_ITEMS_PER_PAGE(limit)
-      this.$router.replace({ query }).catch(() => {})
-    }
+    ...mapActions('Files/sidebar', { toggleSidebar: 'toggle' })
   }
 }
 </script>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
deleted file mode 100644
index 6465443d32b..00000000000
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <oc-pagination
-    v-if="pages > 1"
-    :pages="pages"
-    :current-page="currentPage"
-    :max-displayed="3"
-    :current-route="$route"
-    class="files-pagination uk-flex uk-flex-center oc-my-s"
-  />
-</template>
-
-<script>
-import { mapState, mapGetters } from 'vuex'
-
-export default {
-  computed: {
-    ...mapState('Files/pagination', ['currentPage']),
-    ...mapGetters('Files/pagination', ['pages'])
-  }
-}
-</script>
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 4f8b9d9f137..6e828639f70 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="files-search-result">
-    <no-content-message v-if="!activeFilesCurrentPage.length" class="files-empty" icon="folder">
+    <no-content-message v-if="!paginatedResources.length" class="files-empty" icon="folder">
       <template #message>
         <p class="oc-text-muted">
           <span v-if="!!$route.query.term" v-translate>No resource found</span>
@@ -12,7 +12,7 @@
       v-else
       class="files-table"
       :class="{ 'files-table-squashed': false }"
-      :resources="activeFilesCurrentPage"
+      :resources="paginatedResources"
       :target-route="{ name: 'files-personal' }"
       :are-paths-displayed="true"
       :are-thumbnails-displayed="displayThumbnails"
@@ -22,9 +22,16 @@
       @rowMounted="rowMounted"
     >
       <template #footer>
-        <pagination />
+        <oc-pagination
+          v-if="paginationPages > 1"
+          :pages="paginationPages"
+          :current-page="paginationPage"
+          :max-displayed="3"
+          :current-route="$route"
+          class="files-pagination uk-flex uk-flex-center oc-my-s"
+        />
         <list-info
-          v-if="activeFilesCurrentPage.length > 0"
+          v-if="paginatedResources.length > 0"
           class="uk-width-1-1 oc-my-s"
           :files="totalFilesCount.files"
           :folders="totalFilesCount.folders"
@@ -36,28 +43,23 @@
 </template>
 
 <script>
+import { useStore, useRouteQuery, usePagination, useDefaults } from '../../composables'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageType, ImageDimension } from '../../constants'
 import NoContentMessage from '../FilesList/NoContentMessage.vue'
-import Pagination from '../../components/FilesList/Pagination.vue'
 import debounce from 'lodash-es/debounce'
 import { mapMutations, mapGetters, mapActions } from 'vuex'
+import { computed } from '@vue/composition-api'
 import ListInfo from '../FilesList/ListInfo.vue'
 import MixinFileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
 import MixinFilesListScrolling from '../../mixins/filesListScrolling'
-import MixinFilesListPagination from '../../mixins/filesListPagination'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListInfo, NoContentMessage, Pagination },
-  mixins: [
-    MixinFileActions,
-    MixinFilesListFilter,
-    MixinFilesListScrolling,
-    MixinFilesListPagination
-  ],
+  components: { ListInfo, NoContentMessage },
+  mixins: [MixinFileActions, MixinFilesListFilter, MixinFilesListScrolling],
   props: {
     searchResults: {
       type: Array,
@@ -66,18 +68,32 @@ export default {
       }
     }
   },
+  setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() =>
+        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
+      ),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
+    return {
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
+  },
   computed: {
     ...mapGetters(['configuration']),
-    ...mapGetters('Files', ['activeFilesCurrentPage', 'totalFilesCount', 'totalFilesSize']),
+    ...mapGetters('Files', ['totalFilesCount', 'totalFilesSize']),
     displayThumbnails() {
       return !this.configuration.options.disablePreviews
     }
   },
   watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
-    },
     searchResults: {
       handler: function () {
         this.CLEAR_CURRENT_FILES_LIST()
diff --git a/packages/web-app-files/src/composables/index.ts b/packages/web-app-files/src/composables/index.ts
index 01839ab6a9f..5a1e33dec86 100644
--- a/packages/web-app-files/src/composables/index.ts
+++ b/packages/web-app-files/src/composables/index.ts
@@ -1,5 +1,8 @@
-export * from './useFileListHeaderPosition'
+export * from './router'
 export * from './store'
+export * from './useDefaults'
+export * from './useFileListHeaderPosition'
+export * from './usePagination'
 
 declare module 'vue/types/vue' {
   interface Vue {
diff --git a/packages/web-app-files/src/composables/router/index.ts b/packages/web-app-files/src/composables/router/index.ts
new file mode 100644
index 00000000000..26c4f9ce04b
--- /dev/null
+++ b/packages/web-app-files/src/composables/router/index.ts
@@ -0,0 +1,2 @@
+export * from './useRouteQuery'
+export * from './useRouter'
diff --git a/packages/web-app-files/src/composables/router/useRouteQuery.ts b/packages/web-app-files/src/composables/router/useRouteQuery.ts
new file mode 100644
index 00000000000..dcb763371c0
--- /dev/null
+++ b/packages/web-app-files/src/composables/router/useRouteQuery.ts
@@ -0,0 +1,25 @@
+import { customRef, Ref } from '@vue/composition-api'
+import { useRouter } from './useRouter'
+
+type QueryValue = string | (string | null)[]
+
+export const useRouteQuery = (name: string, defaultValue?: QueryValue): Ref<QueryValue> => {
+  const router = useRouter()
+
+  return customRef<QueryValue>((track, trigger) => {
+    router.afterEach((to, from) => to.query[name] !== from.query[name] && trigger())
+
+    return {
+      get() {
+        track()
+        return router.currentRoute.query[name] || defaultValue
+      },
+      async set(v) {
+        await router.replace({
+          query: { [name]: v }
+        })
+        trigger()
+      }
+    }
+  })
+}
diff --git a/packages/web-app-files/src/composables/router/useRouter.ts b/packages/web-app-files/src/composables/router/useRouter.ts
new file mode 100644
index 00000000000..30350e702b6
--- /dev/null
+++ b/packages/web-app-files/src/composables/router/useRouter.ts
@@ -0,0 +1,6 @@
+import { getCurrentInstance } from '@vue/composition-api'
+import VueRouter from 'vue-router'
+
+export const useRouter = (): VueRouter => {
+  return getCurrentInstance().proxy.$router
+}
diff --git a/packages/web-app-files/src/composables/store/index.ts b/packages/web-app-files/src/composables/store/index.ts
index b0497a0b279..70b2b59228a 100644
--- a/packages/web-app-files/src/composables/store/index.ts
+++ b/packages/web-app-files/src/composables/store/index.ts
@@ -1,2 +1,2 @@
-export * from './mutationSubscription'
-export * from './store'
+export * from './useMutationSubscription'
+export * from './useStore'
diff --git a/packages/web-app-files/src/composables/store/mutationSubscription.ts b/packages/web-app-files/src/composables/store/useMutationSubscription.ts
similarity index 93%
rename from packages/web-app-files/src/composables/store/mutationSubscription.ts
rename to packages/web-app-files/src/composables/store/useMutationSubscription.ts
index 14f149b9e50..ef308d9aac7 100644
--- a/packages/web-app-files/src/composables/store/mutationSubscription.ts
+++ b/packages/web-app-files/src/composables/store/useMutationSubscription.ts
@@ -1,6 +1,6 @@
 import { onMounted, onBeforeUnmount } from '@vue/composition-api'
 import { MutationPayload, SubscribeOptions } from 'vuex'
-import { useStore } from './store'
+import { useStore } from './useStore'
 
 export const useMutationSubscription = <P extends MutationPayload>(
   mutations: string[],
diff --git a/packages/web-app-files/src/composables/store/store.ts b/packages/web-app-files/src/composables/store/useStore.ts
similarity index 100%
rename from packages/web-app-files/src/composables/store/store.ts
rename to packages/web-app-files/src/composables/store/useStore.ts
diff --git a/packages/web-app-files/src/composables/useDefaults/index.ts b/packages/web-app-files/src/composables/useDefaults/index.ts
new file mode 100644
index 00000000000..9081e5053fe
--- /dev/null
+++ b/packages/web-app-files/src/composables/useDefaults/index.ts
@@ -0,0 +1,38 @@
+import { customRef, Ref } from '@vue/composition-api'
+
+interface Defaults {
+  pagination: {
+    perPage: Ref
+  }
+}
+
+let defaults: Defaults
+
+/**
+ * interim solution till options // configuration api is in place
+ */
+export const useDefaults = (): Defaults => {
+  if (defaults) {
+    return defaults
+  }
+
+  defaults = {
+    pagination: {
+      perPage: customRef<string>((track, trigger) => {
+        const defaultValue = '100'
+        return {
+          get() {
+            track()
+            return window.localStorage.getItem('oc_filesPageLimit') || defaultValue
+          },
+          set(v) {
+            window.localStorage.setItem('oc_filesPageLimit', v)
+            trigger()
+          }
+        }
+      })
+    }
+  }
+
+  return defaults
+}
diff --git a/packages/web-app-files/src/composables/usePagination/index.ts b/packages/web-app-files/src/composables/usePagination/index.ts
new file mode 100644
index 00000000000..d3bff72846d
--- /dev/null
+++ b/packages/web-app-files/src/composables/usePagination/index.ts
@@ -0,0 +1,34 @@
+import { ref, computed, ComputedRef, unref } from '@vue/composition-api'
+import { MaybeRef } from '../utils'
+
+interface PaginationOptions<T> {
+  page: MaybeRef<number>
+  perPage: MaybeRef<number>
+  items: MaybeRef<Array<T>>
+}
+
+interface PaginationResult<T> {
+  items: ComputedRef<Array<T>>
+  total: ComputedRef<number>
+}
+
+export function usePagination<T>(options: PaginationOptions<T>): PaginationResult<T> {
+  const page = ref(options.page)
+  const perPage = ref(options.perPage)
+  const total = computed(() => Math.ceil(unref(options.items).length / perPage.value) || 1)
+  const items = computed(() => {
+    if (!perPage.value) {
+      return unref(options.items)
+    }
+
+    const start = (page.value - 1) * perPage.value
+    const end = start + perPage.value
+
+    return unref(options.items).slice(start, end)
+  })
+
+  return {
+    items,
+    total
+  }
+}
diff --git a/packages/web-app-files/src/composables/utils/index.ts b/packages/web-app-files/src/composables/utils/index.ts
new file mode 100644
index 00000000000..c9f6f047dc0
--- /dev/null
+++ b/packages/web-app-files/src/composables/utils/index.ts
@@ -0,0 +1 @@
+export * from './types'
diff --git a/packages/web-app-files/src/composables/utils/types.ts b/packages/web-app-files/src/composables/utils/types.ts
new file mode 100644
index 00000000000..4976c6f69fc
--- /dev/null
+++ b/packages/web-app-files/src/composables/utils/types.ts
@@ -0,0 +1,3 @@
+import { Ref } from '@vue/composition-api'
+
+export type MaybeRef<T> = T | Ref<T>
diff --git a/packages/web-app-files/src/mixins/actions/emptyTrashBin.js b/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
index 8e80b9dd3fc..63ab0baee81 100644
--- a/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
+++ b/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
@@ -3,7 +3,7 @@ import { mapActions, mapGetters } from 'vuex'
 
 export default {
   computed: {
-    ...mapGetters('Files', ['activeFilesCurrentPage']),
+    ...mapGetters('Files', ['activeFiles']),
     $_emptyTrashBin_items() {
       return [
         {
@@ -18,7 +18,7 @@ export default {
             // empty trash bin is not available for individual resources, but only for the trash bin as a whole
             return resources.length === 0
           },
-          isDisabled: () => this.activeFilesCurrentPage.length === 0,
+          isDisabled: () => this.activeFiles.length === 0,
           componentType: 'oc-button',
           class: 'oc-files-actions-empty-trash-bin-trigger',
           variation: 'danger'
diff --git a/packages/web-app-files/src/mixins/filesListFilter.js b/packages/web-app-files/src/mixins/filesListFilter.js
index 6c9d16accc6..6994f18d227 100644
--- a/packages/web-app-files/src/mixins/filesListFilter.js
+++ b/packages/web-app-files/src/mixins/filesListFilter.js
@@ -1,5 +1,5 @@
 import { Registry } from '../services'
-import { mapMutations, mapGetters } from 'vuex'
+import { mapMutations } from 'vuex'
 
 export default {
   mounted() {
@@ -39,27 +39,9 @@ export default {
         this.CLEAR_FILES_SEARCHED()
       },
       immediate: true
-    },
-    pages() {
-      if (!this.$route.query.page) {
-        return
-      }
-
-      if (this.$route.query.page <= this.pages) {
-        return
-      }
-
-      this.$router.push({
-        name: this.$route.name,
-        query: { ...this.$route.query, page: this.pages },
-        params: this.$route.params
-      })
     }
   },
   methods: {
     ...mapMutations('Files', ['CLEAR_FILES_SEARCHED', 'LOAD_FILES_SEARCHED'])
-  },
-  computed: {
-    ...mapGetters('Files/pagination', ['pages'])
   }
 }
diff --git a/packages/web-app-files/src/mixins/filesListPagination.js b/packages/web-app-files/src/mixins/filesListPagination.js
deleted file mode 100644
index 3420ccd8983..00000000000
--- a/packages/web-app-files/src/mixins/filesListPagination.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { mapMutations } from 'vuex'
-
-export default {
-  methods: {
-    ...mapMutations('Files/pagination', ['UPDATE_CURRENT_PAGE']),
-
-    $_filesListPagination_updateCurrentPage() {
-      const page = this.$route.query.page || 1
-
-      this.UPDATE_CURRENT_PAGE(page)
-    }
-  }
-}
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index 64466168156..6750b062a48 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -25,14 +25,6 @@ export default {
 
     return files
   },
-  activeFilesCurrentPage: (state, getters, rootState) => {
-    const { itemsPerPage, currentPage } = rootState.Files.pagination
-    if (itemsPerPage > 0) {
-      const firstElementIndex = (currentPage - 1) * itemsPerPage
-      return getters.activeFiles.slice(firstElementIndex, firstElementIndex + itemsPerPage)
-    }
-    return getters.activeFiles
-  },
   totalFilesSize: (state, getters) => {
     return getters.filesAll.map((file) => parseInt(file.size)).reduce((x, y) => x + y, 0)
   },
diff --git a/packages/web-app-files/src/store/index.js b/packages/web-app-files/src/store/index.js
index 107b2208575..97b838552ca 100644
--- a/packages/web-app-files/src/store/index.js
+++ b/packages/web-app-files/src/store/index.js
@@ -3,7 +3,6 @@ import actions from './actions'
 import mutations from './mutations'
 import getters from './getters'
 import sidebarModule from './modules/sidebar'
-import paginationModule from './modules/pagination'
 const namespaced = true
 
 export default {
@@ -13,7 +12,6 @@ export default {
   actions,
   mutations,
   modules: {
-    sidebar: sidebarModule,
-    pagination: paginationModule
+    sidebar: sidebarModule
   }
 }
diff --git a/packages/web-app-files/src/store/modules/pagination.js b/packages/web-app-files/src/store/modules/pagination.js
deleted file mode 100644
index c7c4938feab..00000000000
--- a/packages/web-app-files/src/store/modules/pagination.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default {
-  namespaced: true,
-  state: () => ({
-    currentPage: 1,
-    itemsPerPage: 100
-  }),
-  mutations: {
-    SET_ITEMS_PER_PAGE(state, limit) {
-      state.itemsPerPage = parseInt(limit)
-
-      window.localStorage.setItem('oc_filesPageLimit', limit)
-    },
-    UPDATE_CURRENT_PAGE(state, page) {
-      state.currentPage = parseInt(page)
-    }
-  },
-  getters: {
-    pages: (state, getters, rootState, rootGetters) => {
-      if (!state.itemsPerPage) {
-        return 1
-      }
-
-      const allFiles = rootGetters['Files/filesAll']
-      return Math.ceil(allFiles.length / state.itemsPerPage)
-    }
-  }
-}
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index bf33382a9a7..ac0e278770c 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -15,7 +15,7 @@
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-paths-displayed="true"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         @fileClick="$_fileActions_triggerDefaultAction"
@@ -28,9 +28,16 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <oc-pagination
+            v-if="paginationPages > 1"
+            :pages="paginationPages"
+            :current-page="paginationPage"
+            :max-displayed="3"
+            :current-route="$route"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -44,15 +51,21 @@
 
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
+import { computed } from '@vue/composition-api'
 
 import { buildResource } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListFilter from '../mixins/filesListFilter'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import debounce from 'lodash-es/debounce'
 import { useTask } from 'vue-concurrency'
 
@@ -60,7 +73,6 @@ import QuickActions from '../components/FilesList/QuickActions.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 
@@ -72,14 +84,24 @@ export default {
     ListLoader,
     NoContentMessage,
     ListInfo,
-    Pagination,
     ContextActions
   },
 
-  mixins: [FileActions, MixinFilesListPagination, MixinMountSideBar, MixinFilesListFilter],
+  mixins: [FileActions, MixinMountSideBar, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() =>
+        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
+      ),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -90,7 +112,13 @@ export default {
       ref.loadIndicators({ client: this.$client, currentFolder: '/' })
     })
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
@@ -98,7 +126,6 @@ export default {
     ...mapState('Files', ['files']),
     ...mapGetters('Files', [
       'highlightedFile',
-      'activeFilesCurrentPage',
       'selectedFiles',
       'totalFilesCount',
       'totalFilesSize'
@@ -120,7 +147,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     displayThumbnails() {
@@ -128,13 +155,6 @@ export default {
     }
   },
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
-    }
-  },
-
   created() {
     this.loadResourcesTask.perform(this)
   },
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index af0d7b884ba..ef834bc92e1 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -48,7 +48,7 @@
             id="files-location-picker-table"
             class="files-table"
             :are-thumbnails-displayed="false"
-            :resources="activeFilesCurrentPage"
+            :resources="paginatedResources"
             :disabled="disabledResources"
             :target-route="targetRoute"
             :has-actions="false"
@@ -56,9 +56,16 @@
             :header-position="fileListHeaderY"
           >
             <template #footer>
-              <pagination />
+              <oc-pagination
+                v-if="paginationPages > 1"
+                :pages="paginationPages"
+                :current-page="paginationPage"
+                :max-displayed="3"
+                :current-route="$route"
+                class="files-pagination uk-flex uk-flex-center oc-my-s"
+              />
               <list-info
-                v-if="activeFilesCurrentPage.length > 0"
+                v-if="paginatedResources.length > 0"
                 class="uk-width-1-1 oc-my-s"
                 :files="totalFilesCount.files"
                 :folders="totalFilesCount.folders"
@@ -74,20 +81,26 @@
 
 <script>
 import { mapMutations, mapState, mapActions, mapGetters } from 'vuex'
+import { computed } from '@vue/composition-api'
+
 import { basename, join } from 'path'
 import { batchActions } from '../helpers/batchActions'
 import { cloneStateObject } from '../helpers/store'
 import MixinsGeneral from '../mixins'
 import MixinRoutes from '../mixins/routes'
 import MixinFilesListFilter from '../mixins/filesListFilter'
-import MixinFilesListPagination from '../mixins/filesListPagination'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import { useTask } from 'vue-concurrency'
 
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 
 export default {
@@ -100,15 +113,25 @@ export default {
   components: {
     NoContentMessage,
     ListLoader,
-    ListInfo,
-    Pagination
+    ListInfo
   },
 
-  mixins: [MixinsGeneral, MixinRoutes, MixinFilesListFilter, MixinFilesListPagination],
+  mixins: [MixinsGeneral, MixinRoutes, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() =>
+        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
+      ),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const navigateToTargetTask = useTask(function* (signal, ref, target) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -129,7 +152,13 @@ export default {
       refreshFileListHeaderPosition()
     }).restartable()
 
-    return { fileListHeaderY, navigateToTargetTask }
+    return {
+      fileListHeaderY,
+      navigateToTargetTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   data: () => ({
@@ -142,12 +171,7 @@ export default {
       'locationPickerTargetFolder',
       'currentFolder'
     ]),
-    ...mapGetters('Files', [
-      'activeFilesCurrentPage',
-      'publicLinkPassword',
-      'totalFilesCount',
-      'totalFilesSize'
-    ]),
+    ...mapGetters('Files', ['publicLinkPassword', 'totalFilesCount', 'totalFilesSize']),
     ...mapGetters(['configuration']),
     ...mapGetters(['homeFolder']),
 
@@ -228,7 +252,7 @@ export default {
     },
 
     disabledResources() {
-      const resources = cloneStateObject(this.activeFilesCurrentPage)
+      const resources = cloneStateObject(this.paginatedResources)
 
       return resources
         .filter((resource) => resource.type !== 'folder' || this.resources.includes(resource.path))
@@ -236,7 +260,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     targetRoute() {
@@ -278,8 +302,6 @@ export default {
         if (!sameRoute || !sameItem) {
           this.navigateToTargetTask.perform(this, this.$route)
         }
-
-        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     }
@@ -336,7 +358,7 @@ export default {
         let targetPath = this.target || '/'
         const resourceName = basename(resource)
         targetPath += '/' + resourceName
-        const exists = this.activeFilesCurrentPage.some((item) => {
+        const exists = this.paginatedResources.some((item) => {
           return basename(item.name) === resourceName
         })
 
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 01995d408cc..a1a63021636 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -23,7 +23,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         :drag-drop="true"
@@ -43,9 +43,16 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <oc-pagination
+            v-if="paginationPages > 1"
+            :pages="paginationPages"
+            :current-page="paginationPage"
+            :max-displayed="3"
+            :current-route="$route"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -66,13 +73,19 @@ import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../mixins/fileActions'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinFilesListScrolling from '../mixins/filesListScrolling'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { buildResource } from '../helpers/resources'
 import { fileList } from '../helpers/ui'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
-import { useMutationSubscription, useFileListHeaderPosition } from '../composables'
+import {
+  useMutationSubscription,
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import { bus } from 'web-pkg/src/instance'
 
 import QuickActions from '../components/FilesList/QuickActions.vue'
@@ -80,12 +93,11 @@ import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 import { basename, join } from 'path'
 import PQueue from 'p-queue'
-import { nextTick } from '@vue/composition-api'
+import { nextTick, computed } from '@vue/composition-api'
 import { useTask } from 'vue-concurrency'
 
 const visibilityObserver = new VisibilityObserver()
@@ -97,7 +109,6 @@ export default {
     NoContentMessage,
     NotFoundMessage,
     ListInfo,
-    Pagination,
     ContextActions
   },
 
@@ -105,13 +116,23 @@ export default {
     MixinAccessibleBreadcrumb,
     MixinFileActions,
     MixinFilesListScrolling,
-    MixinFilesListPagination,
     MixinMountSideBar,
     MixinFilesListFilter
   ],
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() =>
+        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
+      ),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     useMutationSubscription(['Files/UPSERT_RESOURCE'], async ({ payload }) => {
       await nextTick()
@@ -153,18 +174,22 @@ export default {
       ref.scrollToResourceFromRoute()
     }).restartable()
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapState(['app']),
     ...mapState('Files', ['files']),
-    ...mapState('Files/pagination', ['currentPage']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
     ...mapGetters('Files', [
       'highlightedFile',
       'selectedFiles',
-      'activeFilesCurrentPage',
       'currentFolder',
       'totalFilesCount',
       'totalFilesSize'
@@ -172,7 +197,7 @@ export default {
     ...mapGetters(['user', 'homeFolder', 'configuration']),
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     selected: {
@@ -227,8 +252,6 @@ export default {
           return
         }
 
-        this.$_filesListPagination_updateCurrentPage()
-
         if (!sameRoute || !sameItem) {
           this.loadResourcesTask.perform(this, sameRoute)
         }
@@ -265,7 +288,7 @@ export default {
 
     async fileDropped(fileIdTarget) {
       const selected = [...this.selectedFiles]
-      const targetInfo = this.activeFilesCurrentPage.find((e) => e.id === fileIdTarget)
+      const targetInfo = this.paginatedResources.find((e) => e.id === fileIdTarget)
       const isTargetSelected = selected.some((e) => e.id === fileIdTarget)
       if (isTargetSelected) return
       if (targetInfo.type !== 'folder') return
@@ -369,9 +392,9 @@ export default {
     scrollToResourceFromRoute() {
       const resourceName = this.$route.query.scrollTo
 
-      if (resourceName && this.activeFilesCurrentPage.length > 0) {
+      if (resourceName && this.paginatedResources.length > 0) {
         this.$nextTick(() => {
-          const resource = this.activeFilesCurrentPage.find((r) => r.name === resourceName)
+          const resource = this.paginatedResources.find((r) => r.name === resourceName)
 
           if (resource) {
             this.selected = [resource]
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 4ae2722986a..6492caa5f79 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -23,7 +23,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         @fileClick="$_fileActions_triggerDefaultAction"
@@ -33,9 +33,16 @@
           <context-actions v-if="isResourceInSelection(resource)" :item="resource" />
         </template>
         <template #footer>
-          <pagination />
+          <oc-pagination
+            v-if="paginationPages > 1"
+            :pages="paginationPages"
+            :current-page="paginationPage"
+            :max-displayed="3"
+            :current-route="$route"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -49,12 +56,18 @@
 
 <script>
 import { mapGetters, mapActions, mapMutations, mapState } from 'vuex'
-import { useMutationSubscription, useFileListHeaderPosition } from '../composables'
+import {
+  useMutationSubscription,
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import { fileList } from '../helpers/ui'
 
 import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../mixins/fileActions'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -64,13 +77,12 @@ import merge from 'lodash-es/merge'
 import { buildResource } from '../helpers/resources'
 import { bus } from 'web-pkg/src/instance'
 import { useTask } from 'vue-concurrency'
-import { nextTick } from '@vue/composition-api'
+import { nextTick, computed } from '@vue/composition-api'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 
@@ -116,21 +128,26 @@ export default {
     ListLoader,
     NoContentMessage,
     NotFoundMessage,
-    Pagination,
     ContextActions
   },
 
-  mixins: [
-    MixinAccessibleBreadcrumb,
-    MixinFileActions,
-    MixinFilesListPagination,
-    MixinMountSideBar
-  ],
+  mixins: [MixinAccessibleBreadcrumb, MixinFileActions, MixinMountSideBar],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
-
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() =>
+        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
+      ),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
     useMutationSubscription(['Files/UPSERT_RESOURCE'], async ({ payload }) => {
       await nextTick()
       fileList.accentuateItem(payload.id)
@@ -183,13 +200,18 @@ export default {
       ref.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
     }).restartable()
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapGetters('Files', [
       'publicLinkPassword',
-      'activeFilesCurrentPage',
       'selectedFiles',
       'currentFolder',
       'highlightedFile',
@@ -201,7 +223,7 @@ export default {
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     selected: {
@@ -234,8 +256,6 @@ export default {
         if (!sameRoute || !sameItem) {
           this.loadResourcesTask.perform(this, sameRoute)
         }
-
-        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     }
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index f939bbcf5f4..e3e0676efd0 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -19,7 +19,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         @fileClick="$_fileActions_triggerDefaultAction"
@@ -29,9 +29,16 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <oc-pagination
+            v-if="paginationPages > 1"
+            :pages="paginationPages"
+            :current-page="paginationPage"
+            :max-displayed="3"
+            :current-route="$route"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -44,13 +51,19 @@
 
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
+import { computed } from '@vue/composition-api'
 
 import { aggregateResourceShares } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
@@ -60,24 +73,28 @@ import { useTask } from 'vue-concurrency'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
+  components: { ListLoader, NoContentMessage, ListInfo, ContextActions },
 
-  mixins: [
-    FileActions,
-    MixinResources,
-    MixinFilesListPagination,
-    MixinMountSideBar,
-    MixinFilesListFilter
-  ],
+  mixins: [FileActions, MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() =>
+        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
+      ),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -103,18 +120,19 @@ export default {
       ref.LOAD_FILES({ currentFolder: null, files: resources })
     })
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapState(['app']),
     ...mapState('Files', ['files']),
-    ...mapGetters('Files', [
-      'highlightedFile',
-      'activeFilesCurrentPage',
-      'selectedFiles',
-      'totalFilesCount'
-    ]),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
     ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
@@ -128,7 +146,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     targetRoute() {
@@ -140,13 +158,6 @@ export default {
     }
   },
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
-    }
-  },
-
   created() {
     this.loadResourcesTask.perform(this)
   },
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index 22079c42310..7def2109e28 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -21,7 +21,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         @fileClick="$_fileActions_triggerDefaultAction"
@@ -31,9 +31,16 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <oc-pagination
+            v-if="paginationPages > 1"
+            :pages="paginationPages"
+            :current-page="paginationPage"
+            :max-displayed="3"
+            :current-route="$route"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -46,40 +53,50 @@
 
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
+import { computed } from '@vue/composition-api'
 
 import { aggregateResourceShares } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import debounce from 'lodash-es/debounce'
 import { useTask } from 'vue-concurrency'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
+  components: { ListLoader, NoContentMessage, ListInfo, ContextActions },
 
-  mixins: [
-    FileActions,
-    MixinResources,
-    MixinFilesListPagination,
-    MixinMountSideBar,
-    MixinFilesListFilter
-  ],
+  mixins: [FileActions, MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() =>
+        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
+      ),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -106,18 +123,19 @@ export default {
       ref.LOAD_FILES({ currentFolder: null, files: resources })
     })
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapState(['app']),
     ...mapState('Files', ['files']),
-    ...mapGetters('Files', [
-      'highlightedFile',
-      'activeFilesCurrentPage',
-      'selectedFiles',
-      'totalFilesCount'
-    ]),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
     ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
@@ -131,7 +149,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     targetRoute() {
@@ -143,13 +161,6 @@ export default {
     }
   },
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
-    }
-  },
-
   created() {
     this.loadResourcesTask.perform(this)
   },
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 6f2f4aa41a6..bf24f984b8e 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -20,7 +20,7 @@
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-paths-displayed="true"
         :are-thumbnails-displayed="false"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :are-resources-clickable="false"
         :header-position="fileListHeaderY"
       >
@@ -28,9 +28,16 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <oc-pagination
+            v-if="paginationPages > 1"
+            :pages="paginationPages"
+            :current-page="paginationPage"
+            :max-displayed="3"
+            :current-route="$route"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -43,31 +50,46 @@
 
 <script>
 import { mapGetters, mapMutations, mapState } from 'vuex'
+import { computed } from '@vue/composition-api'
 
 import { buildDeletedResource, buildResource } from '../helpers/resources'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import { useTask } from 'vue-concurrency'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
-import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
+  components: { ListLoader, NoContentMessage, ListInfo, ContextActions },
 
-  mixins: [MixinResources, MixinFilesListPagination, MixinMountSideBar, MixinFilesListFilter],
+  mixins: [MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
-
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() =>
+        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
+      ),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
 
@@ -80,17 +102,18 @@ export default {
       refreshFileListHeaderPosition()
     })
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapState('Files', ['files']),
-    ...mapGetters('Files', [
-      'highlightedFile',
-      'activeFilesCurrentPage',
-      'selectedFiles',
-      'totalFilesCount'
-    ]),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
     selected: {
@@ -103,14 +126,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
-    }
-  },
-
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
+      return this.paginatedResources.length < 1
     }
   },
 
diff --git a/packages/web-app-files/tests/integration/specs/pagination.spec.js b/packages/web-app-files/tests/integration/specs/pagination.spec.js
index 27adb486cab..dad3706c7c8 100644
--- a/packages/web-app-files/tests/integration/specs/pagination.spec.js
+++ b/packages/web-app-files/tests/integration/specs/pagination.spec.js
@@ -61,34 +61,17 @@ const cases = [
 
 describe('User can navigate in files list using pagination', () => {
   beforeEach(() => {
-    store = merge(
-      {},
-      Store,
-      {
-        modules: {
-          user: {
-            state: {
-              id: 'alice'
-            }
-          },
-          Files: StoreFiles
-        }
-      },
-      {
-        modules: {
-          Files: {
-            modules: {
-              pagination: {
-                state: () => ({
-                  currentPage: 1,
-                  itemsPerPage: 2
-                })
-              }
-            }
+    window.localStorage.setItem('oc_filesPageLimit', '2')
+    store = merge({}, Store, {
+      modules: {
+        user: {
+          state: {
+            id: 'alice'
           }
-        }
+        },
+        Files: StoreFiles
       }
-    )
+    })
 
     const appBar = document.createElement('div')
     const breadcrumbs = document.createElement('div')
diff --git a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
index 96601abe502..f14582ab1f4 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import merge from 'lodash-es/merge'
+import VueCompositionAPI from '@vue/composition-api'
 
 import Store from '@files/src/store'
 import stubs from '@/tests/unit/stubs'
@@ -19,6 +20,7 @@ describe('ViewOptions', () => {
     localVue = createLocalVue()
     localVue.use(Vuex)
     localVue.use(VueRouter)
+    localVue.use(VueCompositionAPI)
 
     router = new VueRouter()
 
@@ -32,12 +34,6 @@ describe('ViewOptions', () => {
           modules: {
             sidebar: {
               namespaced: true
-            },
-            pagination: {
-              namespaced: true,
-              mutations: {
-                SET_ITEMS_PER_PAGE: jest.fn()
-              }
             }
           }
         }
@@ -46,7 +42,7 @@ describe('ViewOptions', () => {
     store = new Vuex.Store(merge({}, Store, mockedStore))
   })
 
-  it('updates the files page limit when using page size component', () => {
+  it('updates the files page limit when using page size component', async () => {
     const wrapper = shallowMount(ViewOptions, {
       store,
       router,
@@ -59,13 +55,15 @@ describe('ViewOptions', () => {
     expect(select.exists()).toBe(true)
 
     select.vm.$emit('input', 500)
+    await wrapper.vm.$nextTick()
+    expect(window.localStorage.getItem('oc_filesPageLimit')).toBe('500')
 
-    expect(
-      mockedStore.modules.Files.modules.pagination.mutations.SET_ITEMS_PER_PAGE
-    ).toHaveBeenCalled()
+    select.vm.$emit('input', 'all')
+    await wrapper.vm.$nextTick()
+    expect(window.localStorage.getItem('oc_filesPageLimit')).toBe('all')
   })
 
-  it('updates the files page limit when route query changes', () => {
+  it('updates the files page limit when route query changes', async () => {
     const wrapper = shallowMount(ViewOptions, {
       store,
       router,
@@ -81,9 +79,8 @@ describe('ViewOptions', () => {
 
     wrapper.vm.$router.replace({ query: { 'items-per-page': 500 } }).catch(() => {})
 
-    expect(
-      mockedStore.modules.Files.modules.pagination.mutations.SET_ITEMS_PER_PAGE
-    ).toHaveBeenCalled()
+    await wrapper.vm.$nextTick()
+    expect(window.localStorage.getItem('oc_filesPageLimit')).toBe('500')
   })
 
   it('triggeres mutation to toggle hidden files', () => {
diff --git a/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js b/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
deleted file mode 100644
index 946d857ee8d..00000000000
--- a/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import Vuex from 'vuex'
-import GetTextPlugin from 'vue-gettext'
-import DesignSystem from 'owncloud-design-system'
-import Pagination from '@files/src/components/FilesList/Pagination.vue'
-import { createLocalVue, mount, RouterLinkStub, shallowMount } from '@vue/test-utils'
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-localVue.use(DesignSystem)
-localVue.use(GetTextPlugin, {
-  translations: 'does-not-matter.json',
-  silent: true
-})
-
-const filesPersonalRoute = { name: 'files-personal', path: '/files/home' }
-
-const selectors = {
-  filesPagination: '.files-pagination'
-}
-
-describe('Pagination', () => {
-  describe('when amount of pages is', () => {
-    describe('less than or equals one', () => {
-      it.each([-1, 0, 1])('should not show wrapper', (pages) => {
-        const store = createStore(0, pages)
-        const wrapper = getWrapper(store)
-
-        expect(wrapper.find(selectors.filesPagination).exists()).toBeFalsy()
-      })
-    })
-
-    describe('greater than one', () => {
-      const wrapper = getWrapper(createStore(1, 2))
-
-      it('should show wrapper', () => {
-        const paginationEl = wrapper.find('.files-pagination')
-
-        expect(paginationEl.exists()).toBeTruthy()
-        expect(paginationEl.attributes().pages).toBe('2')
-      })
-
-      it('should set provided current page', () => {
-        const paginationEl = wrapper.find(selectors.filesPagination)
-
-        expect(paginationEl.attributes().currentpage).toBe('1')
-      })
-    })
-  })
-
-  describe('current route', () => {
-    it('should use provided route to render pages', () => {
-      const wrapper = getMountedWrapper(createStore())
-      const currentRoute = wrapper.vm.$route
-      const links = wrapper.findAllComponents(RouterLinkStub)
-
-      // three links (route to prev, next and last page)
-      expect(links.length).toBe(3)
-      expect(links.at(0).props().to.name).toBe(currentRoute.name)
-      expect(links.at(1).props().to.name).toBe(currentRoute.name)
-      expect(links.at(2).props().to.name).toBe(currentRoute.name)
-    })
-  })
-})
-
-function createStore(currentPage = 1, pages = 10) {
-  return new Vuex.Store({
-    modules: {
-      Files: {
-        namespaced: true,
-        modules: {
-          pagination: {
-            namespaced: true,
-            state: {
-              currentPage: currentPage
-            },
-            getters: {
-              pages: () => {
-                return pages
-              }
-            }
-          }
-        }
-      }
-    }
-  })
-}
-
-function getWrapper(store) {
-  return shallowMount(Pagination, {
-    localVue,
-    store: store,
-    stubs: {
-      'oc-pagination': true
-    },
-    mocks: {
-      $route: filesPersonalRoute
-    }
-  })
-}
-
-function getMountedWrapper(store) {
-  return mount(Pagination, {
-    localVue,
-    store: store,
-    stubs: {
-      'oc-pagination': false,
-      RouterLink: RouterLinkStub
-    },
-    mocks: {
-      $route: filesPersonalRoute
-    }
-  })
-}
diff --git a/packages/web-app-files/tests/unit/components/Search/List.spec.js b/packages/web-app-files/tests/unit/components/Search/List.spec.js
index a4316e4e943..af90eedc899 100644
--- a/packages/web-app-files/tests/unit/components/Search/List.spec.js
+++ b/packages/web-app-files/tests/unit/components/Search/List.spec.js
@@ -1,4 +1,6 @@
 import { mount, createLocalVue } from '@vue/test-utils'
+import VueCompositionAPI from '@vue/composition-api'
+import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 import DesignSystem from 'owncloud-design-system'
 import GetTextPlugin from 'vue-gettext'
@@ -7,7 +9,9 @@ import List from '@files/src/components/Search/List.vue'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
+localVue.use(VueRouter)
 localVue.use(DesignSystem)
+localVue.use(VueCompositionAPI)
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
   silent: true
@@ -86,14 +90,6 @@ describe('List component', () => {
 
       expect(noContentMessage.exists()).toBeFalsy()
     })
-    it('should show files table with pagination', () => {
-      const filesTable = wrapper.find(selectors.filesTable)
-      const pagination = wrapper.find(selectors.pagination)
-
-      expect(filesTable.exists()).toBeTruthy()
-      expect(filesTable.props().resources).toMatchObject(files)
-      expect(pagination.exists()).toBeTruthy()
-    })
     it('should set correct props on list-info component', () => {
       const listInfo = wrapper.find(selectors.listInfo)
 
@@ -124,21 +120,12 @@ function getWrapper(searchTerm = '', files = []) {
       searchResults: getSearchResults(files)
     },
     store: createStore(files),
-    mocks: {
-      $route: {
-        query: {
-          term: searchTerm
-        },
-        params: {
-          page: 1
-        }
-      }
-    },
+    router: new VueRouter(),
     stubs
   })
 }
 
-function createStore(activeFilesCurrentPage) {
+function createStore(activeFiles) {
   return new Vuex.Store({
     getters: {
       configuration: () => ({
@@ -151,24 +138,14 @@ function createStore(activeFilesCurrentPage) {
       Files: {
         namespaced: true,
         getters: {
-          activeFilesCurrentPage: () => activeFilesCurrentPage,
-          totalFilesCount: () => ({ files: activeFilesCurrentPage.length, folders: 0 }),
-          totalFilesSize: () => getTotalSize(activeFilesCurrentPage)
+          activeFiles: () => activeFiles,
+          totalFilesCount: () => ({ files: activeFiles.length, folders: 0 }),
+          totalFilesSize: () => getTotalSize(activeFiles)
         },
         mutations: {
           CLEAR_CURRENT_FILES_LIST: jest.fn(),
+          CLEAR_FILES_SEARCHED: jest.fn(),
           LOAD_FILES: jest.fn()
-        },
-        modules: {
-          pagination: {
-            namespaced: true,
-            getters: {
-              pages: jest.fn()
-            },
-            mutations: {
-              UPDATE_CURRENT_PAGE: jest.fn()
-            }
-          }
         }
       }
     }
diff --git a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
index 7478b837842..79b68588c3d 100644
--- a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
@@ -9,7 +9,7 @@ exports[`List component when no resource is found should show no-content-message
         </g>
       </svg></div>
     <div class="oc-text-muted uk-text-large">
-      <p class="oc-text-muted"><span data-msgid="No resource found" data-current-language="en_US">No resource found</span></p>
+      <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
     </div>
     <div class="oc-text-muted"></div>
   </div>
diff --git a/packages/web-app-files/tests/unit/composables/router/spec/index.ts b/packages/web-app-files/tests/unit/composables/router/spec/index.ts
new file mode 100644
index 00000000000..e7592ecc6f3
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/router/spec/index.ts
@@ -0,0 +1,23 @@
+import VueCompositionAPI, { defineComponent, SetupFunction, Data } from '@vue/composition-api'
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+const localVue = createLocalVue()
+localVue.use(VueCompositionAPI)
+localVue.use(VueRouter)
+
+export const createWrapper = (
+  setup: SetupFunction<Data, Data>,
+  { router, template }: { router?: VueRouter; template?: string }
+): Wrapper<Vue> =>
+  mount(
+    defineComponent({
+      template: `<div>${template}</div>`,
+      setup
+    }),
+    {
+      localVue,
+      router
+    }
+  )
diff --git a/packages/web-app-files/tests/unit/composables/router/useRouteQuery.spec.ts b/packages/web-app-files/tests/unit/composables/router/useRouteQuery.spec.ts
new file mode 100644
index 00000000000..40eb7b4469e
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/router/useRouteQuery.spec.ts
@@ -0,0 +1,131 @@
+import { useRouteQuery } from '../../../../src/composables'
+import { createWrapper } from './spec'
+import VueRouter from 'vue-router'
+import { Ref, nextTick, computed, ComputedRef } from '@vue/composition-api'
+
+describe('useRouteQuery', () => {
+  it('is reactive', async () => {
+    const router = new VueRouter()
+    let fooQuery: Ref
+    let fooValue: ComputedRef
+
+    const wrapper = createWrapper(
+      () => {
+        fooQuery = useRouteQuery('foo', '1')
+        fooValue = computed(() => parseInt(fooQuery.value as string))
+
+        return {
+          fooQuery,
+          fooValue
+        }
+      },
+      {
+        router,
+        template: `<div id="fooQuery">{{ fooQuery }}</div><div id="fooValue">{{ fooValue }}</div>`
+      }
+    )
+
+    expect(wrapper.find('#fooQuery').element.innerHTML).toBe('1')
+    expect(wrapper.find('#fooValue').element.innerHTML).toBe('1')
+    expect(typeof fooQuery.value).toBe('string')
+    expect(fooQuery.value).toBe('1')
+    expect(typeof fooValue.value).toBe('number')
+    expect(fooValue.value).toBe(1)
+
+    fooQuery.value = '2'
+    await nextTick()
+    expect(wrapper.find('#fooQuery').element.innerHTML).toBe('2')
+    expect(wrapper.find('#fooValue').element.innerHTML).toBe('2')
+
+    await router.push({ query: { foo: '3' } })
+    await nextTick()
+    expect(wrapper.find('#fooQuery').element.innerHTML).toBe('3')
+    expect(wrapper.find('#fooValue').element.innerHTML).toBe('3')
+
+    await router.push({})
+    await nextTick()
+    expect(wrapper.find('#fooQuery').element.innerHTML).toBe('1')
+    expect(wrapper.find('#fooValue').element.innerHTML).toBe('1')
+  })
+
+  it('has a default value if route query is not set', () => {
+    const router = new VueRouter()
+
+    createWrapper(
+      () => {
+        const fooQuery = useRouteQuery('foo', 'defaultValue')
+
+        expect(fooQuery.value).toBe('defaultValue')
+
+        router.push({ query: { foo: 'foo-1' } })
+        expect(fooQuery.value).toBe('foo-1')
+
+        router.push({})
+        expect(fooQuery.value).toBe('defaultValue')
+      },
+      { router }
+    )
+  })
+
+  it('should update on route query change', () => {
+    const router = new VueRouter()
+
+    createWrapper(
+      () => {
+        const fooQuery = useRouteQuery('foo')
+        const barQuery = useRouteQuery('bar')
+
+        router.push({ query: { foo: 'foo-1' } })
+        expect(fooQuery.value).toBe('foo-1')
+        expect(barQuery.value).toBeFalsy()
+
+        router.push({ query: { foo: 'foo-2' } })
+        expect(fooQuery.value).toBe('foo-2')
+        expect(barQuery.value).toBeFalsy()
+
+        router.push({ query: { foo: 'foo-3', bar: 'bar-1' } })
+        expect(fooQuery.value).toBe('foo-3')
+        expect(barQuery.value).toBe('bar-1')
+      },
+      { router }
+    )
+  })
+
+  it('should be undefined if route changes and query is not present', () => {
+    const router = new VueRouter({
+      routes: [{ path: '/home' }, { path: '/sub' }]
+    })
+
+    createWrapper(
+      () => {
+        const fooQuery = useRouteQuery('foo')
+
+        router.push({ path: '/home', query: { foo: 'bar' } })
+        expect(fooQuery.value).toBe('bar')
+
+        router.push({ path: '/sub' })
+        expect(fooQuery.value).toBeUndefined()
+      },
+      { router }
+    )
+  })
+
+  it('should update route query', () => {
+    const router = new VueRouter({
+      routes: [{ path: '/home' }]
+    })
+
+    createWrapper(
+      () => {
+        const fooQuery = useRouteQuery('foo')
+
+        router.push({ path: '/home' })
+        expect(fooQuery.value).toBeUndefined()
+
+        fooQuery.value = 'changedThroughRef'
+        expect(router.currentRoute.query.foo).toBe('changedThroughRef')
+      },
+      { router }
+    )
+  })
+})
diff --git a/packages/web-app-files/tests/unit/composables/router/useRouter.spec.ts b/packages/web-app-files/tests/unit/composables/router/useRouter.spec.ts
new file mode 100644
index 00000000000..aefa8d586f0
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/router/useRouter.spec.ts
@@ -0,0 +1,16 @@
+import { useRouter } from '../../../../src/composables'
+import { createWrapper } from './spec'
+import VueRouter from 'vue-router'
+
+describe('useRouter', () => {
+  it('should be valid', () => {
+    expect(useRouter).toBeDefined()
+
+    createWrapper(
+      () => {
+        expect(useRouter()).toBeInstanceOf(VueRouter)
+      },
+      { router: new VueRouter() }
+    )
+  })
+})
diff --git a/packages/web-app-files/tests/unit/composables/store/mutationSubscription.spec.ts b/packages/web-app-files/tests/unit/composables/store/useMutationSubscription.spec.ts
similarity index 100%
rename from packages/web-app-files/tests/unit/composables/store/mutationSubscription.spec.ts
rename to packages/web-app-files/tests/unit/composables/store/useMutationSubscription.spec.ts
diff --git a/packages/web-app-files/tests/unit/composables/store/store.spec.ts b/packages/web-app-files/tests/unit/composables/store/useStore.spec.ts
similarity index 100%
rename from packages/web-app-files/tests/unit/composables/store/store.spec.ts
rename to packages/web-app-files/tests/unit/composables/store/useStore.spec.ts
diff --git a/packages/web-app-files/tests/unit/composables/usePagination/index.spec.ts b/packages/web-app-files/tests/unit/composables/usePagination/index.spec.ts
new file mode 100644
index 00000000000..58650b2eafa
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/usePagination/index.spec.ts
@@ -0,0 +1,89 @@
+import { ref } from '@vue/composition-api'
+import { createWrapper } from './spec'
+import { usePagination } from '../../../../src/composables'
+
+describe('usePagination', () => {
+  it('should be valid', () => {
+    expect(usePagination).toBeDefined()
+  })
+
+  it('calculates the items per page', () => {
+    createWrapper(() => {
+      const input = {
+        items: ref([1, 2, 3, 4, 5]),
+        page: ref(1),
+        perPage: ref(2)
+      }
+
+      const { items } = usePagination(input)
+
+      expect(items.value).toMatchObject([1, 2])
+
+      input.page.value = 2
+      expect(items.value).toMatchObject([3, 4])
+
+      input.page.value = 3
+      expect(items.value).toMatchObject([5])
+
+      input.items.value.push(6)
+      expect(items.value).toMatchObject([5, 6])
+
+      input.perPage.value = 3
+      expect(items.value).toMatchObject([])
+
+      input.items.value.push(7)
+      expect(items.value).toMatchObject([7])
+
+      input.page.value = 2
+      expect(items.value).toMatchObject([4, 5, 6])
+    })
+  })
+
+  it('calculates number of pages', () => {
+    createWrapper(() => {
+      const input = {
+        items: ref([1, 2]),
+        page: 1,
+        perPage: ref(2)
+      }
+
+      const { total } = usePagination(input)
+
+      expect(total.value).toBe(1)
+
+      input.items.value.push(3)
+      expect(total.value).toBe(2)
+
+      input.perPage.value = 1
+      expect(total.value).toBe(3)
+
+      input.perPage.value = 3
+      expect(total.value).toBe(1)
+
+      input.items.value.push(4, 5, 6)
+      expect(total.value).toBe(2)
+
+      input.items.value.push(7)
+      expect(total.value).toBe(3)
+    })
+  })
+
+  it('handles situations where perPage is falsy (even 0)', () => {
+    createWrapper(() => {
+      const input = {
+        items: ref([1, 2, 3, 4, 5]),
+        page: 1,
+        perPage: ref(2)
+      }
+
+      const { total, items } = usePagination(input)
+      expect(total.value).toBe(3)
+      expect(items.value.length).toBe(2)
+
+      input.perPage.value = parseInt('AllOrWhatEver')
+
+      expect(total.value).toBe(1)
+      expect(items.value.length).toBe(5)
+    })
+  })
+})
diff --git a/packages/web-app-files/tests/unit/composables/usePagination/spec/index.ts b/packages/web-app-files/tests/unit/composables/usePagination/spec/index.ts
new file mode 100644
index 00000000000..c7a8fefba15
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/usePagination/spec/index.ts
@@ -0,0 +1,19 @@
+import VueCompositionAPI, { defineComponent, SetupFunction, Data } from '@vue/composition-api'
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
+import Vuex from 'vuex'
+import Vue from 'vue'
+
+const localVue = createLocalVue()
+localVue.use(VueCompositionAPI)
+localVue.use(Vuex)
+
+export const createWrapper = (setup: SetupFunction<Data, Data>): Wrapper<Vue> =>
+  mount(
+    defineComponent({
+      template: `<div></div>`,
+      setup
+    }),
+    {
+      localVue
+    }
+  )
diff --git a/packages/web-app-files/tests/unit/store/getters.spec.js b/packages/web-app-files/tests/unit/store/getters.spec.js
index aa3666bc1e7..8d7c446ee50 100644
--- a/packages/web-app-files/tests/unit/store/getters.spec.js
+++ b/packages/web-app-files/tests/unit/store/getters.spec.js
@@ -2,7 +2,6 @@ import getters from '@files/src/store/getters'
 import FixtureFiles from '@/__fixtures__/files'
 
 let state
-let rootState
 describe('Getters', () => {
   beforeEach(() => {
     state = {
@@ -10,14 +9,6 @@ describe('Getters', () => {
       searchTermGlobal: '',
       areHiddenFilesShown: true
     }
-    rootState = {
-      Files: {
-        pagination: {
-          currentPage: 1,
-          itemsPerPage: 10
-        }
-      }
-    }
   })
 
   describe('activeFiles', () => {
@@ -30,35 +21,7 @@ describe('Getters', () => {
       state.areHiddenFilesShown = value
 
       const { activeFiles, filesAll } = getters
-      const result = activeFiles(state, { filesAll: filesAll(state) }, rootState)
-
-      expect(result.length).toEqual(5)
-    })
-  })
-
-  describe('activeFilesCurrentPage', () => {
-    it('returns only a portion of files if files page limit is set', () => {
-      rootState.Files.pagination.itemsPerPage = 2
-
-      const { activeFilesCurrentPage, activeFiles, filesAll } = getters
-      const result = activeFilesCurrentPage(
-        state,
-        { activeFiles: activeFiles(state, { filesAll: filesAll(state) }) },
-        rootState
-      )
-
-      expect(result.length).toEqual(2)
-    })
-
-    it('returns all files if files page limit is of type string', () => {
-      rootState.Files.pagination.itemsPerPage = 'All'
-
-      const { activeFilesCurrentPage, activeFiles, filesAll } = getters
-      const result = activeFilesCurrentPage(
-        state,
-        { activeFiles: activeFiles(state, { filesAll: filesAll(state) }) },
-        rootState
-      )
+      const result = activeFiles(state, { filesAll: filesAll(state) })
 
       expect(result.length).toEqual(5)
     })
diff --git a/packages/web-app-files/tests/unit/store/modules/pagination.spec.js b/packages/web-app-files/tests/unit/store/modules/pagination.spec.js
deleted file mode 100644
index ecdccde62a2..00000000000
--- a/packages/web-app-files/tests/unit/store/modules/pagination.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import paginationModule from '../../../../src/store/modules/pagination.js'
-
-describe('pagination store module', () => {
-  test('updating items per page', () => {
-    const state = { itemsPerPage: 100 }
-    const { SET_ITEMS_PER_PAGE } = paginationModule.mutations
-    SET_ITEMS_PER_PAGE(state, 500)
-
-    expect(state.itemsPerPage).toEqual(500)
-    expect(window.localStorage.getItem('oc_filesPageLimit')).toEqual('500')
-  })
-
-  test('updating current page', () => {
-    const state = { page: 1 }
-    const { UPDATE_CURRENT_PAGE } = paginationModule.mutations
-    UPDATE_CURRENT_PAGE(state, 2)
-
-    expect(state.page).toEqual(1)
-  })
-
-  test('calculation of available pages', () => {
-    const state = { itemsPerPage: 2 }
-    const pages = paginationModule.getters.pages(state, undefined, undefined, {
-      'Files/filesAll': ['file-1', 'file-2', 'file-3', 'file-4', 'file-5']
-    })
-
-    expect(pages).toBe(3)
-  })
-})
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index 124a5fafd83..4adc45f803b 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -2,6 +2,9 @@ import { mount } from '@vue/test-utils'
 import { createFile, localVue, getStore } from './views.setup'
 import Favorites from 'packages/web-app-files/src/views/Favorites.vue'
 
+import VueRouter from 'vue-router'
+localVue.use(VueRouter)
+
 const stubs = {
   'router-link': true,
   translate: true,
@@ -33,7 +36,13 @@ describe('Favorites component', () => {
     })
 
     it('shows only the files table when loading is finished', () => {
-      const wrapper = getMountedWrapper()
+      const wrapper = getMountedWrapper({
+        setup() {
+          return {
+            paginatedResources: defaultActiveFiles
+          }
+        }
+      })
 
       expect(wrapper.find(spinnerStub).exists()).toBeFalsy()
       expect(wrapper.find(filesTableStub).exists()).toBeTruthy()
@@ -41,7 +50,7 @@ describe('Favorites component', () => {
   })
   describe('no content message', () => {
     it('shows only the "no content" message if no resources are marked as favorite', () => {
-      const store = getStore({ activeFilesCurrentPage: [] })
+      const store = getStore()
       const wrapper = getMountedWrapper({ store, loading: false })
 
       expect(wrapper.find(selectors.noContentMessage).exists()).toBeTruthy()
@@ -49,7 +58,13 @@ describe('Favorites component', () => {
     })
 
     it('does not show the no content message if resources are marked as favorite', () => {
-      const wrapper = getMountedWrapper()
+      const wrapper = getMountedWrapper({
+        setup() {
+          return {
+            paginatedResources: defaultActiveFiles
+          }
+        }
+      })
 
       expect(wrapper.find('#files-favorites-empty').exists()).toBeFalsy()
       expect(wrapper.find(filesTableStub).exists()).toBeTruthy()
@@ -58,8 +73,16 @@ describe('Favorites component', () => {
   describe('files table', () => {
     describe('no file is highlighted', () => {
       it("don't squash the table", () => {
-        const store = getStore({ sidebarClosed: true, activeFilesCurrentPage: defaultActiveFiles })
-        const wrapper = getMountedWrapper({ store, loading: false })
+        const store = getStore({ sidebarClosed: true })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
+        })
 
         expect(wrapper.find(selectors.favoritesTable).attributes('class')).not.toContain(
           'files-table-squashed'
@@ -68,7 +91,13 @@ describe('Favorites component', () => {
       })
 
       it('don\'t sets the "highlighted" attribute', () => {
-        const wrapper = getMountedWrapper()
+        const wrapper = getMountedWrapper({
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
+        })
 
         expect(wrapper.find(selectors.favoritesTable).attributes('highlighted')).toBeFalsy()
       })
@@ -76,10 +105,16 @@ describe('Favorites component', () => {
 
     describe('a file is highlighted', () => {
       const store = getStore({
-        highlightedFile: defaultActiveFiles[0],
-        activeFilesCurrentPage: defaultActiveFiles
+        highlightedFile: defaultActiveFiles[0]
+      })
+      const wrapper = getMountedWrapper({
+        store,
+        setup() {
+          return {
+            paginatedResources: defaultActiveFiles
+          }
+        }
       })
-      const wrapper = getMountedWrapper({ store })
 
       it('squash the table', () => {
         expect(wrapper.find(selectors.favoritesTable).attributes('class')).toContain(
@@ -91,10 +126,17 @@ describe('Favorites component', () => {
     describe('previews', () => {
       it('displays previews when the "disablePreviews" config is disabled', () => {
         const store = getStore({
-          disablePreviews: false,
-          activeFilesCurrentPage: defaultActiveFiles
+          disablePreviews: false
+        })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
         })
-        const wrapper = getMountedWrapper({ store, loading: false })
 
         expect(
           wrapper.find(selectors.favoritesTable).attributes('arethumbnailsdisplayed')
@@ -103,10 +145,17 @@ describe('Favorites component', () => {
 
       it('hides previews when the "disablePreviews" config is enabled', () => {
         const store = getStore({
-          disablePreviews: true,
-          activeFilesCurrentPage: defaultActiveFiles
+          disablePreviews: true
+        })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
         })
-        const wrapper = getMountedWrapper({ store, loading: false })
 
         expect(
           wrapper.find(selectors.favoritesTable).attributes('arethumbnailsdisplayed')
@@ -119,24 +168,9 @@ describe('Favorites component', () => {
         stubs['oc-table-files'] = false
       })
 
-      it('sets the pages count & the current page', () => {
-        const store = getStore({
-          highlightedFile: defaultActiveFiles[0],
-          activeFilesCurrentPage: defaultActiveFiles,
-          pages: 4,
-          currentPage: 3,
-          totalFilesCount: { files: 10, folders: 10 }
-        })
-        const wrapper = getMountedWrapper({ store, loading: false })
-
-        expect(wrapper.find(paginationStub).attributes('currentpage')).toEqual('3')
-        expect(wrapper.find(paginationStub).attributes('pages')).toEqual('4')
-      })
-
       it('does not show any pagination when there is only one page', () => {
         const store = getStore({
           highlightedFile: defaultActiveFiles[0],
-          activeFilesCurrentPage: defaultActiveFiles,
           pages: 1,
           currentPage: 1,
           totalFilesCount: { files: 10, folders: 10 }
@@ -156,11 +190,18 @@ describe('Favorites component', () => {
       it('sets the counters and the size', () => {
         const store = getStore({
           highlightedFile: defaultActiveFiles[0],
-          activeFilesCurrentPage: defaultActiveFiles,
           totalFilesCount: { files: 15, folders: 20 },
           totalFilesSize: 1024
         })
-        const wrapper = getMountedWrapper({ store, loading: false })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
+        })
         const listInfoStubElement = wrapper.find(listInfoStub)
 
         expect(listInfoStubElement.props()).toMatchObject({
@@ -179,16 +220,23 @@ describe('Favorites component', () => {
         const file = createFile({ id: 3, status: 2, type: 'file' })
         const store = getStore({
           highlightedFile: file,
-          activeFilesCurrentPage: [file],
           totalFilesCount: { files: 15, folders: 20 }
         })
-        const wrapper = getMountedWrapper({ store, loading: false })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
+        })
 
         expect(wrapper.find(listInfoStub).exists()).toBeTruthy()
       })
 
       it('does not show the list info when there are no active files', () => {
-        const store = getStore({ activeFilesCurrentPage: [] })
+        const store = getStore()
         const wrapper = getMountedWrapper({ store, loading: false })
 
         expect(wrapper.find(listInfoStub).exists()).toBeFalsy()
@@ -199,31 +247,27 @@ describe('Favorites component', () => {
 
 function mountOptions({
   store = getStore({
-    activeFilesCurrentPage: defaultActiveFiles,
     totalFilesCount: { files: 1, folders: 1 }
   }),
+  setup = () => ({}),
   loading = false
 } = {}) {
   return {
     localVue,
     store,
     stubs,
-    mocks: {
-      $route: {
-        name: 'some-route',
-        query: { page: 1 }
-      }
-    },
+    router: new VueRouter(),
     setup: () => ({
       loadResourcesTask: {
         isRunning: loading,
         perform: jest.fn()
-      }
+      },
+      ...setup()
     })
   }
 }
 
-function getMountedWrapper({ store, loading } = {}) {
+function getMountedWrapper({ store, loading, setup } = {}) {
   const component = { ...Favorites, created: jest.fn(), mounted: jest.fn() }
-  return mount(component, mountOptions({ store, loading }))
+  return mount(component, mountOptions({ store, loading, setup }))
 }
diff --git a/packages/web-app-files/tests/unit/views/Personal.spec.js b/packages/web-app-files/tests/unit/views/Personal.spec.js
index ab0c731c913..a6ca8b8d649 100644
--- a/packages/web-app-files/tests/unit/views/Personal.spec.js
+++ b/packages/web-app-files/tests/unit/views/Personal.spec.js
@@ -105,6 +105,7 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
     created: jest.fn(),
     mounted: jest.fn(),
     setup: () => ({
+      paginatedResources: [...resources],
       loadResourcesTask: {
         isRunning: false,
         perform: jest.fn()
@@ -135,20 +136,6 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
                 closed: false
               },
               namespaced: true
-            },
-            pagination: {
-              state: {
-                currentPage: 1,
-                itemsPerPage: 100
-              },
-              mutations: {
-                SET_ITEMS_PER_PAGE: () => {},
-                UPDATE_CURRENT_PAGE: () => {}
-              },
-              getters: {
-                pages: () => 1
-              },
-              namespaced: true
             }
           },
           state: {
@@ -156,7 +143,6 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
             currentPage: 1
           },
           getters: {
-            activeFilesCurrentPage: () => [...resources],
             inProgress: () => [null],
             currentFolder: () => '/',
             pages: () => 4,
diff --git a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
index 7c43eb51c21..69e080810ac 100644
--- a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
+++ b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
@@ -1,5 +1,17 @@
 import { accentuatesTableRowTest } from './views.shared'
 import PublicFiles from '@files/src/views/PublicFiles.vue'
+import { localVue } from './views.setup'
+
+/**
+ * FixMe:
+ * localVue is shared, no isolated testing is happening.
+ * if VueRouter is applied multipleTimes it fails (as expected).
+ * as temporary workaround apply it here too.
+ *
+ * create a localVue factory to guarantee isolation
+ */
+import VueRouter from 'vue-router'
+localVue.use(VueRouter)
 
 describe('PublicFiles view', () => {
   describe('accentuate new files and folders', () => {
diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
index 7f554b40e63..89f7410702a 100644
--- a/packages/web-app-files/tests/unit/views/views.setup.js
+++ b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -25,6 +25,7 @@ localVue.prototype.$client.init({ baseUrl: 'http://none.de' })
 localVue.use(Vuex)
 localVue.use(DesignSystem)
 localVue.use(VueCompositionAPI)
+
 /*
  * TODO: options on GetTextPlugin do not have any effect because of
  * packages/web-app-files/src/gettext.js which overwrites every setting.
@@ -39,7 +40,6 @@ export const getStore = function ({
   disablePreviews = true,
   currentPage = null,
   activeFiles = [],
-  activeFilesCurrentPage = [],
   pages = null,
   sidebarClosed = false,
   currentFolder = null,
@@ -88,7 +88,6 @@ export const getStore = function ({
           totalFilesSize: () => totalFilesSize,
           selectedFiles: () => selectedFiles,
           activeFiles: () => activeFiles,
-          activeFilesCurrentPage: () => activeFilesCurrentPage,
           inProgress: () => inProgress,
           highlightedFile: () => highlightedFile,
           currentFolder: () => currentFolder,
diff --git a/packages/web-app-files/tests/unit/views/views.shared.ts b/packages/web-app-files/tests/unit/views/views.shared.ts
index 261d2bbfef8..be9575cb03b 100644
--- a/packages/web-app-files/tests/unit/views/views.shared.ts
+++ b/packages/web-app-files/tests/unit/views/views.shared.ts
@@ -1,8 +1,18 @@
-import Vuex, { mapState } from 'vuex'
+import Vuex from 'vuex'
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import { mount, VueClass } from '@vue/test-utils'
 import { localVue } from './views.setup'
 
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'files-personal'
+    }
+  ]
+})
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {}
 
@@ -15,8 +25,16 @@ export const accentuatesTableRowTest = async <V extends Vue>(
   const store = new Vuex.Store({
     modules: {
       Files: {
+        modules: {
+          sidebar: {
+            state: {
+              closed: false
+            },
+            namespaced: true
+          }
+        },
         state: {
-          activeFilesCurrentPage: [
+          activeFiles: [
             {
               id: 'forest',
               name: 'forest.jpg',
@@ -30,11 +48,12 @@ export const accentuatesTableRowTest = async <V extends Vue>(
         },
         mutations: {
           UPSERT_RESOURCE: (state, resource) => {
-            state.activeFilesCurrentPage.push(resource)
+            state.activeFiles.push(resource)
           }
         },
         getters: {
-          inProgress: () => 0
+          inProgress: () => 0,
+          activeFiles: (state) => state.activeFiles
         },
         namespaced: true
       }
@@ -46,12 +65,12 @@ export const accentuatesTableRowTest = async <V extends Vue>(
       mixins: [],
       watch: {},
       mounted: noop,
-      beforeDestroy: noop,
-      computed: { ...mapState('Files', ['activeFilesCurrentPage']) }
+      beforeDestroy: noop
     },
     {
       attachTo: document.body,
       localVue,
+      router,
       store,
       stubs: {
         'list-loader': true,
@@ -64,8 +83,11 @@ export const accentuatesTableRowTest = async <V extends Vue>(
         'list-info': true
       },
       computed: {
+        displayThumbnails: () => false,
         folderNotFound: () => false,
         isEmpty: () => false,
+        selected: () => [],
+        totalFilesSize: () => 0,
         app: () => ({
           quickActions: {}
         }),

From a3e600223661f4af4de4b57b0229711a43700410 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 29 Nov 2021 11:54:23 +0100
Subject: [PATCH 2/4] move items-per-page route query ref out of computed to
 prevent re initialization every time

---
 packages/web-app-files/src/components/Search/List.vue | 8 ++++----
 packages/web-app-files/src/views/Favorites.vue        | 7 +++----
 packages/web-app-files/src/views/LocationPicker.vue   | 7 +++----
 packages/web-app-files/src/views/Personal.vue         | 7 +++----
 packages/web-app-files/src/views/PublicFiles.vue      | 9 ++++-----
 packages/web-app-files/src/views/SharedViaLink.vue    | 7 +++----
 packages/web-app-files/src/views/SharedWithOthers.vue | 7 +++----
 packages/web-app-files/src/views/Trashbin.vue         | 8 ++++----
 8 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 6e828639f70..07804f31b52 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -72,14 +72,14 @@ export default {
     const store = useStore()
     const { pagination: paginationDefaults } = useDefaults()
     const paginationPageQuery = useRouteQuery('page', '1')
-    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
     const { items: paginatedResources, total: paginationPages } = usePagination({
       page: paginationPage,
-      perPage: computed(() =>
-        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
-      ),
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
       items: computed(() => store.getters['Files/activeFiles'])
     })
+
     return {
       paginatedResources,
       paginationPages,
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index ac0e278770c..e008053e547 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -94,12 +94,11 @@ export default {
     const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
     const paginationPageQuery = useRouteQuery('page', '1')
-    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
     const { items: paginatedResources, total: paginationPages } = usePagination({
       page: paginationPage,
-      perPage: computed(() =>
-        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
-      ),
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
       items: computed(() => store.getters['Files/activeFiles'])
     })
 
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index ef834bc92e1..47a7d0c3813 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -124,12 +124,11 @@ export default {
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
     const paginationPageQuery = useRouteQuery('page', '1')
-    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
     const { items: paginatedResources, total: paginationPages } = usePagination({
       page: paginationPage,
-      perPage: computed(() =>
-        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
-      ),
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
       items: computed(() => store.getters['Files/activeFiles'])
     })
 
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index a1a63021636..0c62e3f7067 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -125,12 +125,11 @@ export default {
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
     const paginationPageQuery = useRouteQuery('page', '1')
-    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
     const { items: paginatedResources, total: paginationPages } = usePagination({
       page: paginationPage,
-      perPage: computed(() =>
-        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
-      ),
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
       items: computed(() => store.getters['Files/activeFiles'])
     })
 
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 6492caa5f79..25015f1830f 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -139,15 +139,14 @@ export default {
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
     const paginationPageQuery = useRouteQuery('page', '1')
-    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
-
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
     const { items: paginatedResources, total: paginationPages } = usePagination({
       page: paginationPage,
-      perPage: computed(() =>
-        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
-      ),
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
       items: computed(() => store.getters['Files/activeFiles'])
     })
+
     useMutationSubscription(['Files/UPSERT_RESOURCE'], async ({ payload }) => {
       await nextTick()
       fileList.accentuateItem(payload.id)
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index e3e0676efd0..1f3ffbc3224 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -87,12 +87,11 @@ export default {
     const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
     const paginationPageQuery = useRouteQuery('page', '1')
-    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
     const { items: paginatedResources, total: paginationPages } = usePagination({
       page: paginationPage,
-      perPage: computed(() =>
-        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
-      ),
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
       items: computed(() => store.getters['Files/activeFiles'])
     })
 
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index 7def2109e28..d71c65ec9c5 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -89,12 +89,11 @@ export default {
     const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
     const paginationPageQuery = useRouteQuery('page', '1')
-    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
     const { items: paginatedResources, total: paginationPages } = usePagination({
       page: paginationPage,
-      perPage: computed(() =>
-        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
-      ),
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
       items: computed(() => store.getters['Files/activeFiles'])
     })
 
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index bf24f984b8e..15320158dcd 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -82,14 +82,14 @@ export default {
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
     const paginationPageQuery = useRouteQuery('page', '1')
-    const paginationPage = computed(() => parseInt(`${paginationPageQuery.value}`))
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
     const { items: paginatedResources, total: paginationPages } = usePagination({
       page: paginationPage,
-      perPage: computed(() =>
-        parseInt(useRouteQuery('items-per-page', paginationDefaults.perPage.value).value)
-      ),
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
       items: computed(() => store.getters['Files/activeFiles'])
     })
+
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
 

From 27f7e5ba245c4966676b6bc5eb77dbf0e6a1b236 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 29 Nov 2021 13:06:14 +0100
Subject: [PATCH 3/4] skip flaky oc10 test

---
 tests/acceptance/features/webUIFilesActionMenu/versions.feature | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/acceptance/features/webUIFilesActionMenu/versions.feature b/tests/acceptance/features/webUIFilesActionMenu/versions.feature
index 1a38f34b9e0..3e392b973d3 100644
--- a/tests/acceptance/features/webUIFilesActionMenu/versions.feature
+++ b/tests/acceptance/features/webUIFilesActionMenu/versions.feature
@@ -11,7 +11,7 @@ Feature: Versions of a file
       | user0    |
       | Alice    |
 
-  @disablePreviews
+  @disablePreviews @skipOnOC10 @issue-5853
   Scenario: upload new file with same name to see if different versions are shown
     Given user "user0" has logged in using the webUI
     And user "user0" has uploaded file "lorem.txt" to "lorem.txt"

From aac56f185d73a26cac37e9908b9d52a04b05ace3 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 29 Nov 2021 18:26:37 +0100
Subject: [PATCH 4/4] bring back shared pagination component and refactor it to
 use DDAU via props instead of store

---
 .../src/components/FilesList/Pagination.vue   | 25 +++++
 .../src/components/Search/List.vue            | 12 +--
 .../web-app-files/src/views/Favorites.vue     | 11 +--
 .../src/views/LocationPicker.vue              | 13 +--
 packages/web-app-files/src/views/Personal.vue | 11 +--
 .../web-app-files/src/views/PublicFiles.vue   | 11 +--
 .../web-app-files/src/views/SharedViaLink.vue | 12 +--
 .../src/views/SharedWithOthers.vue            | 12 +--
 packages/web-app-files/src/views/Trashbin.vue | 12 +--
 .../components/FilesList/Pagination.spec.js   | 93 +++++++++++++++++++
 10 files changed, 143 insertions(+), 69 deletions(-)
 create mode 100644 packages/web-app-files/src/components/FilesList/Pagination.vue
 create mode 100644 packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js

diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
new file mode 100644
index 00000000000..c9bfb5c1ac0
--- /dev/null
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -0,0 +1,25 @@
+<template>
+  <oc-pagination
+    v-if="pages > 1"
+    :pages="pages"
+    :current-page="currentPage"
+    :max-displayed="3"
+    :current-route="$route"
+    class="files-pagination uk-flex uk-flex-center oc-my-s"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    pages: {
+      type: Number,
+      required: true
+    },
+    currentPage: {
+      type: Number,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 07804f31b52..aebc6a57c13 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -22,14 +22,7 @@
       @rowMounted="rowMounted"
     >
       <template #footer>
-        <oc-pagination
-          v-if="paginationPages > 1"
-          :pages="paginationPages"
-          :current-page="paginationPage"
-          :max-displayed="3"
-          :current-route="$route"
-          class="files-pagination uk-flex uk-flex-center oc-my-s"
-        />
+        <pagination :pages="paginationPages" :current-page="paginationPage" />
         <list-info
           v-if="paginatedResources.length > 0"
           class="uk-width-1-1 oc-my-s"
@@ -51,6 +44,7 @@ import debounce from 'lodash-es/debounce'
 import { mapMutations, mapGetters, mapActions } from 'vuex'
 import { computed } from '@vue/composition-api'
 import ListInfo from '../FilesList/ListInfo.vue'
+import Pagination from '../FilesList/Pagination.vue'
 import MixinFileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
 import MixinFilesListScrolling from '../../mixins/filesListScrolling'
@@ -58,7 +52,7 @@ import MixinFilesListScrolling from '../../mixins/filesListScrolling'
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListInfo, NoContentMessage },
+  components: { ListInfo, Pagination, NoContentMessage },
   mixins: [MixinFileActions, MixinFilesListFilter, MixinFilesListScrolling],
   props: {
     searchResults: {
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index e008053e547..e158b9fabd6 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -28,14 +28,7 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="paginationPages > 1"
-            :pages="paginationPages"
-            :current-page="paginationPage"
-            :max-displayed="3"
-            :current-route="$route"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
             v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -73,6 +66,7 @@ import QuickActions from '../components/FilesList/QuickActions.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 
@@ -82,6 +76,7 @@ export default {
   components: {
     QuickActions,
     ListLoader,
+    Pagination,
     NoContentMessage,
     ListInfo,
     ContextActions
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 47a7d0c3813..d003d735460 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -56,14 +56,7 @@
             :header-position="fileListHeaderY"
           >
             <template #footer>
-              <oc-pagination
-                v-if="paginationPages > 1"
-                :pages="paginationPages"
-                :current-page="paginationPage"
-                :max-displayed="3"
-                :current-route="$route"
-                class="files-pagination uk-flex uk-flex-center oc-my-s"
-              />
+              <pagination :pages="paginationPages" :current-page="paginationPage" />
               <list-info
                 v-if="paginatedResources.length > 0"
                 class="uk-width-1-1 oc-my-s"
@@ -101,6 +94,7 @@ import { useTask } from 'vue-concurrency'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 
 export default {
@@ -113,7 +107,8 @@ export default {
   components: {
     NoContentMessage,
     ListLoader,
-    ListInfo
+    ListInfo,
+    Pagination
   },
 
   mixins: [MixinsGeneral, MixinRoutes, MixinFilesListFilter],
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 0c62e3f7067..4eee58cd832 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -43,14 +43,7 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="paginationPages > 1"
-            :pages="paginationPages"
-            :current-page="paginationPage"
-            :max-displayed="3"
-            :current-route="$route"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
             v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -93,6 +86,7 @@ import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 import { basename, join } from 'path'
@@ -109,6 +103,7 @@ export default {
     NoContentMessage,
     NotFoundMessage,
     ListInfo,
+    Pagination,
     ContextActions
   },
 
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 25015f1830f..fc5d0b21eaa 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -33,14 +33,7 @@
           <context-actions v-if="isResourceInSelection(resource)" :item="resource" />
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="paginationPages > 1"
-            :pages="paginationPages"
-            :current-page="paginationPage"
-            :max-displayed="3"
-            :current-route="$route"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
             v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -83,6 +76,7 @@ import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 
@@ -125,6 +119,7 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: {
     ListInfo,
+    Pagination,
     ListLoader,
     NoContentMessage,
     NotFoundMessage,
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index 1f3ffbc3224..15572a0fc51 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -29,14 +29,7 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="paginationPages > 1"
-            :pages="paginationPages"
-            :current-page="paginationPage"
-            :max-displayed="3"
-            :current-route="$route"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
             v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -73,12 +66,13 @@ import { useTask } from 'vue-concurrency'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo, ContextActions },
+  components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
 
   mixins: [FileActions, MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index d71c65ec9c5..d7bf31e42f2 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -31,14 +31,7 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="paginationPages > 1"
-            :pages="paginationPages"
-            :current-page="paginationPage"
-            :max-displayed="3"
-            :current-route="$route"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
             v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -75,12 +68,13 @@ import { useTask } from 'vue-concurrency'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo, ContextActions },
+  components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
 
   mixins: [FileActions, MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 15320158dcd..d9fef0d1bff 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -28,14 +28,7 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <oc-pagination
-            v-if="paginationPages > 1"
-            :pages="paginationPages"
-            :current-page="paginationPage"
-            :max-displayed="3"
-            :current-route="$route"
-            class="files-pagination uk-flex uk-flex-center oc-my-s"
-          />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
             v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
@@ -68,11 +61,12 @@ import { useTask } from 'vue-concurrency'
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
+import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 
 export default {
-  components: { ListLoader, NoContentMessage, ListInfo, ContextActions },
+  components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
 
   mixins: [MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
diff --git a/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js b/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
new file mode 100644
index 00000000000..8181e033afd
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
@@ -0,0 +1,93 @@
+import _ from 'lodash'
+import DesignSystem from 'owncloud-design-system'
+import Pagination from '@files/src/components/FilesList/Pagination.vue'
+import {
+  createLocalVue as OGCreateLocalVue,
+  mount,
+  RouterLinkStub,
+  shallowMount
+} from '@vue/test-utils'
+
+const filesPersonalRoute = { name: 'files-personal', path: '/files/home' }
+
+const selectors = {
+  filesPagination: '.files-pagination'
+}
+
+const createLocalVue = () => {
+  const localVue = OGCreateLocalVue()
+  localVue.use(DesignSystem)
+  localVue.prototype.$gettextInterpolate = jest.fn()
+
+  return localVue
+}
+
+const getWrapper = (propsData = {}) => {
+  return shallowMount(Pagination, {
+    localVue: createLocalVue(),
+    stubs: {
+      'oc-pagination': true
+    },
+    propsData: _.merge({ currentPage: 1, pages: 10 }, propsData),
+    mocks: {
+      $route: filesPersonalRoute
+    }
+  })
+}
+
+const getMountedWrapper = (propsData = {}) => {
+  return mount(Pagination, {
+    localVue: createLocalVue(),
+    propsData: _.merge({ currentPage: 1, pages: 10 }, propsData),
+    stubs: {
+      'oc-pagination': false,
+      RouterLink: RouterLinkStub
+    },
+    mocks: {
+      $route: filesPersonalRoute
+    }
+  })
+}
+
+describe('Pagination', () => {
+  describe('when amount of pages is', () => {
+    describe('less than or equals one', () => {
+      it.each([-1, 0, 1])('should not show wrapper', (pages) => {
+        const wrapper = getWrapper({ currentPage: 0, pages })
+
+        expect(wrapper.find(selectors.filesPagination).exists()).toBeFalsy()
+      })
+    })
+
+    describe('greater than one', () => {
+      const wrapper = getWrapper({ currentPage: 1, pages: 2 })
+
+      it('should show wrapper', () => {
+        const paginationEl = wrapper.find('.files-pagination')
+
+        expect(paginationEl.exists()).toBeTruthy()
+        expect(paginationEl.attributes().pages).toBe('2')
+      })
+
+      it('should set provided current page', () => {
+        const paginationEl = wrapper.find(selectors.filesPagination)
+        console.log(wrapper.html())
+        expect(paginationEl.attributes().currentpage).toBe('1')
+      })
+    })
+  })
+
+  describe('current route', () => {
+    it('should use provided route to render pages', () => {
+      const wrapper = getMountedWrapper()
+      const currentRoute = wrapper.vm.$route
+      const links = wrapper.findAllComponents(RouterLinkStub)
+
+      // three links (route to prev, next and last page)
+      expect(links.length).toBe(3)
+      expect(links.at(0).props().to.name).toBe(currentRoute.name)
+      expect(links.at(1).props().to.name).toBe(currentRoute.name)
+      expect(links.at(2).props().to.name).toBe(currentRoute.name)
+    })
+  })
+})