refactor: remove useCreditTransactionStore and related logic from credits components, streamline useCredits integration

src/components/layout/credits-balance-button.tsx

@@ -4,23 +4,13 @@ import { Button } from '@/components/ui/button';
 import { useCredits } from '@/hooks/use-credits';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { Routes } from '@/routes';
-import { useCreditTransactionStore } from '@/stores/transaction-store';
 import { CoinsIcon, Loader2Icon } from 'lucide-react';
-import { useEffect } from 'react';
 
 export function CreditsBalanceButton() {
   const router = useLocaleRouter();
-  const { refreshTrigger } = useCreditTransactionStore();
 
   // Use the new useCredits hook
-  const { balance, isLoading, refresh } = useCredits();
-
-  useEffect(() => {
-    // Refresh credits when transaction refresh is triggered
-    if (refreshTrigger) {
-      refresh();
-    }
-  }, [refreshTrigger, refresh]);
+  const { balance, isLoading } = useCredits();
 
   const handleClick = () => {
     router.push(Routes.SettingsCredits);

src/components/layout/credits-balance-menu.tsx

@@ -3,25 +3,15 @@
 import { useCredits } from '@/hooks/use-credits';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { Routes } from '@/routes';
-import { useCreditTransactionStore } from '@/stores/transaction-store';
 import { CoinsIcon, Loader2Icon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect } from 'react';
 
 export function CreditsBalanceMenu() {
   const t = useTranslations('Marketing.avatar');
   const router = useLocaleRouter();
-  const { refreshTrigger } = useCreditTransactionStore();
 
   // Use the new useCredits hook
-  const { balance, isLoading, refresh } = useCredits();
-
-  useEffect(() => {
-    // Refresh credits when transaction refresh is triggered
-    if (refreshTrigger) {
-      refresh();
-    }
-  }, [refreshTrigger, refresh]);
+  const { balance, isLoading } = useCredits();
 
   const handleClick = () => {
     router.push(Routes.SettingsCredits);

src/components/settings/credits/credit-packages.tsx

@@ -15,7 +15,6 @@ import { useLocaleRouter } from '@/i18n/navigation';
 import { formatPrice } from '@/lib/formatter';
 import { cn } from '@/lib/utils';
 import { Routes } from '@/routes';
-import { useCreditTransactionStore } from '@/stores/transaction-store';
 import { CircleCheckBigIcon, CoinsIcon, Loader2Icon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
@@ -34,7 +33,6 @@ export function CreditPackages() {
 
   // Use the new useCredits hook
   const { balance, isLoading, refresh } = useCredits();
-  const { refreshTrigger, triggerRefresh } = useCreditTransactionStore();
 
   // Get current user
   const currentUser = useCurrentUser();
@@ -54,8 +52,6 @@ export function CreditPackages() {
       }, 0);
 
       // Refresh credits data to show updated balance
-      triggerRefresh();
-      // Also refresh the credits store
       refresh();
 
       // Clean up URL parameters
@@ -64,14 +60,7 @@ export function CreditPackages() {
       // Use Routes.SettingsCredits + url.search to properly handle locale routing
       localeRouter.replace(Routes.SettingsCredits + url.search);
     }
-  }, [searchParams, localeRouter, refresh, triggerRefresh, t]);
-
-  // Listen for transaction updates and refresh credits
-  useEffect(() => {
-    if (refreshTrigger) {
-      refresh();
-    }
-  }, [refreshTrigger, refresh]);
+  }, [searchParams, localeRouter, refresh]);
 
   return (
     <div className="space-y-6">

src/components/settings/credits/credit-transactions-page.tsx

@@ -3,10 +3,9 @@
 import { getCreditTransactionsAction } from '@/actions/get-credit-transactions';
 import type { CreditTransaction } from '@/components/settings/credits/credit-transactions-table';
 import { CreditTransactionsTable } from '@/components/settings/credits/credit-transactions-table';
-import { useCreditTransactionStore } from '@/stores/transaction-store';
 import type { SortingState } from '@tanstack/react-table';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
 export function CreditTransactionsPageClient() {
@@ -20,9 +19,8 @@ export function CreditTransactionsPageClient() {
     { id: 'createdAt', desc: true },
   ]);
   const [loading, setLoading] = useState(false);
-  const { refreshTrigger } = useCreditTransactionStore();
 
-  const fetchData = async () => {
+  const fetchData = useCallback(async () => {
     setLoading(true);
     try {
       const result = await getCreditTransactionsAction({
@@ -52,11 +50,11 @@ export function CreditTransactionsPageClient() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [pageIndex, pageSize, search, sorting]);
 
   useEffect(() => {
     fetchData();
-  }, [pageIndex, pageSize, search, sorting, refreshTrigger]);
+  }, [fetchData]);
 
   return (
     <CreditTransactionsTable

src/hooks/use-credits.ts

@@ -1,6 +1,6 @@
 import { authClient } from '@/lib/auth-client';
 import { useCreditsStore } from '@/stores/credits-store';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 /**
  * Hook for accessing and managing credits state
@@ -21,6 +21,24 @@ export function useCredits() {
 
   const { data: session } = authClient.useSession();
 
+  // Stable refetch function using useCallback
+  const refetch = useCallback(() => {
+    const currentUser = session?.user;
+    if (currentUser) {
+      console.log('refetching credits info for user', currentUser.id);
+      fetchCredits(currentUser);
+    }
+  }, [session?.user, fetchCredits]);
+
+  // Stable refresh function using useCallback
+  const refresh = useCallback(() => {
+    const currentUser = session?.user;
+    if (currentUser) {
+      console.log('refreshing credits info for user', currentUser.id);
+      refreshCredits(currentUser);
+    }
+  }, [session?.user, refreshCredits]);
+
   useEffect(() => {
     const currentUser = session?.user;
     // Fetch credits data whenever the user session changes
@@ -28,7 +46,7 @@ export function useCredits() {
       console.log('fetching credits info for user', currentUser.id);
       fetchCredits(currentUser);
     }
-  }, [session, fetchCredits]);
+  }, [session?.user, fetchCredits]);
 
   return {
     // State
@@ -41,20 +59,8 @@ export function useCredits() {
     updateBalanceOptimistically,
 
     // Utility methods
-    refetch: () => {
-      const currentUser = session?.user;
-      if (currentUser) {
-        console.log('refetching credits info for user', currentUser.id);
-        fetchCredits(currentUser);
-      }
-    },
-    refresh: () => {
-      const currentUser = session?.user;
-      if (currentUser) {
-        console.log('refreshing credits info for user', currentUser.id);
-        refreshCredits(currentUser);
-      }
-    },
+    refetch,
+    refresh,
 
     // Helper methods
     hasEnoughCredits: (amount: number) => balance >= amount,

src/stores/transaction-store.ts

@@ -1,14 +0,0 @@
-import { create } from 'zustand';
-
-interface CreditTransactionStore {
-  refreshTrigger: number;
-  triggerRefresh: () => void;
-}
-
-export const useCreditTransactionStore = create<CreditTransactionStore>(
-  (set) => ({
-    refreshTrigger: 0,
-    triggerRefresh: () =>
-      set((state) => ({ refreshTrigger: state.refreshTrigger + 1 })),
-  })
-);