Firing properly but no data returned on extended fetch

src/components/InfiniteScroll.vue

@@ -10,40 +10,52 @@ import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
 
 @Component
 export default class InfiniteScroll extends Vue {
-  @Prop({ default: 100 })
+  @Prop({ default: 200 })
   readonly distance!: number;
   private observer!: IntersectionObserver;
-  private isInitialized = false;
+  private isInitialRender = true;
 
-  mounted() {
+  updated() {
-    this.$nextTick(() => {
+    console.log("updated()");
-      this.isInitialized = true;
+    if (!this.observer) {
-      console.log("onMounted");
       const options = {
-        root: this.$refs.scrollContainer as HTMLElement,
+        root: null,
         rootMargin: `0px 0px ${this.distance}px 0px`,
         threshold: 1.0,
       };
       this.observer = new IntersectionObserver(
-        (entries) => this.handleIntersection(entries),
+        this.handleIntersection,
         options
       );
       this.observer.observe(this.$refs.sentinel as HTMLElement);
-    });
+    }
   }
 
   beforeUnmount() {
+    if (this.observer) {
       this.observer.disconnect();
     }
+  }
 
   @Emit("reached-bottom")
   handleIntersection(entries: IntersectionObserverEntry[]) {
     console.log("handleIntersection");
-    if (!this.isInitialized) {
-      return false;
-    }
     const entry = entries[0];
-    if (entry.isIntersecting && entry.intersectionRatio > 0) {
+    if (entry.isIntersecting) {
+      const distance = entry.boundingClientRect.top - entry.rootBounds.top;
+      console.log("distance: ", distance);
+      console.log("intersectionRatio", entry.intersectionRatio);
+      const sentinelPosition = (
+        this.$refs.sentinel as HTMLElement
+      ).getBoundingClientRect();
+      // Access sentinel element's position properties
+      const sentinelTop = sentinelPosition.top;
+      console.log("sentinelTop", sentinelTop);
+      const scrollContainer = (
+        this.$refs.scrollContainer as HTMLElement
+      ).getBoundingClientRect();
+      // Access scrollContainer properties or perform any necessary actions
+      console.log("scrollContainerTop", scrollContainer);
       return true;
     }
     return false;

src/views/ProjectsView.vue

@@ -118,15 +118,29 @@ import InfiniteScroll from "@/components/InfiniteScroll";
 export default class ProjectsView extends Vue {
   apiServer = "";
   projects: { handleId: string; name: string; description: string }[] = [];
+  current: IIdentifier;
+  isDataLoaded = false;
 
   async loadMoreData(payload: boolean) {
     console.log("loadMoreData");
     console.log(payload);
     if (this.projects.length > 0) {
-      const afterId = this.projects[this.projects.length - 1]["handleId"];
+      console.log(this.projects[this.projects.length - 1]);
+      const afterurl = this.projects[this.projects.length - 1]["handleId"];
+      const regex = /([0-9A-Z]+)$/; // Regular expression to match one or more digits at the end
+      const matches = afterurl.match(regex);
+
+      let afterId = "";
+      if (matches && matches.length > 1) {
+        afterId = matches[1];
+        console.log(afterId); // Output: 01H3HBVZGH3YE0K27X35S15QT1
+      } else {
+        console.log("No digits found at the end of the URL.");
+        return;
+      }
       const url =
         this.apiServer + "/api/v2/report/plansByIssuer?afterId=" + afterId;
-      const token = await accessToken(identity);
+      const token = await accessToken(this.current);
       const headers = {
         "Content-Type": "application/json",
         Authorization: "Bearer " + token,
@@ -163,6 +177,7 @@ export default class ProjectsView extends Vue {
   }
 
   async LoadProjects(identity: IIdentifier) {
+    console.log("LoadProjects");
     const url = this.apiServer + "/api/v2/report/plansByIssuer";
     const token = await accessToken(identity);
     const headers = {
@@ -185,6 +200,8 @@ export default class ProjectsView extends Vue {
           };
           this.projects.push(data);
         }
+
+        this.isDataLoaded = true;
       }
     } catch (error) {
       console.error("Got error loading projects: ", error);
@@ -206,6 +223,7 @@ export default class ProjectsView extends Vue {
       const accounts = await accountsDB.accounts.toArray();
       const account = R.find((acc) => acc.did === activeDid, accounts);
       const identity = JSON.parse(account?.identity || "undefined");
+      this.current = identity;
       this.LoadProjects(identity);
     }
   }