Fix BUG-666: Add transaction type filter with pagination #1
+84
−8
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implemented filtering by transaction type (credit/debit) on the frontend. Added pagination controls to navigate through filtered results. Fetching all transactions to enable client-side filtering for better UX.
shawnSpy
commented
Jan 15, 2026
| setLoading(true); | ||
| const backendUrl = import.meta.env.VITE_BACKEND_URL; | ||
| const response = await fetch(`${backendUrl}/api/v1/transactions/`); | ||
| const response = await fetch('http://localhost:8000/api/v1/transactions/?limit=1000'); |
Author
There was a problem hiding this comment.
- Hardcoded localhost:8000 can break in different environments. We should use an environment variable or config.
- I think limit=1000 fetches too many records upfront. As it is a client-side pagination, this will be slow and can waste bandwidth. I think we should consider server-side pagination or a more reasonable limit.
shawnSpy
commented
Jan 15, 2026
| setTransactions(data); | ||
| } catch (e: unknown) { | ||
| setError(e instanceof Error ? e.message : 'An error occurred'); | ||
| } catch (e: any) { |
Author
There was a problem hiding this comment.
We should avoid any. We can use unknown and narrow the error as original.
shawnSpy
commented
Jan 15, 2026
| const [error, setError] = useState<string | null>(null); | ||
| const [filterType, setFilterType] = useState<string>('all'); | ||
| const [currentPage, setCurrentPage] = useState<number>(1); | ||
| const pageSize = 10; |
Author
There was a problem hiding this comment.
What about making this configurable?
shawnSpy
commented
Jan 15, 2026
Comment on lines
+44
to
+47
| const filteredTransactions = transactions.filter(transaction => { | ||
| if (filterType === 'all') return true; | ||
| return transaction.type === filterType; | ||
| }); |
Author
There was a problem hiding this comment.
This runs every render. We can use useMemo here.
shawnSpy
commented
Jan 15, 2026
Comment on lines
+49
to
+52
| const totalPages = Math.ceil(filteredTransactions.length / pageSize); | ||
| const startIndex = (currentPage - 1) * pageSize; | ||
| const endIndex = startIndex + pageSize; | ||
| const paginatedTransactions = filteredTransactions.slice(startIndex, endIndex); |
Author
There was a problem hiding this comment.
We can use useMemo here as well.
shawnSpy
commented
Jan 15, 2026
Comment on lines
+87
to
+92
| <select | ||
| id="type-filter" | ||
| value={filterType} | ||
| onChange={handleFilterChange} | ||
| className="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" | ||
| > |
Author
There was a problem hiding this comment.
We can add aria-label for screen readers.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What I Did
This PR fixes the transaction display bug by adding a filter dropdown for transaction types (All/Credit/Debit) and implements client-side pagination for the transaction list. The filtering and pagination are handled entirely in the frontend React component.
How to Test
docker compose up --build.http://localhost:3000.Architectural Decision Record (ADR)
To address the display bug, I decided to handle filtering directly in the frontend component. This approach simplifies the backend and leverages the client's processing power for immediate filtering without additional API calls. For pagination, I implemented client-side pagination by slicing the filtered transaction array, which provides a responsive user experience without requiring backend changes. The frontend fetches up to 1000 transactions at once to support this client-side approach.
AI Usage Summary
I used AI tools for minor code refactoring and to generate some boilerplate for the frontend pagination component.