fix: displaying 0 whilst loading

components/CoinBalance.tsx

@@ -1,15 +1,11 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { settingsAtom } from '@/lib/atoms'
-import { useAtom } from 'jotai'
-import { Coins } from 'lucide-react'
-import { useTranslations } from 'next-intl'
-import dynamic from 'next/dynamic'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Coins } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import TodayEarnedCoins from './TodayEarnedCoins';
 
-const TodayEarnedCoins = dynamic(() => import('./TodayEarnedCoins'), { ssr: false })
-
-export default function CoinBalance({ coinBalance }: { coinBalance: number }) {
+export default function CoinBalance({ coinBalance }: { coinBalance: number | undefined }) {
   const t = useTranslations('CoinBalance');
-  const [settings] = useAtom(settingsAtom)
+
   return (
     <Card>
       <CardHeader>
@@ -20,7 +16,7 @@ export default function CoinBalance({ coinBalance }: { coinBalance: number }) {
           <Coins className="h-12 w-12 text-yellow-400 mr-4" />
           <div className="flex flex-col">
             <div className="flex flex-col">
-              <span className="text-4xl font-bold">{coinBalance}</span>
+              <span className="text-4xl font-bold">{coinBalance ? coinBalance : "…"}</span>
               <div className="flex items-center gap-1">
                 <TodayEarnedCoins longFormat={true} />
               </div>

components/DailyOverview.tsx

@@ -357,12 +357,8 @@ export default function DailyOverview({
   coinBalance,
 }: UpcomingItemsProps) {
   const t = useTranslations('DailyOverview');
-  const { completeHabit, undoComplete } = useHabits()
   const [settings] = useAtom(settingsAtom)
-  const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
   const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
-  const today = getTodayInTimezone(settings.system.timezone)
-  const todayCompletions = completedHabitsMap.get(today) || []
   const { saveHabit } = useHabits()
 
   const timezone = settings.system.timezone

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>
   )