Browse Source

Firing properly but no data returned on extended fetch

kb/add-usage-guide
Matthew Raymer 1 year ago
parent
commit
071c41b70c
  1. 38
      src/components/InfiniteScroll.vue
  2. 22
      src/views/ProjectsView.vue

38
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() {
this.$nextTick(() => {
this.isInitialized = true;
console.log("onMounted");
updated() {
console.log("updated()");
if (!this.observer) {
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;

22
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);
}
}

Loading…
Cancel
Save