fix(#2): state checking

README.md

@@ -181,3 +181,26 @@ This project is licensed under the GNU Affero General Public License v3.0 - see
 ## Support
 
 If you encounter any issues or have questions, please file an issue on the GitHub repository.
+
+## Issues
+
+### Missing Permissions
+
+Especially when updating from older versions, it may be that the permissions used in the newer versions have never been set. This causes numerous `missing permissions` errors to appear. The solution is to update the `auth.json` in the `data` directory for each user to include the following json:
+
+```json
+"permissions": [{
+    "habit": {
+        "write": true,
+        "interact": true
+    },
+    "wishlist": {
+        "write": true,
+        "interact": true
+    },
+    "coins": {
+        "write": true,
+        "interact": true
+    }
+}
+```

components/ClientWrapper.tsx

@@ -10,6 +10,7 @@ import LoadingSpinner from './LoadingSpinner';
 import PomodoroTimer from './PomodoroTimer';
 import RefreshBanner from './RefreshBanner';
 import UserSelectModal from './UserSelectModal';
+import { DATA_FRESHNESS_INTERVAL } from '@/lib/constants';
 
 function ClientWrapperContent({ children }: { children: ReactNode }) {
   const [pomo] = useAtom(pomodoroAtom)
@@ -52,9 +53,7 @@ function ClientWrapperContent({ children }: { children: ReactNode }) {
   useEffect(() => {
     // Interval for polling data freshness
     if (clientToken && !showRefreshBanner && status === 'authenticated') {
-      const intervalId = setInterval(() => {
-        performFreshnessCheck();
-      }, 30000); // Check every 30 seconds
+      const intervalId = setInterval(performFreshnessCheck, DATA_FRESHNESS_INTERVAL);
 
       return () => clearInterval(intervalId);
     }

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

components/UserSelectModal.tsx

@@ -128,7 +128,7 @@ export default function UserSelectModal({ onClose }: { onClose: () => void }) {
   const [isCreating, setIsCreating] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [error, setError] = useState('');
-  const [usersData, setUsersData] = useAtom(usersAtom);
+  const [usersData] = useAtom(usersAtom);
   const users = usersData.users;
   const [currentUser] = useAtom(currentUserAtom);
 

lib/atoms.ts

@@ -22,6 +22,7 @@ import {
   getDefaultWishlistData,
   Habit,
   PomodoroAtom,
+  User,
   UserId
 } from "./types";
 
@@ -77,6 +78,10 @@ export const currentUserAtom = atom((get) => {
   return users.users.find(user => user.id === currentUserId);
 })
 
+function removeHasPassword(users: Omit<User, 'password'>[]): Omit<User, 'password'>[] {
+  return users.map(user => { delete user.hasPassword; return user });
+}
+
 /**
  * Asynchronous atom that calculates a freshness token (hash) based on the current client-side data.
  * This token can be compared with a server-generated token to detect data discrepancies.
@@ -86,9 +91,10 @@ export const clientFreshnessTokenAtom = atom(async (get) => {
   const habits = get(habitsAtom);
   const coins = get(coinsAtom);
   const wishlist = get(wishlistAtom);
-  const users = get(usersAtom);
+  const users = structuredClone(get(usersAtom));
+  const usersWithoutHasPassword = removeHasPassword(users.users);
 
-  const dataString = prepareDataForHashing(settings, habits, coins, wishlist, users);
+  const dataString = prepareDataForHashing(settings, habits, coins, wishlist, { users: usersWithoutHasPassword });
   const hash = await generateCryptoHash(dataString);
   return hash;
 });

lib/constants.ts

@@ -34,3 +34,5 @@ export const QUICK_DATES = [
 export const MAX_COIN_LIMIT = 9999
 
 export const DESKTOP_DISPLAY_ITEM_COUNT = 4
+
+export const DATA_FRESHNESS_INTERVAL = 30000;