From 78b1b1de43bb5f00262cceee81f5a6d748bd92f8 Mon Sep 17 00:00:00 2001 From: Danh Date: Sat, 7 Oct 2023 19:45:24 +0700 Subject: [PATCH] done convert rtk query --- src/components/Announcement/helper.ts | 19 ------------- src/components/Announcement/index.tsx | 3 +- src/components/ProtectedRoute.tsx | 14 +++------- src/constants/index.ts | 3 ++ src/hooks/useInvalidateTags.ts | 28 +++++++++++++++++++ src/pages/Campaign/CampaignContent.tsx | 14 ++++------ .../PrivateAnnouncement.tsx | 2 +- src/services/campaign.ts | 4 ++- 8 files changed, 46 insertions(+), 41 deletions(-) create mode 100644 src/hooks/useInvalidateTags.ts diff --git a/src/components/Announcement/helper.ts b/src/components/Announcement/helper.ts index 1dd590f0cb..bf3aa0f8cd 100644 --- a/src/components/Announcement/helper.ts +++ b/src/components/Announcement/helper.ts @@ -1,13 +1,11 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { useCallback } from 'react' import { useNavigate } from 'react-router-dom' -import AnnouncementApi from 'services/announcement' import { AnnouncementTemplatePopup, PopupContentAnnouncement, PopupItemType } from 'components/Announcement/type' import { TIMES_IN_SECS } from 'constants/index' import { useActiveWeb3React } from 'hooks' import { useChangeNetwork } from 'hooks/web3/useChangeNetwork' -import { useAppDispatch } from 'state/hooks' const LsKey = 'ack-announcements' export const getAnnouncementsAckMap = () => JSON.parse(localStorage[LsKey] || '{}') @@ -86,20 +84,3 @@ export const useNavigateToUrl = () => { [changeNetwork, currentChain, redirect], ) } - -export const useInvalidateTags = (reducerPath: string) => { - const dispatch = useAppDispatch() - return useCallback( - (tag: string | string[]) => { - dispatch({ - type: `${reducerPath}/invalidateTags`, - payload: Array.isArray(tag) ? tag : [tag], - }) - }, - [dispatch, reducerPath], - ) -} - -export const useInvalidateTagAnnouncement = () => { - return useInvalidateTags(AnnouncementApi.reducerPath) -} diff --git a/src/components/Announcement/index.tsx b/src/components/Announcement/index.tsx index 3abf63be97..dd56ff5b27 100644 --- a/src/components/Announcement/index.tsx +++ b/src/components/Announcement/index.tsx @@ -10,13 +10,14 @@ import styled, { css } from 'styled-components' import AnnouncementView, { Tab } from 'components/Announcement/AnnoucementView' import DetailAnnouncementPopup from 'components/Announcement/Popups/DetailAnnouncementPopup' -import { formatNumberOfUnread, useInvalidateTagAnnouncement } from 'components/Announcement/helper' +import { formatNumberOfUnread } from 'components/Announcement/helper' import { Announcement, PrivateAnnouncement } from 'components/Announcement/type' import NotificationIcon from 'components/Icons/NotificationIcon' import MenuFlyout from 'components/MenuFlyout' import Modal from 'components/Modal' import { RTK_QUERY_TAGS } from 'constants/index' import useInterval from 'hooks/useInterval' +import { useInvalidateTagAnnouncement } from 'hooks/useInvalidateTags' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import { ApplicationModal } from 'state/application/actions' import { useDetailAnnouncement, useModalOpen, useToggleNotificationCenter } from 'state/application/hooks' diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx index ff131bba05..326c38c5ed 100644 --- a/src/components/ProtectedRoute.tsx +++ b/src/components/ProtectedRoute.tsx @@ -3,9 +3,8 @@ import { Navigate } from 'react-router-dom' import LocalLoader from 'components/LocalLoader' import { RTK_QUERY_TAGS } from 'constants/index' -import kyberAIapi from 'pages/TrueSightV2/hooks/useKyberAIData' +import { useInvalidateTagKyberAi } from 'hooks/useInvalidateTags' import { useSessionInfo } from 'state/authen/hooks' -import { useAppDispatch } from 'state/hooks' import { useIsWhiteListKyberAI } from 'state/user/hooks' type Props = { @@ -33,20 +32,15 @@ export const ProtectedRouteKyberAI = ({ const { userInfo } = useSessionInfo() const loadedPage = useRef(false) const canAccessPage = isWhiteList || waitUtilAuthenEndOnly - const dispatch = useAppDispatch() + const invalidateTags = useInvalidateTagKyberAi() useEffect(() => { // change account sign in => refresh participant info try { refetch() - dispatch( - kyberAIapi.util.invalidateTags([ - RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI, - RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI, - ]), - ) + invalidateTags([RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI, RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI]) } catch (error) {} - }, [userInfo?.identityId, refetch, dispatch]) + }, [userInfo?.identityId, refetch, invalidateTags]) if (loading && !loadedPage.current) return if (!canAccessPage) return diff --git a/src/constants/index.ts b/src/constants/index.ts index 23d11e15db..74b85ba4cc 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -306,6 +306,9 @@ export const RTK_QUERY_TAGS = { GET_WATCHLIST_INFO_KYBER_AI: 'GET_WATCHLIST_INFO_KYBER_AI', GET_TOKEN_OVERVIEW_KYBER_AI: 'GET_TOKEN_OVERVIEW_KYBER_AI', GET_TOKEN_LIST_KYBER_AI: 'GET_TOKEN_LIST_KYBER_AI', + + // campaign + GET_LEADER_BOARD_CAMPAIGN: 'GET_TOKEN_LEADERBOARD_CAMPAIGN', } export const TRANSACTION_STATE_DEFAULT: TransactionFlowState = { diff --git a/src/hooks/useInvalidateTags.ts b/src/hooks/useInvalidateTags.ts new file mode 100644 index 0000000000..4b9d99bdf8 --- /dev/null +++ b/src/hooks/useInvalidateTags.ts @@ -0,0 +1,28 @@ +import { useCallback } from 'react' +import announcementApi from 'services/announcement' +import campaignApi from 'services/campaign' + +import kyberAIApi from 'pages/TrueSightV2/hooks/useKyberAIData' +import { useAppDispatch } from 'state/hooks' + +const useInvalidateTags = (api: any) => { + const dispatch = useAppDispatch() + return useCallback( + (tag: string | string[]) => { + dispatch(api.util.invalidateTags(Array.isArray(tag) ? tag : [tag])) + }, + [dispatch, api], + ) +} + +export const useInvalidateTagAnnouncement = () => { + return useInvalidateTags(announcementApi) +} + +export const useInvalidateTagCampaign = () => { + return useInvalidateTags(campaignApi) +} + +export const useInvalidateTagKyberAi = () => { + return useInvalidateTags(kyberAIApi) +} diff --git a/src/pages/Campaign/CampaignContent.tsx b/src/pages/Campaign/CampaignContent.tsx index 01fc4db294..74484ed396 100644 --- a/src/pages/Campaign/CampaignContent.tsx +++ b/src/pages/Campaign/CampaignContent.tsx @@ -17,8 +17,10 @@ import ProgressBar from 'components/ProgressBar' import ShareModal from 'components/ShareModal' import { MouseoverTooltip, TextDashed } from 'components/Tooltip' import YourCampaignTransactionsModal from 'components/YourCampaignTransactionsModal' +import { RTK_QUERY_TAGS } from 'constants/index' import { useActiveWeb3React, useWeb3React } from 'hooks' import useInterval from 'hooks/useInterval' +import { useInvalidateTagCampaign } from 'hooks/useInvalidateTags' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import CampaignActions from 'pages/Campaign/CampaignActions' @@ -370,18 +372,12 @@ export default function Campaign({ refreshListCampaign, ...props }: CampaignProp true, ) + const invalidateTags = useInvalidateTagCampaign() useEffect(() => { if (campaignsRefreshIn === 0 && selectedCampaign) { - // todo - // mutate([ - // selectedCampaign, - // SWR_KEYS.getLeaderboard(selectedCampaign.id), - // selectedCampaignLeaderboardPageNumber, - // selectedCampaignLeaderboardLookupAddress, - // account, - // ]) + invalidateTags(RTK_QUERY_TAGS.GET_LEADER_BOARD_CAMPAIGN) } - }, [campaignsRefreshIn, selectedCampaign]) + }, [campaignsRefreshIn, selectedCampaign, invalidateTags]) if (campaigns.length === 0 && loadingCampaignData) { return diff --git a/src/pages/NotificationCenter/PrivateAnnouncement.tsx b/src/pages/NotificationCenter/PrivateAnnouncement.tsx index 92e0f9c352..3fab236c2e 100644 --- a/src/pages/NotificationCenter/PrivateAnnouncement.tsx +++ b/src/pages/NotificationCenter/PrivateAnnouncement.tsx @@ -11,10 +11,10 @@ import styled from 'styled-components' import { PRIVATE_ANN_TITLE } from 'components/Announcement/PrivateAnnoucement' import InboxItemNotificationCenter from 'components/Announcement/PrivateAnnoucement/NotificationCenter' -import { useInvalidateTagAnnouncement } from 'components/Announcement/helper' import { PrivateAnnouncement, PrivateAnnouncementType } from 'components/Announcement/type' import { getAnnouncementsTemplateIds } from 'constants/env' import { useActiveWeb3React } from 'hooks' +import { useInvalidateTagAnnouncement } from 'hooks/useInvalidateTags' import DeleteAllAlertsButton from 'pages/NotificationCenter/DeleteAllAlertsButton' import NoData from 'pages/NotificationCenter/NoData' import CommonPagination from 'pages/NotificationCenter/PriceAlerts/CommonPagination' diff --git a/src/services/campaign.ts b/src/services/campaign.ts index 5329927895..673f60dbeb 100644 --- a/src/services/campaign.ts +++ b/src/services/campaign.ts @@ -5,7 +5,7 @@ import { parseUnits } from 'ethers/lib/utils' import JSBI from 'jsbi' import { CAMPAIGN_BASE_URL } from 'constants/env' -import { RESERVE_USD_DECIMALS } from 'constants/index' +import { RESERVE_USD_DECIMALS, RTK_QUERY_TAGS } from 'constants/index' import { CampaignData, CampaignLeaderboard, @@ -201,6 +201,7 @@ const formatTxs = (data: any[]) => { const campaignApi = createApi({ reducerPath: 'campaignApi', baseQuery: fetchBaseQuery({ baseUrl: `${CAMPAIGN_BASE_URL}/api/v1/campaigns` }), + tagTypes: [RTK_QUERY_TAGS.GET_LEADER_BOARD_CAMPAIGN], endpoints: builder => ({ getCampaigns: builder.query({ query: params => ({ @@ -218,6 +219,7 @@ const campaignApi = createApi({ url: `/${campaignId}/leaderboard`, }), transformResponse: (data: any) => formatLeaderboardData(data?.data), + providesTags: [RTK_QUERY_TAGS.GET_LEADER_BOARD_CAMPAIGN], }), getLuckyWinners: builder.query< any,