src/Frontend/src/components/ClipFeed.vue
+5
-6
diff --git a/src/Frontend/src/components/ClipFeed.vue b/src/Frontend/src/components/ClipFeed.vue
index 25b7bea..3538f88 100644
@@ -2,6 +2,7 @@
import { ref, onMounted } from "vue";
import ClipItem from "./ClipItem.vue";
import type { Clip } from "../Clip";
import { fetchClips as fetchClipsFromApi } from "../services/api";
const clips = ref<Array<Clip>>([]);
const loading = ref(false);
@@ -21,14 +22,12 @@ async function fetchClips(after?: string) {
}
loading.value = true;
try {
const params = new URLSearchParams({ limit: "10" });
if (after) params.set("after", after);
const res = await fetch(`/api/clips?${params}`);
const data: Array<Clip> = await res.json();
if (data.length === 0) {
const newClips = await fetchClipsFromApi(after);
if (newClips.length === 0) {
exhausted.value = true;
} else {
clips.value.push(...data);
console.log(newClips);
clips.value.push(...newClips);
}
} finally {
loading.value = false;
src/Frontend/src/services/api.ts
+15
-0
diff --git a/src/Frontend/src/services/api.ts b/src/Frontend/src/services/api.ts
new file mode 100644
index 0000000..1278746
@@ -0,0 +1,15 @@
import type { Clip } from "../Clip";
export async function fetchClips(after?: string): Promise<Array<Clip>> {
const params = new URLSearchParams({ limit: "10" });
if (after) params.set("after", after);
const res = await fetch(`/api/clips?${params}`);
return JSON.parse(await res.text(), reviveClips);
}
function reviveClips(key: string, value: any): any {
if (key === "createdAt" && typeof value === "string") {
return new Date(value);
}
return value;
}