Add logout button (#2016)

* Add logout functionality * Load more videos on load
yral-dapp · Nov 16, 2023 · 56d7504 · 56d7504
1 parent 2800033
commit 56d7504
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git 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
@@ -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,29 +26,32 @@ let currentVideoIndex = 0
 let lastWatchedVideoIndex = -1
 let noMoreVideos = false
 let loading = false
+let lastLoadedVideoRef: DocumentReference | undefined = undefined
 
-let loadTimeout: ReturnType<typeof setTimeout> | 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
   }
 
   if (videos.length - currentVideoIndex > fetchWhenVideosLeft) {
     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
@@ -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())
 </script>
 
@@ -87,7 +98,12 @@ onMount(() => getTransactions())
           iconClass="text-white w-6 h-6" />
         <div class="flex flex-col items-center py-4">
           <div class="self-start text-xs">Welcome!</div>
-          <div class="text-lg font-bold text-white">{$userProfile.name}</div>
+          <div class="flex space-x-2">
+            <div class="text-lg font-bold text-white">{$userProfile.name}</div>
+            <button class="pt-1 text-xs underline" on:click={logoutUser}>
+              Logout
+            </button>
+          </div>
         </div>
       </div>
       <Avatar