diff --git a/src/pages/Campaign/index.tsx b/src/pages/Campaign/index.tsx index 7f073f2521..83cb03c5cb 100644 --- a/src/pages/Campaign/index.tsx +++ b/src/pages/Campaign/index.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useLocation, useNavigate } from 'react-router-dom' -import { useGetCampaignsQuery, useGetLeaderboardQuery } from 'services/campaign' +import { useGetCampaignsQuery, useGetLeaderboardQuery, useLazyGetCampaignByIdQuery } from 'services/campaign' import { APP_PATHS, CAMPAIGN_LEADERBOARD_ITEM_PER_PAGE, EMPTY_ARRAY } from 'constants/index' import { useActiveWeb3React } from 'hooks' @@ -90,6 +90,7 @@ export default function CampaignsUpdater() { dispatch(setCampaignDataByPage({ campaigns: campaignData || [], isReset: queryParams.offset === 0 })) }, [campaignData, dispatch, queryParams.offset]) + const [getCampaignById] = useLazyGetCampaignByIdQuery() useEffect(() => { if (!currentCampaigns?.length) return const navigateFirsOne = () => { @@ -102,12 +103,18 @@ export default function CampaignsUpdater() { return } const selectedCampaign = currentCampaigns.find(campaign => campaign.id.toString() === selectedCampaignId) + if (selectedCampaign) { dispatch(setSelectedCampaign({ campaign: selectedCampaign })) - } else { - navigateFirsOne() + return } - }, [currentCampaigns, dispatch, selectedCampaignId, navigate]) + getCampaignById(selectedCampaignId) + .unwrap() + .then(data => { + dispatch(setSelectedCampaign({ campaign: data })) + }) + .catch(navigateFirsOne) + }, [currentCampaigns, dispatch, selectedCampaignId, navigate, getCampaignById]) useEffect(() => { if (isLoadingCampaignData === false) dispatch(setLoadingCampaignData(isLoadingCampaignData)) diff --git a/src/services/campaign.ts b/src/services/campaign.ts index e7440c4ffa..5afc204014 100644 --- a/src/services/campaign.ts +++ b/src/services/campaign.ts @@ -36,7 +36,9 @@ const formatRewards = (rewards: CampaignLeaderboardReward[]) => }), ) || [] -const formatListCampaign = (response: CampaignData[]) => { +const formatListCampaign = (data: CampaignData[]) => { + if (!data) return [] + const response = Array.isArray(data) ? data : [data] const campaigns: CampaignData[] = response.map((item: CampaignData) => ({ ...item, startTime: item.startTime * 1000, @@ -209,6 +211,12 @@ const campaignApi = createApi({ }), transformResponse: (data: any) => formatListCampaign(data?.data || []), }), + getCampaignById: builder.query({ + query: campaignId => ({ + url: `/${campaignId}`, + }), + transformResponse: (data: any) => formatListCampaign(data?.data)?.[0], + }), getLeaderboard: builder.query< any, { pageSize: number; pageNumber: number; userAddress: string; lookupAddress: string; campaignId: number } @@ -255,6 +263,7 @@ export const { useGetLuckyWinnersQuery, useJoinCampaignMutation, useGetTxsCampaignQuery, + useLazyGetCampaignByIdQuery, } = campaignApi export default campaignApi diff --git a/src/state/campaigns/reducer.ts b/src/state/campaigns/reducer.ts index e9d12693dc..1bb05e7bfc 100644 --- a/src/state/campaigns/reducer.ts +++ b/src/state/campaigns/reducer.ts @@ -69,9 +69,15 @@ export default createReducer(initialState, builder => } }) .addCase(setCampaignDataByPage, (state, { payload: { campaigns, isReset } }) => { + const oldData = state.data + const newData = isReset + ? campaigns + : oldData.some(e => e.id === campaigns[0]?.id) + ? oldData + : oldData.concat(campaigns) return { ...state, - data: isReset ? campaigns : state.data.concat(campaigns), + data: newData, } }) .addCase(setLoadingCampaignData, (state, { payload: loading }) => {