Fix/market cell bug OK-17507 & ok-17539 (#2594)

OneKeyHQ · Feb 20, 2023 · 6ba8165 · 6ba8165
1 parent 858c1b7
commit 6ba8165
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 16 deletions.
diff --git a/packages/components/src/hooks/useDropdownPosition.ts b/packages/components/src/hooks/useDropdownPosition.ts
@@ -12,7 +12,7 @@ import { ModalRefStore } from '../Modal';
 import type { IDropdownPosition, IDropdownProps, SelectProps } from '../Select';
 import type { View } from 'react-native';
 
-interface UseDropdownProps {
+export interface UseDropdownProps {
   dropdownPosition?: IDropdownPosition;
   triggerEle?: SelectProps['triggerEle'];
   visible?: boolean;

diff --git a/packages/kit-bg/src/services/ServiceMarket.ts b/packages/kit-bg/src/services/ServiceMarket.ts
@@ -1,3 +1,5 @@
+import { debounce } from 'lodash';
+
 import type { ISimpleSearchHistoryToken } from '@onekeyhq/engine/src/dbs/simple/entity/SimpleDbEntityMarket';
 import simpleDb from '@onekeyhq/engine/src/dbs/simple/simpleDb';
 import { formatServerToken } from '@onekeyhq/engine/src/managers/token';
@@ -32,6 +34,7 @@ import { getDefaultLocale } from '@onekeyhq/kit/src/utils/locale';
 import {
   backgroundClass,
   backgroundMethod,
+  bindThis,
 } from '@onekeyhq/shared/src/background/backgroundDecorators';
 import { fetchData } from '@onekeyhq/shared/src/background/backgroundUtils';
 
@@ -80,7 +83,28 @@ export default class ServiceMarket extends ServiceBase {
     this.backgroundApi.dispatch(updateSelectedCategory(category.categoryId));
   }
 
+  // fix desktop quickly click the Cancel Like button to trigger the change of the like favorites ids, resulting in a pull action.
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  _fetchMarketListDebounced = debounce(this.fetchMarketList, 1200, {
+    leading: false,
+    trailing: true,
+  });
+
   @backgroundMethod()
+  async fetchMarketListDebounced({
+    categoryId,
+    ids,
+    sparkline,
+  }: {
+    categoryId?: string;
+    ids?: string;
+    sparkline?: boolean;
+  }) {
+    await this._fetchMarketListDebounced({ categoryId, ids, sparkline });
+  }
+
+  @bindThis()
   async fetchMarketList({
     categoryId,
     ids,
@@ -247,7 +271,7 @@ export default class ServiceMarket extends ServiceBase {
     );
     // updata tokenItem for redux
     if (data.length > 0) {
-      this.fetchMarketList({
+      this.fetchMarketListDebounced({
         ids: data.join(','),
         sparkline: false,
       });

diff --git a/packages/kit/src/store/reducers/market.ts b/packages/kit/src/store/reducers/market.ts
@@ -234,8 +234,9 @@ export const MarketSlicer = createSlice({
           if (!cacheCategory.coingeckoIds) {
             cacheCategory.coingeckoIds = fetchCoingeckoIds;
           } else if (
+            // fix local favorite id  go to void，so favorite category's ids need update
             // ban favorite category coingecko ids change
-            cacheCategory.categoryId !== MARKET_FAVORITES_CATEGORYID &&
+            // cacheCategory.categoryId !== MARKET_FAVORITES_CATEGORYID &&
             !equalStringArr(cacheCategory.coingeckoIds, fetchCoingeckoIds) &&
             state.listSort === null
           ) {

diff --git a/packages/kit/src/views/Market/Components/MarketList/MarketCellMoreMenu.tsx b/packages/kit/src/views/Market/Components/MarketList/MarketCellMoreMenu.tsx
@@ -142,6 +142,7 @@ export const showMarketCellMoreMenu = (
       triggerEle={triggerEle}
       closeOverlay={closeOverlay}
       modalProps={modalProps}
+      useDropdownProps={{ autoAdjust: true }}
     >
       <MarketCellMoreMenu closeOverlay={closeOverlay} token={token} />
     </OverlayPanel>

diff --git a/packages/kit/src/views/Market/hooks/useMarketList.ts b/packages/kit/src/views/Market/hooks/useMarketList.ts
@@ -65,14 +65,14 @@ export const useMarketList = ({
       checkFavoritesFetch
     ) {
       if (!listSort) {
-        backgroundApiProxy.serviceMarket.fetchMarketList({
+        backgroundApiProxy.serviceMarket.fetchMarketListDebounced({
           categoryId: selectedCategory.categoryId,
           ids: coingeckoIds,
           sparkline: !isVerticalLlayout && !isMidLayout,
         });
       }
       timer = setInterval(() => {
-        backgroundApiProxy.serviceMarket.fetchMarketList({
+        backgroundApiProxy.serviceMarket.fetchMarketListDebounced({
           categoryId: selectedCategory.categoryId,
           ids: coingeckoIds,
           sparkline: !isVerticalLlayout && !isMidLayout,
@@ -98,7 +98,7 @@ export const useMarketList = ({
   const onRefreshingMarketList = useCallback(async () => {
     await backgroundApiProxy.serviceMarket.fetchMarketCategorys();
     if (selectedCategory) {
-      await backgroundApiProxy.serviceMarket.fetchMarketList({
+      await backgroundApiProxy.serviceMarket.fetchMarketListDebounced({
         categoryId: selectedCategory.categoryId,
         ids: coingeckoIds,
         sparkline: !isVerticalLlayout && !isMidLayout,

diff --git a/packages/kit/src/views/Market/hooks/useMarketSearch.ts b/packages/kit/src/views/Market/hooks/useMarketSearch.ts
@@ -43,7 +43,7 @@ export const useMarketSearchSelectedCategory = () => {
 
   useEffect(() => {
     if (searchTabCategoryId) {
-      backgroundApiProxy.serviceMarket.fetchMarketList({
+      backgroundApiProxy.serviceMarket.fetchMarketListDebounced({
         categoryId: searchTabCategoryId,
         sparkline: false,
       });

diff --git a/packages/kit/src/views/Market/hooks/useMarketToken.ts b/packages/kit/src/views/Market/hooks/useMarketToken.ts
@@ -70,7 +70,7 @@ export const useMarketTokenItem = ({
   useEffect(() => {
     if (coingeckoId?.length) {
       if (!isList && !marketTokenItem) {
-        backgroundApiProxy.serviceMarket.fetchMarketList({
+        backgroundApiProxy.serviceMarket.fetchMarketListDebounced({
           ids: coingeckoId,
           sparkline: !isVertical && !isMidLayout,
         });

diff --git a/packages/kit/src/views/Overlay/OverlayPanel.tsx b/packages/kit/src/views/Overlay/OverlayPanel.tsx
@@ -11,12 +11,10 @@ import {
   useSafeAreaInsets,
   useThemeValue,
 } from '@onekeyhq/components';
+import type { UseDropdownProps } from '@onekeyhq/components/src/hooks/useDropdownPosition';
 import { useDropdownPosition } from '@onekeyhq/components/src/hooks/useDropdownPosition';
 import type { ModalProps } from '@onekeyhq/components/src/Modal';
-import type {
-  IDropdownPosition,
-  SelectProps,
-} from '@onekeyhq/components/src/Select';
+import type { SelectProps } from '@onekeyhq/components/src/Select';
 import { CloseBackDrop } from '@onekeyhq/components/src/Select';
 
 import type { IBoxProps } from 'native-base';
@@ -70,13 +68,13 @@ const DesktopDropdown: FC<{
   closeOverlay: () => void;
   triggerEle?: SelectProps['triggerEle'];
   dropdownStyle?: IBoxProps;
-  dropdownPosition?: IDropdownPosition;
+  useDropdownProps?: UseDropdownProps;
 }> = ({
   closeOverlay,
   children,
   triggerEle,
   dropdownStyle,
-  dropdownPosition,
+  useDropdownProps,
 }) => {
   const translateY = 2;
   const contentRef = useRef();
@@ -86,8 +84,9 @@ const DesktopDropdown: FC<{
       triggerEle,
       visible: true,
       translateY,
-      dropdownPosition: dropdownPosition ?? 'right',
+      dropdownPosition: 'right',
       autoAdjust: false,
+      ...useDropdownProps,
     });
   return (
     <Box position="absolute" w="full" h="full">
@@ -131,7 +130,7 @@ export const OverlayPanel: FC<{
   triggerEle?: SelectProps['triggerEle'];
   modalProps?: ModalProps;
   modalLizeProps?: ModalizeProps;
-  dropdownPosition?: IDropdownPosition;
+  useDropdownProps?: UseDropdownProps;
   dropdownStyle?: IBoxProps;
 }> = (props) => {
   const isVerticalLayout = useIsVerticalLayout();