Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: disable transaction type filter when there are no transactions #818

Merged
merged 8 commits into from
Nov 15, 2024
+44 −2
Merged

fix: disable transaction type filter when there are no transactions #818

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cfb3e26
fix: hide transaction type filter when there there is 0 transactions
shahin-hq Nov 14, 2024
2d4ae67
fix: hide transaction type filter when there there is 0 transactions
shahin-hq Nov 14, 2024
f07e38a
fix: disable transaction type filter when there there is 0 transactions
shahin-hq Nov 14, 2024
79f84fe
fix: disable transaction type filter when there there is 0 transactions
shahin-hq Nov 14, 2024
34cff52
fix: disable transaction type filter when there there is 0 transactions
shahin-hq Nov 15, 2024
19db154
Merge branch 'develop' into fix/make-txs-table-smoother
shahin-hq Nov 15, 2024
eab50a1
fix: disable transaction type filter when there there is 0 transactions
shahin-hq Nov 15, 2024
3594260
add tests
shahin-hq Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/domains/transaction/components/Transactions/Transactions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ describe("Transactions", () => {
expect(within(screen.getByTestId("TransactionTable")).getAllByTestId("TableRow")).toHaveLength(15),
);

const button = screen.getAllByRole("button", { name: /Type/ })[0];
let button = screen.getAllByRole("button", { name: /Type/ })[0];

expect(button).toBeInTheDocument();

Expand All @@ -235,6 +235,9 @@ describe("Transactions", () => {
await userEvent.click(options.at(-1));

await expect(screen.findByTestId("EmptyBlock")).resolves.toBeVisible();

button = screen.getAllByRole("button", { name: /Type/ })[0];
expect(button).not.toBeDisabled();
});

it("should open detail modal on transaction row click", async () => {
Expand Down
10 changes: 10 additions & 0 deletions src/domains/transaction/components/Transactions/Transactions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const Transactions = memo(function Transactions({
selectedTransactionTypes,
fetchMore,
hasEmptyResults,
hasFilter,
hasMore,
} = useProfileTransactions({ limit: 30, profile, wallets });

Expand Down Expand Up @@ -148,6 +149,14 @@ export const Transactions = memo(function Transactions({
return !hasEmptyResults || hasFilter || hasMore;
}, [activeMode, hasEmptyResults, activeTransactionType, isLoadingTransactions, hasMore]);

const enableFilter = useMemo(() => {
if (isLoadingTransactions || hasFilter) {
Copy link
Contributor Author

@shahin-hq shahin-hq Nov 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to enable filter when transactions are loading or when a filter is applied - I mean by that is initially we have all possible options selected this should be understood as no filters applied, when user picks a filter it means there was at least one transaction to display, so we shouldn't disable the filter.

return true;
}

return !hasEmptyResults || hasMore;
}, [hasEmptyResults, hasMore, isLoadingTransactions, hasFilter]);

if (!isVisible) {
return <></>;
}
Expand Down Expand Up @@ -221,6 +230,7 @@ export const Transactions = memo(function Transactions({
wallets={wallets}
onSelect={filterChangeHandler}
selectedTransactionTypes={selectedTransactionTypes}
isDisabled={!enableFilter}
/>
</div>

Expand Down
3 changes: 2 additions & 1 deletion src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20877,8 +20877,9 @@ exports[`Transactions > should update wallet filters 1`] = `
data-testid="dropdown__toggle"
>
<button
class="space-x-2 relative items-center inline-flex justify-center font-semibold text-center transition-colors-shadow duration-100 ease-linear outline-none rounded focus:outline-none focus:ring-2 focus:ring-theme-primary-400 disabled:cursor-not-allowed dark:bg-theme-secondary-800 dark:text-theme-secondary-200 bg-theme-primary-100 text-theme-primary-600 hover:bg-theme-primary-800 green:hover:bg-theme-primary-700 hover:text-white dark:hover:bg-theme-primary-500 w-full px-4 py-1.5 text-base sm:w-fit"
class="space-x-2 relative items-center inline-flex justify-center font-semibold text-center transition-colors-shadow duration-100 ease-linear outline-none rounded focus:outline-none focus:ring-2 focus:ring-theme-primary-400 disabled:cursor-not-allowed disabled:bg-theme-secondary-200 disabled:text-theme-secondary-400 dark:disabled:bg-theme-secondary-800 dark:disabled:text-theme-secondary-700 w-full px-4 py-1.5 text-base sm:w-fit"
data-testid="CollapseToggleButton"
disabled=""
type="button"
>
<div
Expand Down
1 change: 1 addition & 0 deletions src/domains/transaction/hooks/use-profile-transactions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,7 @@ export const useProfileTransactions = ({ profile, wallets, limit = 30 }: Profile
fetchMore,
fetchTransactions,
hasEmptyResults,
hasFilter: (selectedTransactionTypes?.length ?? 0) < allTransactionTypes.length,
hasMore,
isLoadingMore,
isLoadingTransactions,
Expand Down
Loading