From 29de1c07319e7141b6b68454a0cb447c6df26dc0 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 14 Dec 2020 12:45:09 +0530
Subject: [PATCH] Add infinite scroll search pages.

---
 src/components/SearchResults.vue | 35 +++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index ef2b7918..b3198ef5 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -8,7 +8,7 @@
             style="background: #0b0e0f"
             class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
             v-bind:key="result.url"
-            v-for="result in results"
+            v-for="result in results.items"
         >
             <div class="uk-text-secondary" style="background: #0b0e0f">
                 <router-link
@@ -45,6 +45,10 @@ export default {
     },
     mounted() {
         this.updateResults();
+        window.addEventListener("scroll", this.handleScroll);
+    },
+    unmounted() {
+        window.removeEventListener("scroll", this.handleScroll);
     },
     watch: {
         "$route.query.search_query": function() {
@@ -62,9 +66,38 @@ export default {
             ).json();
         },
         async updateResults() {
+            document.title = this.$route.query.search_query + " - Piped";
             this.results = this.fetchResults().then(
                 json => (this.results = json)
             );
+        },
+        handleScroll() {
+            if (this.loading || !this.results || !this.results.nextpage) return;
+            if (
+                window.innerHeight + window.scrollY >=
+                document.body.offsetHeight - window.innerHeight
+            ) {
+                this.loading = true;
+                fetch(
+                    Constants.BASE_URL +
+                        "/nextpage/search" +
+                        "?url=" +
+                        encodeURIComponent(this.results.nextpage) +
+                        "&id=" +
+                        encodeURIComponent(this.results.id) +
+                        "&q=" +
+                        this.$route.params.search_query
+                )
+                    .then(body => body.json())
+                    .then(json => {
+                        this.results.nextpage = json.nextpage;
+                        this.results.id = json.id;
+                        this.loading = false;
+                        json.items.map(stream =>
+                            this.results.items.push(stream)
+                        );
+                    });
+            }
         }
     }
 };