Integrating InfiniteScroll to the Discovery view #39

Merged
anomalist merged 2 commits from discover-infinite-scroll into master 1 year ago
  1. 119
      src/views/DiscoverView.vue

119
src/views/DiscoverView.vue

@ -30,7 +30,10 @@
<li> <li>
<a <a
href="#" href="#"
@click="searchLocal()" @click="
projects = [];
searchLocal();
"
v-bind:class="computedLocalTabClassNames()" v-bind:class="computedLocalTabClassNames()"
> >
Nearby Nearby
@ -44,7 +47,10 @@
<a <a
href="#" href="#"
v-bind:class="computedRemoteTabClassNames()" v-bind:class="computedRemoteTabClassNames()"
@click="search()" @click="
projects = [];
search();
"
> >
Remote Remote
<span <span
@ -65,34 +71,35 @@
</div> </div>
<!-- Results List --> <!-- Results List -->
<ul v-if="projects.length > 0"> <InfiniteScroll @reached-bottom="loadMoreData">
<li <ul>
class="border-b border-slate-300" <li
v-for="project in projects" class="border-b border-slate-300"
:key="project.handleId" v-for="project in projects"
> :key="project.handleId"
<a
@click="onClickLoadProject(project.handleId)"
class="block py-4 flex gap-4"
> >
<div class="w-12"> <a
<img @click="onClickLoadProject(project.handleId)"
src="https://picsum.photos/200/200?random=1" class="block py-4 flex gap-4"
class="w-full rounded" >
/> <div class="w-12">
</div> <img
src="https://picsum.photos/200/200?random=1"
class="w-full rounded"
/>
</div>
<div class="grow"> <div class="grow">
<h2 class="text-base font-semibold">Canyon cleanup</h2> <h2 class="text-base font-semibold">Canyon cleanup</h2>
<div class="text-sm"> <div class="text-sm">
<fa icon="user" class="fa-fw text-slate-400"></fa> <fa icon="user" class="fa-fw text-slate-400"></fa>
{{ project.name }} {{ project.name }}
</div>
</div> </div>
</div> </a>
</a> </li>
</li> </ul>
</ul> </InfiniteScroll>
<p v-else>No projects found yet.</p>
<AlertMessage <AlertMessage
:alertTitle="alertTitle" :alertTitle="alertTitle"
:alertMessage="alertMessage" :alertMessage="alertMessage"
@ -108,9 +115,10 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto"; import { accessToken } from "@/libs/crypto";
import AlertMessage from "@/components/AlertMessage"; import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav"; import QuickNav from "@/components/QuickNav";
import InfiniteScroll from "@/components/InfiniteScroll";
@Component({ @Component({
components: { AlertMessage, QuickNav }, components: { AlertMessage, QuickNav, InfiniteScroll },
}) })
export default class DiscoverView extends Vue { export default class DiscoverView extends Vue {
activeDid = ""; activeDid = "";
@ -155,11 +163,16 @@ export default class DiscoverView extends Vue {
return headers; return headers;
} }
public async search() { public async search(beforeId?: string) {
const claimContents = const claimContents =
"claimContents=" + encodeURIComponent(this.searchTerms); "claimContents=" + encodeURIComponent(this.searchTerms);
const claimType = "claimType=PlanAction"; 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.isRemoteActive = true;
this.isLocalActive = false; this.isLocalActive = false;
@ -181,8 +194,13 @@ export default class DiscoverView extends Vue {
const results = await response.json(); const results = await response.json();
if (results.data) { const plans: ProjectData[] = results.data;
this.projects = 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; this.remoteCount = this.projects.length;
} else { } else {
throw JSON.stringify(results); throw JSON.stringify(results);
@ -197,10 +215,10 @@ export default class DiscoverView extends Vue {
} }
} }
public async searchLocal() { public async searchLocal(beforeId?: string) {
const claimContents = const claimContents =
"claimContents=" + encodeURIComponent(this.searchTerms); "claimContents=" + encodeURIComponent(this.searchTerms);
const queryParams = [ let queryParams = [
claimContents, claimContents,
"minLocLat=40.901000", "minLocLat=40.901000",
"maxLocLat=40.904000", "maxLocLat=40.904000",
@ -208,6 +226,10 @@ export default class DiscoverView extends Vue {
"eastLocLon=-111.909000", "eastLocLon=-111.909000",
].join("&"); ].join("&");
if (beforeId) {
queryParams = queryParams + `beforeId=${beforeId}`;
}
try { try {
this.isLoading = true; this.isLoading = true;
this.isLocalActive = true; this.isLocalActive = true;
@ -227,7 +249,17 @@ export default class DiscoverView extends Vue {
const results = await response.json(); const results = await response.json();
if (results.data) { 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"]) {
Review

My apologies for this! I see that the server code does NOT exclude the "beforeId" and "afterId" on this endpoint. I will fix that.

My apologies for this! I see that the server code does NOT exclude the "beforeId" and "afterId" on this endpoint. I will fix that.
this.projects.push({ name, description, handleId, rowid });
}
}
} else {
this.projects = results.data;
}
this.localCount = this.projects.length; this.localCount = this.projects.length;
} else { } else {
throw JSON.stringify(results); 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 * Handle clicking on a project entry found in the list
* @param id of the project * @param id of the project

Loading…
Cancel
Save