diff --git a/src/Router.tsx b/src/Router.tsx index 24c189d0..28e9ed05 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -86,10 +86,16 @@ export const router = createBrowserRouter( path: '', element: }, - { path: 'campaign-analytics/:id', element: }, - { path: 'campaign-analytics/admin/:id', element: }, - { path: 'campaign-details/:id', element: }, - { path: 'campaign-details/admin/:id', element: }, + { path: 'campaign-analytics/:id/:activeTab?', element: }, + { + path: 'campaign-analytics/admin/:id/:activeTab?', + element: + }, + { path: 'campaign-details/:id/:tabValue?', element: }, + { + path: 'campaign-details/admin/:id/:tabValue?', + element: + }, { path: 'billing', element: diff --git a/src/components/CampaignAnalytics/CampaignAnalytics.tsx b/src/components/CampaignAnalytics/CampaignAnalytics.tsx index 697c868f..75d53db4 100644 --- a/src/components/CampaignAnalytics/CampaignAnalytics.tsx +++ b/src/components/CampaignAnalytics/CampaignAnalytics.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useState, useMemo } from 'react' import { Container, Flex, Loader, Tabs, Paper, Group, Text, Anchor, Center } from '@mantine/core' -import { useParams } from 'react-router-dom' -import { AnalyticsType, BaseAnalyticsData, AnalyticsPeriod } from 'types' +import { useParams, useNavigate } from 'react-router-dom' +import { BaseAnalyticsData, AnalyticsPeriod, AnalyticsType } from 'types' import GoBack from 'components/common/GoBack/GoBack' import DownloadCSV from 'components/common/DownloadCSV' import useCampaignAnalytics from 'hooks/useCampaignAnalytics' @@ -19,9 +19,9 @@ import { generateCVSData } from './CvsDownloadConfigurations' import SeeOnMapBtn from './SeeOnMapBtn' const CampaignAnalytics = ({ isAdminPanel = false }: { isAdminPanel?: boolean }) => { - const { id } = useParams() + const { id, activeTab = 'timeframe' } = useParams<{ id: string; activeTab: AnalyticsType }>() - const [activeTab, setActiveTab] = useState('timeframe') + const navigate = useNavigate() const [isMapBtnShown, setIsMapBtnShown] = useState(false) const [isMapVisible, setIsMapVisible] = useState(false) const [csvData, setCsvData] = useState() @@ -103,11 +103,16 @@ const CampaignAnalytics = ({ isAdminPanel = false }: { isAdminPanel?: boolean }) } }, [activeTab, campaignMappedAnalytics]) - const handleTabChange = useCallback((value: string | null) => { - // TODO: validate value if it is in AnalyticsType - if (!value) return - setActiveTab(value as AnalyticsType) - }, []) + const handleTabChange = useCallback( + (value: string | null) => { + campaign?.id && + navigate( + `/dashboard/campaign-analytics${isAdminPanel ? '/admin' : ''}/${campaign?.id}/${value}`, + { replace: true } + ) + }, + [campaign?.id, isAdminPanel, navigate] + ) // TODO: there is delay when updated analytics table is displayed after the tab is switched - add loading bars or something diff --git a/src/components/CampaignAnalytics/Placements.tsx b/src/components/CampaignAnalytics/Placements.tsx index 2084b1e3..ea8bd9ee 100644 --- a/src/components/CampaignAnalytics/Placements.tsx +++ b/src/components/CampaignAnalytics/Placements.tsx @@ -3,8 +3,8 @@ import CustomTable, { TableElement, TableRowAction } from 'components/common/Cus import { getHumneSrcName } from 'helpers' import { useMemo } from 'react' import { BaseAnalyticsData } from 'types' -import InvisibilityIcon from 'resources/icons/Invisibility' -import VisibilityIcon from 'resources/icons/Visibility' +import IncludeIcon from 'resources/icons/Include' +import ExcludeIcon from 'resources/icons/Exclude' import { useCampaignsData } from 'hooks/useCampaignsData' const Placements = ({ @@ -89,7 +89,7 @@ const Placements = ({ label: ({ isBlocked, placementName }: PlacementsTableElement['actionData']) => `${isBlocked ? 'Unblock' : 'Block'} "${placementName}"`, icon: ({ isBlocked }: PlacementsTableElement['actionData']) => - isBlocked ? : + isBlocked ? : } ] : [] diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx index af54c36b..08dd7ca5 100644 --- a/src/components/CampaignDetails/CampaignDetails.tsx +++ b/src/components/CampaignDetails/CampaignDetails.tsx @@ -229,8 +229,8 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => { + + - - - Categories - - - + + + + + Categories + + + - - - Countries - - - + + + Countries + + + - - - + + + + + ) } diff --git a/src/index.tsx b/src/index.tsx index ed4c488b..6a42a46b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +// import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' @@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( - - - + // + + // ) // If you want to start measuring performance in your app, pass a function