Don't load user bets twice 👀

web/components/bets-list.tsx

@@ -4,7 +4,6 @@ import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
 
-import { useUserBets } from 'web/hooks/use-user-bets'
 import { Bet } from 'web/lib/firebase/bets'
 import { User } from 'web/lib/firebase/users'
 import {
@@ -51,13 +50,16 @@ import { floatingEqual } from 'common/util/math'
 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'sold' | 'closed' | 'resolved' | 'all'
 
-export function BetsList(props: { user: User; hideBetsBefore?: number }) {
+export function BetsList(props: {
-  const { user, hideBetsBefore } = props
+  user: User
+  bets: Bet[] | undefined
+  hideBetsBefore?: number
+}) {
+  const { user, bets: allBets, hideBetsBefore } = props
 
   const signedInUser = useUser()
   const isYourBets = user.id === signedInUser?.id
 
-  const allBets = useUserBets(user.id, { includeRedemptions: true })
   // Hide bets before 06-01-2022 if this isn't your own profile
   // NOTE: This means public profits also begin on 06-01-2022 as well.
   const bets = allBets?.filter(

web/components/user-page.tsx

@@ -76,7 +76,12 @@ export function UserPage(props: {
   const [usersContracts, setUsersContracts] = useState<Contract[] | 'loading'>(
     'loading'
   )
-  const [usersBets, setUsersBets] = useState<Bet[] | 'loading'>('loading')
+  const [userBets, setUserBets] = useState<Bet[] | undefined>()
+  const betCount =
+    userBets === undefined
+      ? 0
+      : userBets.filter((bet) => !bet.isRedemption && bet.amount !== 0).length
+
   const [portfolioHistory, setUsersPortfolioHistory] = useState<
     PortfolioMetrics[]
   >([])
@@ -95,7 +100,7 @@ export function UserPage(props: {
     if (!user) return
     getUsersComments(user.id).then(setUsersComments)
     listContracts(user.id).then(setUsersContracts)
-    getUserBets(user.id, { includeRedemptions: false }).then(setUsersBets)
+    getUserBets(user.id, { includeRedemptions: true }).then(setUserBets)
     getPortfolioHistory(user.id).then(setUsersPortfolioHistory)
   }, [user])
 
@@ -307,13 +312,12 @@ export function UserPage(props: {
                     />
                     <BetsList
                       user={user}
+                      bets={userBets}
                       hideBetsBefore={isCurrentUser ? 0 : JUNE_1_2022}
                     />
                   </div>
                 ),
-                tabIcon: (
+                tabIcon: <div className="px-0.5 font-bold">{betCount}</div>,
-                  <div className="px-0.5 font-bold">{usersBets.length}</div>
-                ),
               },
             ]}
           />