Merge pull request 'Integrating InfiniteScroll to the Discovery view' (#39) from discover-infinite-scroll into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/39

src/views/DiscoverView.vue

@@ -30,7 +30,10 @@
         <li>
           <a
             href="#"
-            @click="searchLocal()"
+            @click="
+              projects = [];
+              searchLocal();
+            "
             v-bind:class="computedLocalTabClassNames()"
           >
             Nearby
@@ -44,7 +47,10 @@
           <a
             href="#"
             v-bind:class="computedRemoteTabClassNames()"
-            @click="search()"
+            @click="
+              projects = [];
+              search();
+            "
           >
             Remote
             <span
@@ -65,7 +71,8 @@
     </div>
 
     <!-- Results List -->
-    <ul v-if="projects.length > 0">
+    <InfiniteScroll @reached-bottom="loadMoreData">
+      <ul>
         <li
           class="border-b border-slate-300"
           v-for="project in projects"
@@ -92,7 +99,7 @@
           </a>
         </li>
       </ul>
-    <p v-else>No projects found yet.</p>
+    </InfiniteScroll>
     <AlertMessage
       :alertTitle="alertTitle"
       :alertMessage="alertMessage"
@@ -108,9 +115,10 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
+import InfiniteScroll from "@/components/InfiniteScroll";
 
 @Component({
-  components: { AlertMessage, QuickNav },
+  components: { AlertMessage, QuickNav, InfiniteScroll },
 })
 export default class DiscoverView extends Vue {
   activeDid = "";
@@ -155,11 +163,16 @@ export default class DiscoverView extends Vue {
     return headers;
   }
 
-  public async search() {
+  public async search(beforeId?: string) {
     const claimContents =
       "claimContents=" + encodeURIComponent(this.searchTerms);
     const claimType = "claimType=PlanAction";
-    const queryParams = [claimContents, claimType].join("&");
+    let queryParams = [claimContents, claimType].join("&");
+
+    console.log(beforeId);
+    if (beforeId) {
+      queryParams = queryParams + `beforeId=${beforeId}`;
+    }
 
     this.isRemoteActive = true;
     this.isLocalActive = false;
@@ -181,8 +194,13 @@ export default class DiscoverView extends Vue {
 
       const results = await response.json();
 
-      if (results.data) {
-        this.projects = results.data;
+      const plans: ProjectData[] = results.data;
+      if (plans) {
+        for (const plan of plans) {
+          const { name, description, handleId = plan.fullIri, rowid } = plan;
+          console.log("here");
+          this.projects.push({ name, description, handleId, rowid });
+        }
         this.remoteCount = this.projects.length;
       } else {
         throw JSON.stringify(results);
@@ -197,10 +215,10 @@ export default class DiscoverView extends Vue {
     }
   }
 
-  public async searchLocal() {
+  public async searchLocal(beforeId?: string) {
     const claimContents =
       "claimContents=" + encodeURIComponent(this.searchTerms);
-    const queryParams = [
+    let queryParams = [
       claimContents,
       "minLocLat=40.901000",
       "maxLocLat=40.904000",
@@ -208,6 +226,10 @@ export default class DiscoverView extends Vue {
       "eastLocLon=-111.909000",
     ].join("&");
 
+    if (beforeId) {
+      queryParams = queryParams + `beforeId=${beforeId}`;
+    }
+
     try {
       this.isLoading = true;
       this.isLocalActive = true;
@@ -227,7 +249,17 @@ export default class DiscoverView extends Vue {
       const results = await response.json();
 
       if (results.data) {
+        if (beforeId) {
+          const plans: ProjectData[] = results.data;
+          for (const plan of plans) {
+            const { name, description, handleId = plan.fullIri, rowid } = plan;
+            if (beforeId !== plan["rowid"]) {
+              this.projects.push({ name, description, handleId, rowid });
+            }
+          }
+        } else {
           this.projects = results.data;
+        }
         this.localCount = this.projects.length;
       } else {
         throw JSON.stringify(results);
@@ -242,6 +274,23 @@ export default class DiscoverView extends Vue {
     }
   }
 
+  /**
+   * Data loader used by infinite scroller
+   * @param payload is the flag from the InfiniteScroll indicating if it should load
+   **/
+  async loadMoreData(payload: boolean) {
+    if (this.projects.length > 0 && payload) {
+      const latestProject = this.projects[this.projects.length - 1];
+      console.log("rowid", latestProject, payload);
+      console.log(Object.keys(latestProject));
+      if (this.isLocalActive) {
+        this.searchLocal(latestProject["rowid"]);
+      } else if (this.isRemoteActive) {
+        this.search(latestProject["rowid"]);
+      }
+    }
+  }
+
   /**
    * Handle clicking on a project entry found in the list
    * @param id of the project