diff --git a/packages/experiments/src/lib/helpers/feed.ts b/packages/experiments/src/lib/helpers/feed.ts index 3457e07b7..38e50eaaf 100644 --- a/packages/experiments/src/lib/helpers/feed.ts +++ b/packages/experiments/src/lib/helpers/feed.ts @@ -3,21 +3,33 @@ import { collection, getDocs, limit, - QueryDocumentSnapshot, orderBy, + Query, + startAt, + DocumentReference, } from 'firebase/firestore' import type { CollectionName, UpDownPost } from '../db/db.types' import { getDb } from '$lib/db' -export async function getVideos(_lastRef?: QueryDocumentSnapshot) { +export async function getVideos(_lastRef?: DocumentReference) { try { const videos: UpDownPost[] = [] const db = getDb() - const q = query( - collection(db, 'ud-videos' as CollectionName), - orderBy('created_at', 'desc'), - limit(50), - ) + let q: Query + if (_lastRef) { + q = query( + collection(db, 'ud-videos' as CollectionName), + orderBy('created_at', 'desc'), + limit(5), + startAt(_lastRef), + ) + } else { + q = query( + collection(db, 'ud-videos' as CollectionName), + orderBy('created_at', 'desc'), + limit(5), + ) + } const snapshot = await getDocs(q) if (snapshot.empty) { return { ok: true, videos, more: false } @@ -28,7 +40,7 @@ export async function getVideos(_lastRef?: QueryDocumentSnapshot) { return { ok: true, videos, - lastRef: snapshot.docs[snapshot.docs.length - 1], + lastRef: snapshot.docs[snapshot.docs.length - 1].ref, more: true, } } catch (e) { diff --git a/packages/experiments/src/routes/(feed)/(splash)/up-down/[id=videoId]/+page.svelte b/packages/experiments/src/routes/(feed)/(splash)/up-down/[id=videoId]/+page.svelte index dcb840a2e..52928dcfe 100644 --- a/packages/experiments/src/routes/(feed)/(splash)/up-down/[id=videoId]/+page.svelte +++ b/packages/experiments/src/routes/(feed)/(splash)/up-down/[id=videoId]/+page.svelte @@ -16,6 +16,7 @@ import UpDownVote from '$components/up-down/UpDownVote.svelte' import UpDownVoteControls from '$components/up-down/UpDownVoteControls.svelte' import type { UpDownPost } from '$lib/db/db.types' import { getVideos } from '$lib/helpers/feed' +import type { DocumentReference } from 'firebase/firestore' const fetchWhenVideosLeft = 5 const keepVideosLoadedCount: number = 3 @@ -25,15 +26,14 @@ let currentVideoIndex = 0 let lastWatchedVideoIndex = -1 let noMoreVideos = false let loading = false +let lastLoadedVideoRef: DocumentReference | undefined = undefined -let loadTimeout: ReturnType | undefined = undefined -let errorCount = 0 let showError = false async function fetchNextVideos() { - console.log('called fetchNextVideos') + console.log('f1') if (noMoreVideos) { - console.log('No more videos to load') + console.log('r1') return } @@ -41,13 +41,17 @@ async function fetchNextVideos() { return } + console.log('f2') + loading = true - const res = await getVideos() + const res = await getVideos(lastLoadedVideoRef) if (!res.ok || !res.videos) { + console.log('r2') return } videos = joinArrayUniquely(videos, res.videos) + lastLoadedVideoRef = res.lastRef noMoreVideos = !res.more loading = false } diff --git a/packages/experiments/src/routes/(feed)/(splash)/up-down/wallet/+page.svelte b/packages/experiments/src/routes/(feed)/(splash)/up-down/wallet/+page.svelte index c2bef3f36..91a851a86 100644 --- a/packages/experiments/src/routes/(feed)/(splash)/up-down/wallet/+page.svelte +++ b/packages/experiments/src/routes/(feed)/(splash)/up-down/wallet/+page.svelte @@ -13,6 +13,8 @@ import getDefaultImageUrl from '$lib/utils/getDefaultImageUrl' import { generateRandomName } from '$lib/utils/randomUsername' import { anonUser, authState } from '$stores/auth' import userProfile from '$stores/userProfile' +import { getApp } from 'firebase/app' +import { getAuth, signOut } from 'firebase/auth' import { collection, doc, @@ -69,6 +71,15 @@ async function getTransactions() { } } +async function logoutUser() { + const app = getApp() + const auth = getAuth(app) + await signOut(auth) + $authState.isLoggedIn = false + $authState.userId = $anonUser.id + $authState.accessToken = undefined +} + onMount(() => getTransactions()) @@ -87,7 +98,12 @@ onMount(() => getTransactions()) iconClass="text-white w-6 h-6" />
Welcome!
-
{$userProfile.name}
+
+
{$userProfile.name}
+ +