fix: displaying 0 whilst loading

components/Dashboard.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useCoins } from '@/hooks/useCoins'
-import { habitsAtom, wishlistAtom } from '@/lib/atoms'
+import { coinsAtom, currentUserIdAtom, habitsAtom, wishlistAtom } from '@/lib/atoms'
 import { useAtom } from 'jotai'
 import { useTranslations } from 'next-intl'
 import CoinBalance from './CoinBalance'
@@ -10,11 +9,12 @@ import HabitStreak from './HabitStreak'
 
 export default function Dashboard() {
   const t = useTranslations('Dashboard');
-  const [habitsData] = useAtom(habitsAtom)
-  const habits = habitsData.habits
-  const { balance } = useCoins()
-  const [wishlist] = useAtom(wishlistAtom)
-  const wishlistItems = wishlist.items
+  const [{ habits }] = useAtom(habitsAtom);
+  const [loggedInUserId] = useAtom(currentUserIdAtom);
+  const [{ transactions }] = useAtom(coinsAtom);
+  const [{ items }] = useAtom(wishlistAtom);
+
+  const loggedInUserBalance = loggedInUserId ? transactions.filter(transaction => transaction.userId === loggedInUserId).reduce((sum, transaction) => sum + transaction.amount, 0) : 0;
 
   return (
     <div>
@@ -22,15 +22,13 @@ export default function Dashboard() {
         <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <CoinBalance coinBalance={balance} />
+        <CoinBalance coinBalance={loggedInUserId ? loggedInUserBalance : undefined} />
         <HabitStreak habits={habits} />
         <DailyOverview
-          wishlistItems={wishlistItems}
+          wishlistItems={items}
           habits={habits}
-          coinBalance={balance}
+          coinBalance={loggedInUserBalance}
         />
-
-        {/* <HabitHeatmap habits={habits} /> */}
       </div>
     </div>
   )