Skip to content

Commit

Permalink
[FEAT] : Improve Market for Backend (#7363)
Browse files Browse the repository at this point in the history
* [FEAT] : Improve Market for Backend

* Sort ids

* Lowercase in hook
  • Loading branch information
mcayuelas-ledger authored Jul 22, 2024
1 parent aa0c629 commit 3164745
Show file tree
Hide file tree
Showing 8 changed files with 43 additions and 10 deletions.
5 changes: 5 additions & 0 deletions .changeset/cyan-melons-fetch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ledgerhq/live-common": patch
---

Improve Search for Market when >=2 chars
5 changes: 5 additions & 0 deletions .changeset/polite-bananas-relax.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"live-mobile": patch
---

Lowercase search on market
5 changes: 5 additions & 0 deletions .changeset/rare-windows-rhyme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"ledger-live-desktop": patch
---

Lower case search + add debounce on Market Search
2 changes: 1 addition & 1 deletion apps/ledger-live-desktop/src/renderer/reducers/market.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const initialState: MarketState = {
search: "",
liveCompatible: false,
page: 1,
counterCurrency: "usd",
counterCurrency: "USD",
},
currentPage: 1,
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useDebounce } from "@ledgerhq/live-common/hooks/useDebounce";
import { Flex, SearchInput } from "@ledgerhq/react-ui";

import React from "react";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { track } from "~/renderer/analytics/segment";
import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";

const SearchContainer = styled(Flex).attrs({ flexShrink: "1" })`
Expand All @@ -18,12 +20,27 @@ type Props = {

function SearchInputComponent({ search, updateSearch }: Props) {
const { t } = useTranslation();

const [inputSearch, setInputSearch] = useState(search);
const debouncedSearch = useDebounce(inputSearch, 300);

useEffect(() => {
track("Page Market Query", {
currencyName: debouncedSearch,
});
updateSearch(debouncedSearch ? debouncedSearch.trim() : "");
}, [debouncedSearch, updateSearch]);

useEffect(() => {
setInputSearch(search);
}, [search]);

return (
<SearchContainer>
<SearchInput
data-test-id="market-search-input"
value={search}
onChange={updateSearch}
value={inputSearch}
onChange={setInputSearch}
placeholder={t("common.search")}
clearable
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/ledger-live-mobile/src/reducers/market.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const INITIAL_STATE: MarketState = {
search: "",
liveCompatible: false,
page: 1,
counterCurrency: "usd",
counterCurrency: "USD",
},
marketFilterByStarredCurrencies: false,
marketCurrentPage: 1,
Expand Down
6 changes: 3 additions & 3 deletions libs/ledger-live-common/src/market/api/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ export async function fetchList({
pageSize: limit,
to: counterCurrency,
sort: getSortParam(order, range),
...(search.length >= 1 && { filter: search }),
...(starred.length > 0 && { ids: starred.join(",") }),
...(liveCoinsList.length > 1 && { ids: liveCoinsList.join(",") }),
...(search.length >= 2 && { filter: search }),
...(starred.length > 0 && { ids: starred.sort().join(",") }),
...(liveCoinsList.length > 1 && { ids: liveCoinsList.sort().join(",") }),
...([Order.topLosers, Order.topGainers].includes(order) && { top: 100 }),
},
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export const useSupportedCurrencies = () =>
});

export function useMarketData(props: MarketListRequestParams): MarketListRequestResult {
const search = props.search?.toLowerCase() ?? "";
return useQueries({
queries: Array.from({ length: props.page ?? 1 }, (_, i) => i).map(page => ({
queryKey: [
Expand All @@ -93,15 +94,15 @@ export function useMarketData(props: MarketListRequestParams): MarketListRequest
props.order,
{
counterCurrency: props.counterCurrency,
...(props.search && props.search?.length >= 1 && { search: props.search }),
...(props.search && props.search?.length >= 2 && { search: search }),
...(props.starred && props.starred?.length >= 1 && { starred: props.starred }),
...(props.liveCoinsList &&
props.liveCoinsList?.length >= 1 && { liveCoinsList: props.liveCoinsList }),
...(props.order &&
[Order.topLosers, Order.topGainers].includes(props.order) && { range: props.range }),
},
],
queryFn: () => fetchList({ ...props, page }),
queryFn: () => fetchList({ ...props, page, search }),
select: (data: MarketItemResponse[]) => ({
formattedData: currencyFormatter(data, cryptoCurrenciesList),
page,
Expand Down

0 comments on commit 3164745

Please sign in to comment.