fix: scrolled search

src/components/TheContent.vue

@@ -1,10 +1,9 @@
 <template>
-	<!-- <section id="content" @scroll="handleContentScroll" ref="content"> -->
+	<section id="content" @scroll="$route.name === 'Search' ? handleContentScroll($event) : null" ref="content">
-	<section id="content">
 		<div id="container">
 			<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
 
-			<router-view v-show="!loading"></router-view>
+			<router-view v-show="!loading" :perform-scrolled-search="performScrolledSearch"></router-view>
 		</div>
 	</section>
 </template>
@@ -50,31 +49,23 @@ export default {
 		BaseLoadingPlaceholder
 	},
 	data: () => ({
-		newScrolled: null,
+		performScrolledSearch: false,
 		loading: false
 	}),
 	mounted() {
 		this.$root.$on('updateSearchLoadingState', loading => {
 			this.loading = loading
 		})
+	},
+	methods: {
+		handleContentScroll: debounce(async function () {
+			if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
+			this.performScrolledSearch = true
+
+			await this.$nextTick()
+
+			this.performScrolledSearch = false
+		}, 100)
 	}
-	// methods: {
-	// 	handleContentScroll: debounce(async function () {
-	// 		if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
-
-	// 		if (
-	// 			main_selected !== 'search_tab' ||
-	// 			['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) === -1
-	// 		) {
-	// 			return
-	// 		}
-
-	// 		this.newScrolled = window.search_selected.split('_')[0]
-
-	// 		await this.$nextTick()
-
-	// 		this.newScrolled = null
-	// 	}, 100)
-	// }
 }
 </script>

src/components/TheMainSearch.vue

@@ -145,8 +145,8 @@ export default {
 		}
 	},
 	props: {
-		scrolledSearchType: {
+		performScrolledSearch: {
-			type: String,
+			type: Boolean,
 			required: false
 		}
 	},
@@ -206,24 +206,22 @@ export default {
 		numberWithDots,
 		convertDuration,
 		search(type) {
-			console.log('search')
+			console.log('search method called')
+
 			socket.emit('search', {
 				term: this.results.query,
-				type: type,
+				type,
-				start: this.results[type + 'Tab'].next,
+				start: this.results[`${type}Tab`].next,
 				nb: 30
 			})
 		},
-		scrolledSearch(type) {
+		scrolledSearch() {
-			let currentTab = type + 'Tab'
+			if (this.currentTab.searchType === 'all') return
+
+			let currentTab = `${this.currentTab.searchType}Tab`
 
 			if (this.results[currentTab].next < this.results[currentTab].total) {
-				socket.emit('search', {
+				this.search(this.currentTab.searchType)
-					term: this.results.query,
-					type: type,
-					start: this.results[currentTab].next,
-					nb: 30
-				})
 			}
 		},
 		handleMainSearch(result) {
@@ -269,10 +267,10 @@ export default {
 		}
 	},
 	watch: {
-		scrolledSearchType(newType) {
+		performScrolledSearch(needToSearch) {
-			if (!newType) return
+			if (!needToSearch) return
 
-			this.scrolledSearch(newType)
+			this.scrolledSearch(needToSearch)
 		},
 		currentTab(newTab) {
 			if (this.isTabLoaded(newTab)) return