From fa2e981c1636abb4e030256e60c24aafb2059a34 Mon Sep 17 00:00:00 2001 From: javayhu Date: Thu, 28 Aug 2025 23:23:52 +0800 Subject: [PATCH 1/2] fix: fix URL params when switch to balance from transactions --- .../settings/credits/credit-transactions.tsx | 60 +++++++---------- .../settings/credits/credits-page-client.tsx | 65 +++++++++++++++++-- 2 files changed, 83 insertions(+), 42 deletions(-) diff --git a/src/components/settings/credits/credit-transactions.tsx b/src/components/settings/credits/credit-transactions.tsx index d9b0351..8c8d4bb 100644 --- a/src/components/settings/credits/credit-transactions.tsx +++ b/src/components/settings/credits/credit-transactions.tsx @@ -4,34 +4,33 @@ import { CreditTransactionsTable } from '@/components/settings/credits/credit-tr import { useCreditTransactions } from '@/hooks/use-credits'; import type { SortingState } from '@tanstack/react-table'; import { useTranslations } from 'next-intl'; -import { - parseAsIndex, - parseAsInteger, - parseAsString, - useQueryStates, -} from 'nuqs'; -import { useMemo } from 'react'; + +interface CreditTransactionsProps { + page: number; + pageSize: number; + search: string; + sorting: SortingState; + onPageChange: (pageIndex: number) => void; + onPageSizeChange: (pageSize: number) => void; + onSearch: (search: string) => void; + onSortingChange: (sorting: SortingState) => void; +} /** * Credit transactions component */ -export function CreditTransactions() { +export function CreditTransactions({ + page, + pageSize, + search, + sorting, + onPageChange, + onPageSizeChange, + onSearch, + onSortingChange, +}: CreditTransactionsProps) { const t = useTranslations('Dashboard.settings.credits.transactions'); - const [{ page, pageSize, search, sortId, sortDesc }, setQueryStates] = - useQueryStates({ - page: parseAsIndex.withDefault(0), // 0-based internally, 1-based in URL - pageSize: parseAsInteger.withDefault(10), - search: parseAsString.withDefault(''), - sortId: parseAsString.withDefault('createdAt'), - sortDesc: parseAsInteger.withDefault(1), - }); - - const sorting: SortingState = useMemo( - () => [{ id: sortId, desc: Boolean(sortDesc) }], - [sortId, sortDesc] - ); - const { data, isLoading } = useCreditTransactions( page, pageSize, @@ -48,19 +47,10 @@ export function CreditTransactions() { search={search} sorting={sorting} loading={isLoading} - onSearch={(newSearch) => setQueryStates({ search: newSearch, page: 0 })} - onPageChange={(newPageIndex) => setQueryStates({ page: newPageIndex })} - onPageSizeChange={(newPageSize) => - setQueryStates({ pageSize: newPageSize, page: 0 }) - } - onSortingChange={(newSorting) => { - if (newSorting.length > 0) { - setQueryStates({ - sortId: newSorting[0].id, - sortDesc: newSorting[0].desc ? 1 : 0, - }); - } - }} + onSearch={onSearch} + onPageChange={onPageChange} + onPageSizeChange={onPageSizeChange} + onSortingChange={onSortingChange} /> ); } diff --git a/src/components/settings/credits/credits-page-client.tsx b/src/components/settings/credits/credits-page-client.tsx index 34cedb8..9d996ba 100644 --- a/src/components/settings/credits/credits-page-client.tsx +++ b/src/components/settings/credits/credits-page-client.tsx @@ -5,7 +5,15 @@ import { CreditTransactions } from '@/components/settings/credits/credit-transac import CreditsBalanceCard from '@/components/settings/credits/credits-balance-card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { useTranslations } from 'next-intl'; -import { parseAsStringLiteral, useQueryState } from 'nuqs'; +import { + parseAsIndex, + parseAsInteger, + parseAsString, + parseAsStringLiteral, + useQueryStates, +} from 'nuqs'; +import { useMemo } from 'react'; +import type { SortingState } from '@tanstack/react-table'; /** * Credits page client, show credit balance and transactions @@ -13,21 +21,46 @@ import { parseAsStringLiteral, useQueryState } from 'nuqs'; export default function CreditsPageClient() { const t = useTranslations('Dashboard.settings.credits'); - const [activeTab, setActiveTab] = useQueryState( - 'tab', - parseAsStringLiteral(['balance', 'transactions']).withDefault('balance') + // Manage all URL states in the parent component + const [{ tab, page, pageSize, search, sortId, sortDesc }, setQueryStates] = + useQueryStates({ + tab: parseAsStringLiteral(['balance', 'transactions']).withDefault('balance'), + // Transaction-specific parameters + page: parseAsIndex.withDefault(0), + pageSize: parseAsInteger.withDefault(10), + search: parseAsString.withDefault(''), + sortId: parseAsString.withDefault('createdAt'), + sortDesc: parseAsInteger.withDefault(1), + }); + + const sorting: SortingState = useMemo( + () => [{ id: sortId, desc: Boolean(sortDesc) }], + [sortId, sortDesc] ); const handleTabChange = (value: string) => { if (value === 'balance' || value === 'transactions') { - setActiveTab(value); + if (value === 'balance') { + // When switching to balance tab, clear transaction parameters + setQueryStates({ + tab: value, + page: null, + pageSize: null, + search: null, + sortId: null, + sortDesc: null, + }); + } else { + // When switching to transactions tab, just set the tab + setQueryStates({ tab: value }); + } } }; return (
@@ -52,7 +85,25 @@ export default function CreditsPageClient() { {/* Credit Transactions */} - + setQueryStates({ page: newPageIndex })} + onPageSizeChange={(newPageSize) => + setQueryStates({ pageSize: newPageSize, page: 0 }) + } + onSearch={(newSearch) => setQueryStates({ search: newSearch, page: 0 })} + onSortingChange={(newSorting) => { + if (newSorting.length > 0) { + setQueryStates({ + sortId: newSorting[0].id, + sortDesc: newSorting[0].desc ? 1 : 0, + }); + } + }} + />
From c0aa979382233e13b10c9edf4407b216a9e9fe74 Mon Sep 17 00:00:00 2001 From: javayhu Date: Sat, 30 Aug 2025 00:24:12 +0800 Subject: [PATCH 2/2] chore: clean up imports and improve formatting in CreditsPageClient component --- .../settings/credits/credits-page-client.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/settings/credits/credits-page-client.tsx b/src/components/settings/credits/credits-page-client.tsx index 9d996ba..722e13f 100644 --- a/src/components/settings/credits/credits-page-client.tsx +++ b/src/components/settings/credits/credits-page-client.tsx @@ -4,6 +4,7 @@ import { CreditPackages } from '@/components/settings/credits/credit-packages'; import { CreditTransactions } from '@/components/settings/credits/credit-transactions'; import CreditsBalanceCard from '@/components/settings/credits/credits-balance-card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import type { SortingState } from '@tanstack/react-table'; import { useTranslations } from 'next-intl'; import { parseAsIndex, @@ -13,7 +14,6 @@ import { useQueryStates, } from 'nuqs'; import { useMemo } from 'react'; -import type { SortingState } from '@tanstack/react-table'; /** * Credits page client, show credit balance and transactions @@ -24,7 +24,9 @@ export default function CreditsPageClient() { // Manage all URL states in the parent component const [{ tab, page, pageSize, search, sortId, sortDesc }, setQueryStates] = useQueryStates({ - tab: parseAsStringLiteral(['balance', 'transactions']).withDefault('balance'), + tab: parseAsStringLiteral(['balance', 'transactions']).withDefault( + 'balance' + ), // Transaction-specific parameters page: parseAsIndex.withDefault(0), pageSize: parseAsInteger.withDefault(10), @@ -59,11 +61,7 @@ export default function CreditsPageClient() { return (
- + {t('tabs.balance')} @@ -90,11 +88,15 @@ export default function CreditsPageClient() { pageSize={pageSize} search={search} sorting={sorting} - onPageChange={(newPageIndex) => setQueryStates({ page: newPageIndex })} + onPageChange={(newPageIndex) => + setQueryStates({ page: newPageIndex }) + } onPageSizeChange={(newPageSize) => setQueryStates({ pageSize: newPageSize, page: 0 }) } - onSearch={(newSearch) => setQueryStates({ search: newSearch, page: 0 })} + onSearch={(newSearch) => + setQueryStates({ search: newSearch, page: 0 }) + } onSortingChange={(newSorting) => { if (newSorting.length > 0) { setQueryStates({