Refactored and streamlined code. Still having an issue with beforeId?

src/views/ProjectsView.vue

@@ -112,6 +112,13 @@ import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
 import InfiniteScroll from "@/components/InfiniteScroll";
 
+interface ProjectData {
+  name: string;
+  description: string;
+  handleId: string;
+  jwtId: string;
+}
+
 @Component({
   components: { InfiniteScroll },
 })
@@ -119,53 +126,36 @@ export default class ProjectsView extends Vue {
   apiServer = "";
   projects: { handleId: string; name: string; description: string }[] = [];
   current: IIdentifier;
-  isDataLoaded = false;
 
-  async loadMoreData(payload: boolean) {
+  async dataLoader(url: string, token: string) {
-    console.log("loadMoreData");
+    const headers: { [key: string]: string } = {
-    console.log(payload);
-    if (this.projects.length > 0) {
-      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(this.current);
-      const headers = {
       "Content-Type": "application/json",
-        Authorization: "Bearer " + token,
+      Authorization: `Bearer ${token}`,
     };
 
     try {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
-          const plans = resp.data.data;
+        const plans: ProjectData[] = resp.data.data;
-          for (let i = 0; i < plans.length; i++) {
+        for (const plan of plans) {
-            const plan = plans[i];
+          const { name, description, handleId = plan.fullIri, jwtId } = plan;
-            const data = {
+          this.projects.push({ name, description, handleId, jwtId });
-              name: plan.name,
-              description: plan.description,
-              // handleId is new in server v release-1.6.0; remove fullIri when that
-              // version shows up here: https://endorser.ch:3000/api-docs/
-              handleId: plan.handleId || plan.fullIri,
-            };
-            this.projects.push(data);
         }
       }
     } catch (error) {
       console.error("Got error loading projects:", error);
     }
   }
+
+  async loadMoreData(payload: boolean) {
+    console.log("loadMoreData");
+    console.log(payload);
+    if (this.projects.length > 0) {
+      const latestProject = this.projects[this.projects.length - 1];
+      const url = `${this.apiServer}/api/v2/report/plansByIssuer?beforeId=${latestProject.jwtId}`;
+      const token = await accessToken(this.current);
+      await this.dataLoader(url, token);
+    }
   }
 
   onClickLoadProject(id: string) {
@@ -178,34 +168,9 @@ export default class ProjectsView extends Vue {
 
   async LoadProjects(identity: IIdentifier) {
     console.log("LoadProjects");
-    const url = this.apiServer + "/api/v2/report/plansByIssuer";
+    const url = `${this.apiServer}/api/v2/report/plansByIssuer`;
-    const token = await accessToken(identity);
+    const token: string = await accessToken(identity);
-    const headers = {
+    await this.dataLoader(url, token);
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
-
-    try {
-      const resp = await this.axios.get(url, { headers });
-      if (resp.status === 200) {
-        const plans = resp.data.data;
-        for (let i = 0; i < plans.length; i++) {
-          const plan = plans[i];
-          const data = {
-            name: plan.name,
-            description: plan.description,
-            // handleId is new in server v release-1.6.0; remove fullIri when that
-            // version shows up here: https://endorser.ch:3000/api-docs/
-            handleId: plan.handleId || plan.fullIri,
-          };
-          this.projects.push(data);
-        }
-
-        this.isDataLoaded = true;
-      }
-    } catch (error) {
-      console.error("Got error loading projects: ", error);
-    }
   }
 
   // 'created' hook runs when the Vue instance is first created