From e12e39967998988fa12a989d5ee4411616a1e80e Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Fri, 14 Jan 2022 19:12:38 -0600
Subject: [PATCH] Fix feed order moving around on load

---
 web/lib/firebase/utils.ts |  2 ++
 web/pages/activity.tsx    | 21 +++------------------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/web/lib/firebase/utils.ts b/web/lib/firebase/utils.ts
index 6af380c7..479f0087 100644
--- a/web/lib/firebase/utils.ts
+++ b/web/lib/firebase/utils.ts
@@ -33,6 +33,8 @@ export function listenForValues<T>(
   setValues: (values: T[]) => void
 ) {
   return onSnapshot(query, (snapshot) => {
+    if (snapshot.metadata.fromCache) return
+
     const values = snapshot.docs.map((doc) => doc.data() as T)
     setValues(values)
   })
diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx
index 62d0026c..d331cdf4 100644
--- a/web/pages/activity.tsx
+++ b/web/pages/activity.tsx
@@ -11,22 +11,6 @@ import { Bet } from '../../common/bet'
 
 const MAX_ACTIVE_CONTRACTS = 75
 
-function FeedCard(props: {
-  contract: Contract
-  bets: Bet[]
-  comments: Comment[]
-}) {
-  const { contract, bets, comments } = props
-  return (
-    <ContractFeed
-      contract={contract}
-      bets={bets}
-      comments={comments}
-      feedType="activity"
-    />
-  )
-}
-
 // This does NOT include comment times, since those aren't part of the contract atm.
 // TODO: Maybe store last activity time directly in the contract?
 // Pros: simplifies this code; cons: harder to tweak "activity" definition later
@@ -90,7 +74,7 @@ export function ActivityFeed(props: {
   const recentComments = useRecentComments()
   const activeContracts = recentComments
     ? findActiveContracts(contracts, recentComments)
-    : contracts
+    : props.contracts
 
   return contracts.length > 0 ? (
     <Col className="items-center">
@@ -99,10 +83,11 @@ export function ActivityFeed(props: {
         <Col className="w-full bg-white self-center divide-gray-300 divide-y">
           {activeContracts.map((contract, i) => (
             <div className="py-6 px-2 sm:px-4">
-              <FeedCard
+              <ContractFeed
                 contract={contract}
                 bets={contractBets[i]}
                 comments={contractComments[i]}
+                feedType="activity"
               />
             </div>
           ))}