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,34 +71,35 @@
     </div>
 
     <!-- Results List -->
-    <ul v-if="projects.length > 0">
-      <li
-        class="border-b border-slate-300"
-        v-for="project in projects"
-        :key="project.handleId"
-      >
-        <a
-          @click="onClickLoadProject(project.handleId)"
-          class="block py-4 flex gap-4"
+    <InfiniteScroll @reached-bottom="loadMoreData">
+      <ul>
+        <li
+          class="border-b border-slate-300"
+          v-for="project in projects"
+          :key="project.handleId"
         >
-          <div class="w-12">
-            <img
-              src="https://picsum.photos/200/200?random=1"
-              class="w-full rounded"
-            />
-          </div>
+          <a
+            @click="onClickLoadProject(project.handleId)"
+            class="block py-4 flex gap-4"
+          >
+            <div class="w-12">
+              <img
+                src="https://picsum.photos/200/200?random=1"
+                class="w-full rounded"
+              />
+            </div>
 
-          <div class="grow">
-            <h2 class="text-base font-semibold">Canyon cleanup</h2>
-            <div class="text-sm">
-              <fa icon="user" class="fa-fw text-slate-400"></fa>
-              {{ project.name }}
+            <div class="grow">
+              <h2 class="text-base font-semibold">Canyon cleanup</h2>
+              <div class="text-sm">
+                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                {{ project.name }}
+              </div>
             </div>
-          </div>
-        </a>
-      </li>
-    </ul>
-    <p v-else>No projects found yet.</p>
+          </a>
+        </li>
+      </ul>
+    </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) {
-        this.projects = 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