paginator refactoring and implementation into the routes

2026-04-05 18:23:48 +00:00 · 2022-05-24 18:19:34 +02:00
parent 31218240ae
commit b9975de700
61 changed files with 1215 additions and 829 deletions
--- a/resources/js/components/EntriesView/FileBrowser.vue
+++ b/resources/js/components/EntriesView/FileBrowser.vue
@@ -41,7 +41,7 @@
 import ItemHandler from './ItemHandler'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
-import Spinner from './Spinner'
+import Spinner from "../UI/Others/Spinner";
 import { debounce } from 'lodash'

 export default {
--- a/resources/js/components/Mobile/MobileNavigation.vue
+++ b/resources/js/components/Mobile/MobileNavigation.vue
@@ -204,7 +204,7 @@ export default {
        goToFiles() {
            if (this.$route.name !== 'Files') this.$router.push({ name: 'Files' })

-            this.$store.dispatch('getFolder')
+            this.$store.dispatch('getFolder', {page: 1})
        },
        logOut() {
            this.$store.dispatch('logOut')
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -352,17 +352,17 @@ const FunctionHelpers = {

        Vue.prototype.$getDataByLocation = async function (page) {
            let routes = {
-                RequestUpload: ['getUploadRequestFolder', {page:page, id:router.currentRoute.params.id || undefined} ],
-                Public: ['getSharedFolder', {page:page, id:router.currentRoute.params.id || undefined}],
-                Files: ['getFolder', {page:page, id:router.currentRoute.params.id || undefined}],
+                RequestUpload: ['getUploadRequestFolder', {page: page, id: router.currentRoute.params.id || undefined}],
+                Public: ['getSharedFolder', {page: page, id: router.currentRoute.params.id || undefined}],
+                Files: ['getFolder', {page: page, id: router.currentRoute.params.id || undefined}],
                RecentUploads: ['getRecentUploads', page],
                MySharedItems: ['getMySharedItems', page],
-                Trash: ['getTrash', {page:page , id:router.currentRoute.params.id || undefined}],
-                TeamFolders: ['getTeamFolder',{page:page, id:router.currentRoute.params.id || undefined}],
-                SharedWithMe: ['getSharedWithMeFolder',{page:page, id:router.currentRoute.params.id || undefined}],
+                Trash: ['getTrash', {page: page, id: router.currentRoute.params.id || undefined}],
+                TeamFolders: ['getTeamFolder', {page: page, id: router.currentRoute.params.id || undefined}],
+                SharedWithMe: ['getSharedWithMeFolder', {page: page, id: router.currentRoute.params.id || undefined}],
            }

-            await store.dispatch(...routes[router.currentRoute.name])
+            return await store.dispatch(...routes[router.currentRoute.name])
        }

        Vue.prototype.$getPaymentLogo = function (driver) {
--- a/resources/js/store/modules/fileBrowser.js
+++ b/resources/js/store/modules/fileBrowser.js
@@ -18,19 +18,16 @@ const defaultState = {
 const actions = {
    getFolder: ({ commit, getters },{page, id}) => {
        return new Promise ((resolve, reject) => {
-            if(! page)
-                commit('LOADING_STATE', { loading: true, data: [] })
+            if(page === 1)
+                commit('START_LOADING_VIEW')

            axios
-                .get(`${getters.api}/browse/folders/${id || 'all'}${getters.sorting.URI}&page=${currentPage}`)
+                .get(`${getters.api}/browse/folders/${id || 'all'}${getters.sorting.URI}&page=${page}`)
                .then((response) => {
-                    commit('SET_PAGINATE', response.data.meta.paginate)
-
-                    commit('LOADING_STATE', {
-                        loading: false,
-                        data: response.data.data,
-                    })
                    commit('SET_CURRENT_FOLDER', response.data.meta.root)
+                    commit('SET_PAGINATOR', response.data.meta.paginate)
+                    commit('STOP_LOADING_VIEW')
+                    commit('ADD_NEW_ITEMS', response.data.data)

                    events.$emit('scrollTop')

@@ -48,62 +45,74 @@ const actions = {
                            message: i18n.t('popup_error.message'),
                        })
                    }
+
+                    reject(error);
                })
        })
    },
-    getRecentUploads: ({ commit, getters }) => {
-        commit('LOADING_STATE', { loading: true, data: [] })
+    getRecentUploads: ({commit, getters}, page) => {
+        return new Promise((resolve, reject) => {
+            if (page === 1)
+                commit('START_LOADING_VIEW')

-        axios
-            .get(getters.api + '/browse/latest')
-            .then((response) => {
-                commit('LOADING_STATE', {
-                    loading: false,
-                    data: response.data.files.data,
+            axios
+                .get(`${getters.api}/browse/latest?page=${page}`)
+                .then((response) => {
+                    commit('SET_PAGINATOR', response.data.meta.paginate)
+                    commit('SET_CURRENT_FOLDER', undefined)
+                    commit('STOP_LOADING_VIEW')
+                    commit('ADD_NEW_ITEMS', response.data.data)
+
+                    events.$emit('scrollTop')
+
+                    resolve(response)
                })
-                commit('SET_CURRENT_FOLDER', undefined)
-
-                events.$emit('scrollTop')
-            })
-            .catch(() => Vue.prototype.$isSomethingWrong())
+                .catch(() => Vue.prototype.$isSomethingWrong())
+        })
    },
-    getMySharedItems: ({ commit, getters }) => {
-        commit('LOADING_STATE', { loading: true, data: [] })
+    getMySharedItems: ({ commit, getters }, page) => {
+        return new Promise((resolve, reject) => {
+            if (page === 1)
+                commit('START_LOADING_VIEW')

-        axios
-            .get(getters.api + '/browse/share' + getters.sorting.URI)
-            .then((response) => {
-                let folders = response.data.folders.data
-                let files = response.data.files.data
+            axios
+                .get(`${getters.api}/browse/share${getters.sorting.URI}&page=${page}`)
+                .then((response) => {
+                    commit('SET_PAGINATOR', response.data.meta.paginate)
+                    commit('SET_CURRENT_FOLDER', undefined)
+                    commit('STOP_LOADING_VIEW')
+                    commit('ADD_NEW_ITEMS', response.data.data)

-                commit('LOADING_STATE', {
-                    loading: false,
-                    data: folders.concat(files),
+                    events.$emit('scrollTop')
+
+                    resolve(response)
                })
-                commit('SET_CURRENT_FOLDER', undefined)
-
-                events.$emit('scrollTop')
-            })
-            .catch(() => Vue.prototype.$isSomethingWrong())
+                .catch(() => Vue.prototype.$isSomethingWrong())
+        })
    },
-    getTrash: ({ commit, getters }, id) => {
-        commit('LOADING_STATE', { loading: true, data: [] })
+    getTrash: ({ commit, getters }, {page, id}) => {
+        return new Promise((resolve, reject) => {
+            if (page === 1)
+                commit('START_LOADING_VIEW')

-        axios
-            .get(`${getters.api}/browse/trash/${id || 'all'}${getters.sorting.URI}`)
-            .then((response) => {
-                let folders = response.data.folders.data
-                let files = response.data.files.data
+            axios
+                .get(`${getters.api}/browse/trash/${id || 'all'}${getters.sorting.URI}&page=${page}`)
+                .then((response) => {
+                    commit('SET_PAGINATOR', response.data.meta.paginate)
+                    commit('SET_CURRENT_FOLDER', response.data.meta.root)
+                    commit('STOP_LOADING_VIEW')
+                    commit('ADD_NEW_ITEMS', response.data.data)

-                commit('LOADING_STATE', {
-                    loading: false,
-                    data: folders.concat(files),
+                    events.$emit('scrollTop')
+
+                    resolve(response)
                })
-                commit('SET_CURRENT_FOLDER', response.data.root)
+                .catch((error) => {
+                    Vue.prototype.$isSomethingWrong()

-                events.$emit('scrollTop')
-            })
-            .catch(() => Vue.prototype.$isSomethingWrong())
+                    reject(error);
+                })
+        })
    },
    getFolderTree: ({ commit, getters }) => {
        return new Promise((resolve, reject) => {
@@ -130,16 +139,15 @@ const actions = {
 }

 const mutations = {
-    SET_PAGINATE(state, payload) {
+    SET_PAGINATOR(state, payload) {
        state.paginate = payload
    },
-    LOADING_STATE(state, payload) {
-        if(payload.data.length === 0) {
-            state.entries = []
-        } else {
-            state.entries.push(...payload.data)
-        }
-        state.isLoading = payload.loading
+    START_LOADING_VIEW(state) {
+        state.entries = []
+        state.isLoading = true
+    },
+    STOP_LOADING_VIEW(state) {
+        state.isLoading = false
    },
    SET_CURRENT_FOLDER(state, folder) {
        state.currentFolder = folder
--- a/resources/js/store/modules/fileFunctions.js
+++ b/resources/js/store/modules/fileFunctions.js
@@ -342,14 +342,14 @@ const actions = {
    },
    emptyTrash: ({ commit, getters }) => {
        // Clear file browser
-        commit('LOADING_STATE', { loading: true, data: [] })
+        commit('START_LOADING_VIEW')

        axios
            .post(getters.api + '/trash/dump', {
                _method: 'delete',
            })
            .then(() => {
-                commit('LOADING_STATE', { loading: false, data: [] })
+                commit('STOP_LOADING_VIEW')
                events.$emit('scrollTop')

                commit('CLIPBOARD_CLEAR')
@@ -363,7 +363,7 @@ const actions = {
            })
            .then(() => {
                if (router.currentRoute.name === 'Trash') {
-                    commit('LOADING_STATE', { loading: false, data: [] })
+                    commit('STOP_LOADING_VIEW')
                }

                events.$emit('toaster', {
--- a/resources/js/store/modules/sharing.js
+++ b/resources/js/store/modules/sharing.js
@@ -20,21 +20,19 @@ const defaultState = {
    sharedFile: undefined,
 }
 const actions = {
-    getSharedFolder: ({ commit, getters }, id) => {
-        commit('LOADING_STATE', { loading: true, data: [] })
-
+    getSharedFolder: ({ commit, getters }, {page, id}) => {
        return new Promise((resolve, reject) => {
-            axios
-                .get(`/api/sharing/folders/${id}/${router.currentRoute.params.token}${getters.sorting.URI}`)
-                .then((response) => {
-                    let folders = response.data.folders.data
-                    let files = response.data.files.data

-                    commit('LOADING_STATE', {
-                        loading: false,
-                        data: folders.concat(files),
-                    })
-                    commit('SET_CURRENT_FOLDER', response.data.root)
+            if(page === 1)
+                commit('START_LOADING_VIEW')
+
+            axios
+                .get(`/api/sharing/folders/${id}/${router.currentRoute.params.token}${getters.sorting.URI}&page=${page}`)
+                .then((response) => {
+                    commit('SET_CURRENT_FOLDER', response.data.meta.root)
+                    commit('SET_PAGINATOR', response.data.meta.paginate)
+                    commit('STOP_LOADING_VIEW')
+                    commit('ADD_NEW_ITEMS', response.data.data)

                    events.$emit('scrollTop')

--- a/resources/js/store/modules/teams.js
+++ b/resources/js/store/modules/teams.js
@@ -1,129 +1,134 @@
 import router from '../../router'
-import { events } from '../../bus'
+import {events} from '../../bus'
 import i18n from '../../i18n'
 import axios from 'axios'
 import Vue from 'vue'

 const defaultState = {
-    currentTeamFolder: undefined,
+	currentTeamFolder: undefined,
 }

 const actions = {
-    getTeamFolder: ({ commit, getters }, id) => {
-        commit('LOADING_STATE', { loading: true, data: [] })
+	getTeamFolder: ({commit, getters}, {page, id}) => {
+		return new Promise((resolve, reject) => {
+			if (page === 1)
+				commit('START_LOADING_VIEW')

-        if (typeof id === 'undefined') {
-            commit('SET_CURRENT_TEAM_FOLDER', null)
-        }
+			if (typeof id === 'undefined')
+				commit('SET_CURRENT_TEAM_FOLDER', null)

-        axios
-            .get(`${getters.api}/teams/folders/${id || 'all'}${getters.sorting.URI}`)
-            .then((response) => {
-                let folders = response.data.folders.data
-                let files = response.data.files.data
+			axios
+				.get(`${getters.api}/teams/folders/${id || 'all'}${getters.sorting.URI}&page=${page}`)
+				.then((response) => {
+					commit('SET_CURRENT_FOLDER', response.data.meta.root)
+					commit('SET_PAGINATOR', response.data.meta.paginate)
+					commit('STOP_LOADING_VIEW')
+					commit('ADD_NEW_ITEMS', response.data.data)

-                commit('LOADING_STATE', {
-                    loading: false,
-                    data: folders.concat(files),
-                })
-                commit('SET_CURRENT_FOLDER', response.data.root)
+					if (
+						!getters.currentTeamFolder ||
+						getters.currentTeamFolder.data.id !== response.data.meta.teamFolder.data.id
+					) {
+						commit('SET_CURRENT_TEAM_FOLDER', response.data.meta.teamFolder)
+					}

-                if (
-                    !getters.currentTeamFolder ||
-                    getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id
-                ) {
-                    commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
-                }
+					events.$emit('scrollTop')

-                events.$emit('scrollTop')
-            })
-            .catch((error) => {
-                // Redirect if unauthenticated
-                if ([401, 403].includes(error.response.status)) {
-                    commit('SET_AUTHORIZED', false)
-                    router.push({ name: 'SignIn' })
-                } else {
-                    // Show error message
-                    events.$emit('alert:open', {
-                        title: i18n.t('popup_error.title'),
-                        message: i18n.t('popup_error.message'),
-                    })
-                }
-            })
-    },
-    getSharedWithMeFolder: ({ commit, getters }, id) => {
-        commit('LOADING_STATE', { loading: true, data: [] })
+					resolve(response)
+				})
+				.catch((error) => {
+					// Redirect if unauthenticated
+					if ([401, 403].includes(error.response.status)) {
+						commit('SET_AUTHORIZED', false)
+						router.push({name: 'SignIn'})
+					} else {
+						// Show error message
+						events.$emit('alert:open', {
+							title: i18n.t('popup_error.title'),
+							message: i18n.t('popup_error.message'),
+						})
+					}

-        if (typeof id === 'undefined') {
-            commit('SET_CURRENT_TEAM_FOLDER', null)
-        }
+					reject(error)
+				})
+		})
+	},
+	getSharedWithMeFolder: ({commit, getters}, {page, id}) => {
+		return new Promise((resolve, reject) => {
+			if (page === 1)
+				commit('START_LOADING_VIEW')

-        axios
-            .get(`${getters.api}/teams/shared-with-me/${id || 'all'}${getters.sorting.URI}`)
-            .then((response) => {
-                let folders = response.data.folders.data
-                let files = response.data.files.data
+			if (typeof id === 'undefined') {
+				commit('SET_CURRENT_TEAM_FOLDER', null)
+			}

-                commit('LOADING_STATE', {
-                    loading: false,
-                    data: folders.concat(files),
-                })
-                commit('SET_CURRENT_FOLDER', response.data.root)
+			axios
+				.get(`${getters.api}/teams/shared-with-me/${id || 'all'}${getters.sorting.URI}&page=${page}`)
+				.then((response) => {
+					commit('SET_CURRENT_FOLDER', response.data.meta.root)
+					commit('SET_PAGINATOR', response.data.meta.paginate)
+					commit('STOP_LOADING_VIEW')
+					commit('ADD_NEW_ITEMS', response.data.data)

-                if (
-                    !getters.currentTeamFolder ||
-                    getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id
-                ) {
-                    commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
-                }
+					if (
+						!getters.currentTeamFolder ||
+						getters.currentTeamFolder.data.id !== response.data.meta.teamFolder.data.id
+					) {
+						commit('SET_CURRENT_TEAM_FOLDER', response.data.meta.teamFolder)
+					}

-                events.$emit('scrollTop')
-            })
-            .catch((error) => {
-                // Redirect if unauthenticated
-                if ([401, 403].includes(error.response.status)) {
-                    commit('SET_AUTHORIZED', false)
-                    router.push({ name: 'SignIn' })
-                } else {
-                    // Show error message
-                    events.$emit('alert:open', {
-                        title: i18n.t('popup_error.title'),
-                        message: i18n.t('popup_error.message'),
-                    })
-                }
-            })
-    },
-    getTeamFolderTree: ({ commit, getters }) => {
-        return new Promise((resolve, reject) => {
-            axios
-                .get(`/api/teams/folders/${getters.currentTeamFolder.data.id}/tree${getters.sorting.URI}`)
-                .then((response) => {
-                    resolve(response)
+					events.$emit('scrollTop')

-                    commit('UPDATE_FOLDER_TREE', response.data)
-                })
-                .catch((error) => {
-                    reject(error)
+					resolve(response)
+				})
+				.catch((error) => {
+					// Redirect if unauthenticated
+					if ([401, 403].includes(error.response.status)) {
+						commit('SET_AUTHORIZED', false)
+						router.push({name: 'SignIn'})
+					} else {
+						// Show error message
+						events.$emit('alert:open', {
+							title: i18n.t('popup_error.title'),
+							message: i18n.t('popup_error.message'),
+						})
+					}

-                    Vue.prototype.$isSomethingWrong()
-                })
-        })
-    },
+					reject(error)
+				})
+		})
+	},
+	getTeamFolderTree: ({commit, getters}) => {
+		return new Promise((resolve, reject) => {
+			axios
+				.get(`/api/teams/folders/${getters.currentTeamFolder.data.id}/tree${getters.sorting.URI}`)
+				.then((response) => {
+					resolve(response)
+
+					commit('UPDATE_FOLDER_TREE', response.data)
+				})
+				.catch((error) => {
+					reject(error)
+
+					Vue.prototype.$isSomethingWrong()
+				})
+		})
+	},
 }

 const mutations = {
-    SET_CURRENT_TEAM_FOLDER(state, payload) {
-        state.currentTeamFolder = payload
-    },
+	SET_CURRENT_TEAM_FOLDER(state, payload) {
+		state.currentTeamFolder = payload
+	},
 }

 const getters = {
-    currentTeamFolder: (state) => state.currentTeamFolder,
+	currentTeamFolder: (state) => state.currentTeamFolder,
 }

 export default {
-    state: defaultState,
-    getters,
-    actions,
-    mutations,
+	state: defaultState,
+	getters,
+	actions,
+	mutations,
 }
--- a/resources/js/store/modules/uploadRequest.js
+++ b/resources/js/store/modules/uploadRequest.js
@@ -9,20 +9,16 @@ const defaultState = {

 const actions = {
    getUploadRequestFolder: ({ commit, getters }, id) => {
-        commit('LOADING_STATE', { loading: true, data: [] })
+        commit('START_LOADING_VIEW')

        return new Promise((resolve, reject) => {
            axios
                .get(`/api/file-request/${router.currentRoute.params.token}/browse/${id || 'all'}${getters.sorting.URI}`)
                .then((response) => {
-                    let folders = response.data.folders
-                    let files = response.data.files
-
-                    commit('LOADING_STATE', {
-                        loading: false,
-                        data: folders.concat(files),
-                    })
-                    commit('SET_CURRENT_FOLDER', response.data.root)
+                    commit('SET_CURRENT_FOLDER', response.data.meta.root)
+                    commit('SET_PAGINATOR', response.data.meta.paginate)
+                    commit('STOP_LOADING_VIEW')
+                    commit('ADD_NEW_ITEMS', response.data.data)

                    events.$emit('scrollTop')

@@ -43,7 +39,7 @@ const actions = {

                    // Stop loading spinner
                    if (['active', 'filled', 'expired'].includes(response.data.data.attributes.status) )
-                        commit('LOADING_STATE', { loading: false, data: [] })
+                        commit('STOP_LOADING_VIEW')

                    commit('SET_UPLOAD_REQUEST', response.data)

@@ -63,7 +59,8 @@ const actions = {
        axios
            .delete(`/api/file-request/${router.currentRoute.params.token}`)
            .then((response) => {
-                commit('LOADING_STATE', { loading: false, data: [] })
+                commit('START_LOADING_VIEW')
+                commit('STOP_LOADING_VIEW')
                commit('SET_UPLOAD_REQUEST_AS_FILLED')
            })
            .catch(() => this.$isSomethingWrong())
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -80,7 +80,7 @@ const actions = {

        let itemsToFavourites = items.map((item) => {
            if (item.data.type === 'folder') {
-                if (context.getters.user.data.relationships.favourites.data.find((folder) => folder.id === item.data.id))
+                if (context.getters.user.data.relationships.favourites.find((folder) => folder.id === item.data.id))
                    return

                return item.data.id;
@@ -89,7 +89,7 @@ const actions = {

        // Check is favorites already don't include some of pushed folders
        let favouritesWidget = items.map((item) => {
-            if (!context.getters.user.data.relationships.favourites.data.find((folder) => folder.data.id === item.id)) {
+            if (!context.getters.user.data.relationships.favourites.find((folder) => folder.data.id === item.id)) {
                return item
            }
        })
@@ -149,7 +149,7 @@ const mutations = {
    },
    ADD_TO_FAVOURITES(state, folder) {
        folder.forEach((item) => {
-            state.user.data.relationships.favourites.data.push(item)
+            state.user.data.relationships.favourites.push(item)
        })
    },
    UPDATE_FIRST_NAME(state, name) {
@@ -166,12 +166,12 @@ const mutations = {
        }
    },
    REMOVE_ITEM_FROM_FAVOURITES(state, item) {
-        state.user.data.relationships.favourites.data = state.user.data.relationships.favourites.data.filter(
+        state.user.data.relationships.favourites.data = state.user.data.relationships.favourites.filter(
            (folder) => folder.data.id !== item.data.id
        )
    },
    UPDATE_NAME_IN_FAVOURITES(state, data) {
-        state.user.data.relationships.favourites.data.find((folder) => {
+        state.user.data.relationships.favourites.find((folder) => {
            if (folder.id === data.id) {
                folder.name = data.name
            }
--- a/resources/js/views/FileView/Files.vue
+++ b/resources/js/views/FileView/Files.vue
@@ -266,7 +266,7 @@ export default {
        }
    },
    created() {
-        this.$store.dispatch('getFolder', {page:null, id:this.$route.params.id})
+        this.$store.dispatch('getFolder', {page: 1, id:this.$route.params.id})

        events.$on('context-menu:show', (event, item) => (this.item = item))
        events.$on('context-menu:current-folder', (folder) => (this.item = folder))
--- a/resources/js/views/FileView/MySharedItems.vue
+++ b/resources/js/views/FileView/MySharedItems.vue
@@ -169,7 +169,7 @@ export default {
        }
    },
    created() {
-        this.$store.dispatch('getMySharedItems')
+        this.$store.dispatch('getMySharedItems', 1)

        events.$on('context-menu:show', (event, item) => (this.item = item))
        events.$on('mobile-context-menu:show', (item) => (this.item = item))
--- a/resources/js/views/FileView/Public.vue
+++ b/resources/js/views/FileView/Public.vue
@@ -234,7 +234,7 @@ export default {
        },
    },
    created() {
-        this.$store.dispatch('getSharedFolder', {page:null, id:this.$route.params.id})
+        this.$store.dispatch('getSharedFolder', {page: 1, id: this.$route.params.id})

        events.$on('context-menu:show', (event, item) => (this.item = item))
        events.$on('mobile-context-menu:show', (item) => (this.item = item))
--- a/resources/js/views/FileView/RecentUploads.vue
+++ b/resources/js/views/FileView/RecentUploads.vue
@@ -151,7 +151,7 @@ export default {
        }
    },
    created() {
-        this.$store.dispatch('getRecentUploads')
+        this.$store.dispatch('getRecentUploads', 1)

        events.$on('context-menu:show', (event, item) => (this.item = item))
        events.$on('mobile-context-menu:show', (item) => (this.item = item))
--- a/resources/js/views/FileView/SharedWithMe.vue
+++ b/resources/js/views/FileView/SharedWithMe.vue
@@ -242,7 +242,7 @@ export default {
        },
    },
    mounted() {
-        this.$store.dispatch('getSharedWithMeFolder',{page:null, id:this.$route.params.id})
+        this.$store.dispatch('getSharedWithMeFolder',{page: 1, id:this.$route.params.id})

        events.$on('context-menu:show', (event, item) => (this.item = item))
        events.$on('mobile-context-menu:show', (item) => (this.item = item))
@@ -257,7 +257,7 @@ export default {
                        if (this.$route.params.id) {
                            this.$router.push({ name: 'SharedWithMe' })
                        } else {
-                            this.$store.dispatch('getSharedWithMeFolder',{page:null, id:undefined})
+                            this.$store.dispatch('getSharedWithMeFolder',{page: 1, id:undefined})
                        }

                        events.$emit('toaster', {
--- a/resources/js/views/FileView/TeamFolders.vue
+++ b/resources/js/views/FileView/TeamFolders.vue
@@ -293,7 +293,7 @@ export default {
        }
    },
    mounted() {
-        this.$store.dispatch('getTeamFolder', {page:null, id:this.$route.params.id})
+        this.$store.dispatch('getTeamFolder', {page: 1, id:this.$route.params.id})

        events.$on('context-menu:show', (event, item) => (this.item = item))
        events.$on('mobile-context-menu:show', (item) => (this.item = item))
--- a/resources/js/views/FileView/Trash.vue
+++ b/resources/js/views/FileView/Trash.vue
@@ -149,7 +149,7 @@ export default {
        }
    },
    created() {
-        this.$store.dispatch('getTrash', {page:null, id:this.$route.params.id})
+		this.$store.dispatch('getTrash', {page: 1, id: this.$route.params.id})

        events.$on('context-menu:show', (event, item) => (this.item = item))
        events.$on('mobile-context-menu:show', (item) => (this.item = item))