From 721cd83218b8b25d77a416b154bfb7683c40cee5 Mon Sep 17 00:00:00 2001 From: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com> Date: Wed, 22 May 2024 14:02:05 +0800 Subject: [PATCH] fix: use the data object returned from useExchangeRates instead of subscribeRates (#74) --- .../AdvertsTableRow/AdvertsTableRow.tsx | 17 +++++++++++----- src/components/BuySellForm/BuySellForm.tsx | 17 +++++++++++----- src/components/FloatingRate/FloatingRate.tsx | 20 ++++++++++++------- .../my-ads/components/AdSummary/AdSummary.tsx | 17 +++++++++++----- .../MyAds/MyAdsTableRow/MyAdsTableRow.tsx | 19 +++++++++++++----- 5 files changed, 63 insertions(+), 27 deletions(-) diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.tsx b/src/components/AdvertsTableRow/AdvertsTableRow.tsx index 2f1f9449..f7b8abee 100644 --- a/src/components/AdvertsTableRow/AdvertsTableRow.tsx +++ b/src/components/AdvertsTableRow/AdvertsTableRow.tsx @@ -1,7 +1,7 @@ import { Fragment, memo, useEffect, useRef } from 'react'; import clsx from 'clsx'; import { useHistory, useLocation } from 'react-router-dom'; -import { TAdvertsTableRowRenderer, TCurrency, TExchangeRate } from 'types'; +import { TAdvertsTableRowRenderer, TCurrency } from 'types'; import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components'; import { NicknameModal } from '@/components/Modals'; import { ADVERTISER_URL, BUY_SELL } from '@/constants'; @@ -18,7 +18,7 @@ const BASE_CURRENCY = 'USD'; const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => { const { hideModal, isModalOpenFor, showModal } = useModalManager(); - const { subscribeRates } = useExchangeRates(); + const { data: exchangeRateData, subscribeRates } = useExchangeRates(); const { isDesktop, isMobile } = useDevice(); const history = useHistory(); const location = useLocation(); @@ -29,7 +29,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => { const { data: poiPoaData } = usePoiPoaStatus(); const { isPoaVerified, isPoiVerified } = poiPoaData || {}; - const exchangeRateRef = useRef(null); + const exchangeRateRef = useRef(undefined); const { account_currency, @@ -48,7 +48,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => { useEffect(() => { if (local_currency) { - exchangeRateRef.current = subscribeRates({ + subscribeRates({ base_currency: BASE_CURRENCY, target_currencies: [local_currency], }); @@ -56,12 +56,19 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [local_currency]); + useEffect(() => { + if (exchangeRateData?.exchange_rates?.rates) { + exchangeRateRef.current = exchangeRateData?.exchange_rates?.rates?.[local_currency]; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [exchangeRateData]); + const Container = isMobile ? 'div' : Fragment; const { completed_orders_count, id, is_online, name, rating_average, rating_count } = advertiser_details || {}; const { displayEffectiveRate } = generateEffectiveRate({ - exchangeRate: exchangeRateRef.current?.rates?.[local_currency], + exchangeRate: exchangeRateRef.current, localCurrency: local_currency as TCurrency, marketRate: Number(effective_rate), price: Number(price_display), diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx index f4439c91..1ff50001 100644 --- a/src/components/BuySellForm/BuySellForm.tsx +++ b/src/components/BuySellForm/BuySellForm.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'; import { Control, FieldValues, useForm } from 'react-hook-form'; import { useHistory } from 'react-router-dom'; -import { TCurrency, TExchangeRate, THooks, TPaymentMethod } from 'types'; +import { TCurrency, THooks, TPaymentMethod } from 'types'; import { BUY_SELL, ORDERS_URL, RATE_TYPE } from '@/constants'; import { api } from '@/hooks'; import { useIsAdvertiser } from '@/hooks/custom-hooks'; @@ -47,7 +47,7 @@ const getAdvertiserMaxLimit = ( const BASE_CURRENCY = 'USD'; const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProps) => { - const { subscribeRates } = useExchangeRates(); + const { data: exchangeRatesData, subscribeRates } = useExchangeRates(); const { data: advertInfo } = api.advert.useGet({ id: advertId }); const { data: orderCreatedInfo, isSuccess, mutate } = api.order.useCreate(); const { data: paymentMethods } = api.paymentMethods.useGet(); @@ -67,7 +67,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp const [calculatedRate, setCalculatedRate] = useState('0'); const [initialAmount, setInitialAmount] = useState('0'); - const exchangeRateRef = useRef(null); + const exchangeRateRef = useRef(undefined); const { account_currency, @@ -96,7 +96,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp useEffect(() => { if (local_currency) { - exchangeRateRef.current = subscribeRates({ + subscribeRates({ base_currency: BASE_CURRENCY, target_currencies: [local_currency], }); @@ -104,8 +104,15 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp // eslint-disable-next-line react-hooks/exhaustive-deps }, [local_currency]); + useEffect(() => { + if (exchangeRatesData?.exchange_rates?.rates) { + exchangeRateRef.current = exchangeRatesData?.exchange_rates.rates?.[local_currency]; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [exchangeRatesData]); + const { displayEffectiveRate, effectiveRate } = generateEffectiveRate({ - exchangeRate: exchangeRateRef.current?.rates?.[local_currency], + exchangeRate: exchangeRateRef.current, localCurrency: local_currency as TCurrency, marketRate: Number(effective_rate), price: Number(price_display), diff --git a/src/components/FloatingRate/FloatingRate.tsx b/src/components/FloatingRate/FloatingRate.tsx index 0ccb962f..8c26c45f 100644 --- a/src/components/FloatingRate/FloatingRate.tsx +++ b/src/components/FloatingRate/FloatingRate.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, FocusEvent, useEffect, useRef } from 'react'; -import { TCurrency, TExchangeRate } from 'types'; +import { TCurrency } from 'types'; import { api } from '@/hooks'; import { mobileOSDetect, percentOf, removeTrailingZeros, roundOffDecimal, setDecimalPlaces } from '@/utils'; import { useExchangeRates } from '@deriv-com/api-hooks'; @@ -28,25 +28,31 @@ const FloatingRate = ({ onChange, value, }: TFloatingRate) => { - const { subscribeRates } = useExchangeRates(); + const { data: exchangeRateData, subscribeRates } = useExchangeRates(); const { isMobile } = useDevice(); const { data: p2pSettings } = api.settings.useSettings(); const overrideExchangeRate = p2pSettings?.override_exchange_rate; - const exchangeRateRef = useRef(null); + const exchangeRateRef = useRef(undefined); useEffect(() => { if (localCurrency) { - exchangeRateRef.current = subscribeRates({ + subscribeRates({ base_currency: 'USD', target_currencies: [localCurrency], }); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [localCurrency]); - const marketRate = overrideExchangeRate - ? Number(overrideExchangeRate) - : exchangeRateRef.current?.rates?.[localCurrency] ?? 1; + useEffect(() => { + if (exchangeRateData?.exchange_rates?.rates) { + exchangeRateRef.current = exchangeRateData?.exchange_rates?.rates?.[localCurrency]; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [exchangeRateData]); + + const marketRate = overrideExchangeRate ? Number(overrideExchangeRate) : exchangeRateRef.current ?? 1; const os = mobileOSDetect(); const marketFeed = value ? percentOf(marketRate, Number(value)) : marketRate; const decimalPlace = setDecimalPlaces(marketFeed, 6); diff --git a/src/pages/my-ads/components/AdSummary/AdSummary.tsx b/src/pages/my-ads/components/AdSummary/AdSummary.tsx index 5a6c9ba5..5773cb10 100644 --- a/src/pages/my-ads/components/AdSummary/AdSummary.tsx +++ b/src/pages/my-ads/components/AdSummary/AdSummary.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef } from 'react'; -import { TCurrency, TExchangeRate } from 'types'; +import { TCurrency } from 'types'; import { AD_ACTION, RATE_TYPE } from '@/constants'; import { api } from '@/hooks'; import { useQueryString } from '@/hooks/custom-hooks'; @@ -33,7 +33,7 @@ const AdSummary = ({ const { queryString } = useQueryString(); const adOption = queryString.formAction; const { data: p2pSettings } = api.settings.useSettings(); - const { subscribeRates } = useExchangeRates(); + const { data: exchangeRatesData, subscribeRates } = useExchangeRates(); const overrideExchangeRate = p2pSettings?.override_exchange_rate; const marketRateType = adOption === AD_ACTION.CREATE ? rateType : adRateType; @@ -43,11 +43,11 @@ const AdSummary = ({ let displayPriceRate: number | string = ''; let displayTotal = ''; - const exchangeRateRef = useRef(null); + const exchangeRateRef = useRef(undefined); useEffect(() => { if (localCurrency) { - exchangeRateRef.current = subscribeRates({ + subscribeRates({ base_currency: currency, target_currencies: [localCurrency], }); @@ -55,7 +55,14 @@ const AdSummary = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [currency, localCurrency]); - const exchangeRate = exchangeRateRef?.current?.rates?.[localCurrency]; + useEffect(() => { + if (exchangeRatesData?.exchange_rates?.rates) { + exchangeRateRef.current = exchangeRatesData.exchange_rates?.rates?.[localCurrency]; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [exchangeRatesData]); + + const exchangeRate = exchangeRateRef?.current; const marketRate = overrideExchangeRate ? Number(overrideExchangeRate) : exchangeRate; const marketFeed = marketRateType === RATE_TYPE.FLOAT ? marketRate : null; const summaryTextSize = isMobile ? 'md' : 'sm'; diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx index fc2ef96a..15d0a3c7 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx @@ -1,6 +1,6 @@ import { memo, useEffect, useRef, useState } from 'react'; import clsx from 'clsx'; -import { TCurrency, TExchangeRate, TLocalize } from 'types'; +import { TCurrency, TLocalize } from 'types'; import { PaymentMethodLabel, PopoverDropdown } from '@/components'; import { AD_ACTION, ADVERT_TYPE, RATE_TYPE } from '@/constants'; import { useFloatingRate } from '@/hooks/custom-hooks'; @@ -39,7 +39,7 @@ type TMyAdsTableProps = Omit { const { localize } = useTranslations(); const { isMobile } = useDevice(); - const { subscribeRates } = useExchangeRates(); + const { data: exchangeRatesData, subscribeRates } = useExchangeRates(); const { account_currency: accountCurrency = '', @@ -66,17 +66,25 @@ const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps const isFloatingRate = rateType === RATE_TYPE.FLOAT; - const exchangeRateRef = useRef(null); + const exchangeRateRef = useRef(undefined); useEffect(() => { if (localCurrency) { - exchangeRateRef.current = subscribeRates({ + subscribeRates({ base_currency: BASE_CURRENCY, target_currencies: [localCurrency], }); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [localCurrency]); + useEffect(() => { + if (exchangeRatesData?.exchange_rates?.rates) { + exchangeRateRef.current = exchangeRatesData.exchange_rates?.rates?.[localCurrency ?? '']; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [exchangeRatesData]); + const [showAlertIcon, setShowAlertIcon] = useState(false); const isAdvertListed = isListed && !isBarred; const adPauseColor = isAdvertListed ? 'general' : 'less-prominent'; @@ -85,11 +93,12 @@ const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps const isRowDisabled = !isActive || isBarred || !isListed; const isAdActive = !!isActive && !isBarred; - const exchangeRate = exchangeRateRef.current?.rates?.[localCurrency ?? '']; + const exchangeRate = exchangeRateRef.current; const enableActionPoint = currentRateType !== rateType; useEffect(() => { setShowAlertIcon(enableActionPoint || shouldShowTooltipIcon(visibilityStatus) || !isListed); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [enableActionPoint, isListed, shouldShowTooltipIcon]); const { displayEffectiveRate } = generateEffectiveRate({