Display more items in the browser

Signed-off-by: marco <marcoambrosini@pm.me>

4 files changed, 51 insertions, 3 deletions

diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index 665e664e5..d2c848804 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItems.vue
@@ -52,11 +52,17 @@ export default {
 			type: Object,
 			required: true,
 		},
+
+		// Limits the amount of items displayed
+		limit: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
 		itemsToDisplay() {
-			return Object.values(this.items).reverse().slice(0, 6)
+			return this.limit ? Object.values(this.items).reverse().slice(0, 6) : Object.values(this.items).reverse()
 		},
 
 		isList() {
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
index e40d79289..31433b921 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
@@ -33,7 +33,7 @@
 					</Button>
 				</template>
 			</div>
-			<div class="shared-items-browser__content">
+			<div ref="scroller" class="shared-items-browser__content" @scroll="debounceHandleScroll">
 				<SharedItems :type="activeTab"
 					:items="sharedItems[activeTab]" />
 			</div>
@@ -46,6 +46,7 @@ import Modal from '@nextcloud/vue/dist/Components/Modal'
 import Button from '@nextcloud/vue/dist/Components/Button'
 import SharedItems from '../SharedItems.vue'
 import sharedItems from '../../../../mixins/sharedItems'
+import debounce from 'debounce'
 
 export default {
 	name: 'SharedItemsBrowser',
@@ -70,10 +71,50 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			firstItemsLoaded: {},
+			isRequestingMoreItems: {},
+		}
+	},
+
+	computed: {
+		scroller() {
+			return this.$refs.scroller
+		},
+
+		token() {
+			return this.$store.getters.getToken()
+		},
+	},
+
+	watch: {
+		activeTab(newType) {
+			if (this.firstItemsLoaded?.[newType]) {
+				this.$store.dispatch('getSharedItems', this.token, newType)
+				this.firstItemsLoaded[newType] = true
+			}
+		},
+	},
+
 	methods: {
 		handleTabClick(type) {
 			this.$emit('update:active-tab', type)
 		},
+
+		debounceHandleScroll: debounce(function() {
+			this.handleScroll()
+		}, 50),
+
+		async handleScroll() {
+			const scrollHeight = this.scroller.scrollHeight
+			const scrollTop = this.scroller.scrollTop
+			if (scrollTop / scrollHeight > 0.8 && !this.isRequestingMoreItems?.[this.activeTab]) {
+				this.isRequestingMoreItems[this.activeTab] = true
+				this.$store.dispatch('getSharedItems', this.token, this.activeTab)
+				this.isRequestingMoreItems[this.activeTab] = false
+			}
+		},
 	},
 }
 </script>
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index 68ed6cf4b..6403ecc0f 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -25,6 +25,7 @@
 			<div v-if="sharedItems[type]" :key="type">
 				<AppNavigationCaption :title="getTitle(type)" />
 				<SharedItems :type="type"
+					:limit="true"
 					:items="sharedItems[type]" />
 				<Button v-if="hasMore(sharedItems[type])"
 					type="tertiary-no-background"
diff --git a/src/store/sharedItemsStore.js b/src/store/sharedItemsStore.js
index a87b68676..86ad32bb3 100644
--- a/src/store/sharedItemsStore.js
+++ b/src/store/sharedItemsStore.js
@@ -120,7 +120,7 @@ const actions = {
 			return false
 		}
 
-		const limit = 100
+		const limit = 50
 		const lastKnownMessageId = Math.min.apply(Math, Object.keys(state.sharedItemsByConversationAndType[token][type]))
 		try {
 			const response = await getSharedItems(token, type, lastKnownMessageId, limit)