Skip to content

Commit

Permalink
Merge pull request #238 from AmbireTech/misc-updates
Browse files Browse the repository at this point in the history 
Misc updates
  • Loading branch information
@ivopaunov
ivopaunov authored Jul 30, 2024
2 parents 55070de + 5607a89 commit 4bd01ef
Show file tree
Hide file tree
Showing 10 changed files with 278 additions and 301 deletions.
63 changes: 15 additions & 48 deletions src/components/AdminPanel/SspStats.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,24 @@
import { useCallback, useState, useEffect, useMemo } from 'react'
import { useMemo } from 'react'
import { SimpleGrid, Box, Tabs, Paper, Loader } from '@mantine/core'
import { useAdExApi } from 'hooks/useAdexServices'
import useCustomNotifications from 'hooks/useCustomNotifications'

import { SupplyStats, SupplyStatsDetails } from 'types'
import { useCampaignsData } from 'hooks/useCampaignsData'
import { SupplyStatsDetails } from 'types'
import CustomTable from 'components/common/CustomTable'
import { parseRange } from 'helpers/createCampaignHelpers'

const supplyStatsDefaultValue = {
appBannerFormats: [],
siteBannerFormatsDesktop: [],
siteBannerFormatsMobile: [],
appBidFloors: [],
siteDesktopBidFloors: [],
siteMobileBidFloors: []
}
const toTableDta = (stats: SupplyStatsDetails[], title: string) => {
const toTableDta = (stats: SupplyStatsDetails[], title: string, isCpmRange?: boolean) => {
return {
headings: [title, 'count'],
elements: stats
.slice(0, 200)
.map(({ value, count }) => ({ value, count: count.toLocaleString() }))
elements: stats.slice(0, 200).map(({ value, count }) => ({
value: isCpmRange
? JSON.stringify(parseRange(value), null, 4).replace(/\{|\}|"/g, '')
: value,
count: count.toLocaleString()
}))
}
}

function SspStats() {
const { adexServicesRequest } = useAdExApi()
const { showNotification } = useCustomNotifications()
const [supplyStats, setSupplyStats] = useState<SupplyStats>(supplyStatsDefaultValue)

const getSupplyStats = useCallback(async () => {
let result

try {
result = await adexServicesRequest('backend', {
route: '/dsp/stats/common',
method: 'GET'
})

if (!result) {
throw new Error('Getting banner sizes failed.')
}

setSupplyStats(result as SupplyStats)
} catch (e) {
console.error(e)
showNotification('error', 'Error getting supply stats')
}
}, [adexServicesRequest, showNotification])

useEffect(() => {
getSupplyStats()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const { supplyStats } = useCampaignsData()

const data = useMemo(() => {
const {
Expand All @@ -67,9 +34,9 @@ function SspStats() {
appBannerFormats: toTableDta(appBannerFormats, 'App Format'),
siteBannerFormatsMobile: toTableDta(siteBannerFormatsMobile, 'Mobile site Format'),
siteBannerFormatsDesktop: toTableDta(siteBannerFormatsDesktop, 'Desktop site Format'),
appBidFloors: toTableDta(appBidFloors, 'App Bid Floor'),
siteDesktopBidFloors: toTableDta(siteDesktopBidFloors, 'Desktop site bid floor'),
siteMobileBidFloors: toTableDta(siteMobileBidFloors, 'Mobil site bid floor')
appBidFloors: toTableDta(appBidFloors, 'App Bid Floor', true),
siteDesktopBidFloors: toTableDta(siteDesktopBidFloors, 'Desktop site bid floor', true),
siteMobileBidFloors: toTableDta(siteMobileBidFloors, 'Mobil site bid floor', true)
}
}, [supplyStats])

Expand Down
202 changes: 100 additions & 102 deletions src/components/CampaignDetails/CampaignDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import { Container, Grid, createStyles, Text, Flex, Box, Button, Paper, Stack } from '@mantine/core'
import {
Container,
Grid,
createStyles,
Text,
Box,
Button,
Paper,
Stack,
Group
} from '@mantine/core'
import { modals } from '@mantine/modals'
import BadgeStatusCampaign from 'components/Dashboard/BadgeStatusCampaign'
import { formatCatsAndLocsData } from 'helpers/createCampaignHelpers'
Expand Down Expand Up @@ -140,18 +150,10 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
confirmProps: { color: campaign?.archived ? 'blue' : 'red' },
onConfirm: () => {
toggleArchived(campaign?.id || '')
updateCampaignDataById(campaign?.id)
showNotification('info', `Campaign ${campaign?.archived ? 'Unarchived' : 'Archived'}`)
}
})
}, [
campaign?.archived,
campaign?.id,
campaign?.title,
showNotification,
toggleArchived,
updateCampaignDataById
])
}, [campaign?.archived, campaign?.id, campaign?.title, showNotification, toggleArchived])

const handleStopOrDelete = useCallback(() => {
if (!campaign?.id || !campaign?.status) {
Expand All @@ -169,7 +171,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
}
: () => {
changeCampaignStatus(CampaignStatus.closedByUser, campaign.id)
updateCampaignDataById(campaign?.id)
showNotification('info', 'Campaign stopped!')
}

Expand All @@ -192,8 +193,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
changeCampaignStatus,
deleteDraftCampaign,
navigate,
showNotification,
updateCampaignDataById
showNotification
])

useEffect(() => {
Expand All @@ -202,8 +202,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
}
}, [id, updateCampaignDataById])

const onAfterEditSubmit = () => updateCampaignDataById(id)

const canArchive = useMemo(() => {
return (
!isEditMode &&
Expand Down Expand Up @@ -244,110 +242,110 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
return (
<>
<Box p="md">
<Flex direction={{ base: 'column', md: 'row' }} align="flex-start">
<GoBack fixed title="Dashboard">
<Paper mx="auto" shadow="xs" radius="lg">
<Flex direction="row">
<Button
className={cx(classes.actionIcons, {
active: canActivate
})}
rightIcon={<ActiveIcon size="15px" />}
onClick={() =>
canActivate && changeCampaignStatus(CampaignStatus.active, campaign.id)
}
disabled={!canActivate}
variant="subtle"
>
Activate
</Button>
<Group position="center">
<GoBack title="Dashboard" />
<Paper mx="auto" my="xs" shadow="md" radius="xl">
<Group spacing={2} p={2} position="center">
<Button
className={cx(classes.actionIcons, {
active: canActivate
})}
rightIcon={<ActiveIcon size="15px" />}
onClick={() =>
canActivate && changeCampaignStatus(CampaignStatus.active, campaign.id)
}
disabled={!canActivate}
variant="subtle"
>
Activate
</Button>

<Button
className={cx(classes.actionIcons, {
paused: canPause
})}
rightIcon={<PausedIcon size="15px" />}
onClick={() =>
canPause && changeCampaignStatus(CampaignStatus.paused, campaign.id)
}
variant="subtle"
disabled={!canPause}
>
Pause
</Button>
<Button
className={cx(classes.actionIcons, {
paused: canPause
})}
rightIcon={<PausedIcon size="15px" />}
onClick={() => canPause && changeCampaignStatus(CampaignStatus.paused, campaign.id)}
variant="subtle"
disabled={!canPause}
>
Pause
</Button>

<Button
className={cx(classes.actionIcons, {
stopped: canStop
})}
rightIcon={<StopIcon size="15px" />}
onClick={handleStopOrDelete}
disabled={!canStop}
variant="subtle"
>
Stop
</Button>

{campaign.status === CampaignStatus.draft ? (
<Button
className={cx(classes.actionIcons, {
stopped: canStop
archived: true
})}
rightIcon={<StopIcon size="15px" />}
rightIcon={<DeleteIcon size="15px" />}
onClick={handleStopOrDelete}
disabled={!canStop}
disabled={isAdminPanel}
variant="subtle"
>
Stop
Delete draft
</Button>

{campaign.status === CampaignStatus.draft ? (
<Button
className={cx(classes.actionIcons, {
archived: true
})}
rightIcon={<DeleteIcon size="15px" />}
onClick={handleStopOrDelete}
variant="subtle"
>
Delete draft
</Button>
) : (
<Button
className={cx(classes.actionIcons, 'archived', {
selected: canArchive
})}
rightIcon={<ArchivedIcon size="15px" />}
onClick={handleArchive}
disabled={!canArchive}
variant="subtle"
>
{campaign.archived ? 'Unarchive' : 'Archive'}
</Button>
)}

) : (
<Button
disabled={!canEdit}
className={cx(classes.actionIcons, 'edit', {
selected: params.get('edit') && campaign.status !== CampaignStatus.draft
className={cx(classes.actionIcons, 'archived', {
selected: canArchive
})}
rightIcon={<EditIcon size="15px" />}
rightIcon={<ArchivedIcon size="15px" />}
onClick={handleArchive}
disabled={!canArchive}
variant="subtle"
onClick={() =>
canEdit &&
setParams(
params.get('edit') && campaign.status !== CampaignStatus.draft
? ''
: 'edit=true',
{ replace: true }
)
}
>
Edit
{campaign.archived ? 'Unarchive' : 'Archive'}
</Button>
</Flex>
</Paper>
<Flex align="center" gap="xs">
Campaign Analytics
<ActionButton
title="View Analytics"
icon={<AnalyticsIcon size="32px" />}
action={() => navigate(`/dashboard/campaign-analytics/${campaign.id}`)}
/>
</Flex>
</GoBack>
</Flex>
)}

<Button
disabled={!canEdit}
className={cx(classes.actionIcons, 'edit', {
selected: params.get('edit') && campaign.status !== CampaignStatus.draft
})}
rightIcon={<EditIcon size="15px" />}
variant="subtle"
onClick={() =>
canEdit &&
setParams(
params.get('edit') && campaign.status !== CampaignStatus.draft
? ''
: 'edit=true',
{ replace: true }
)
}
>
Edit
</Button>
</Group>
</Paper>
<Group spacing="sm" position="center">
<Text weight="bold" size="sm">
Campaign Analytics{' '}
</Text>
<ActionButton
title="View Analytics"
icon={<AnalyticsIcon size="32px" />}
action={() => navigate(`/dashboard/campaign-analytics/${campaign.id}`)}
/>
</Group>
</Group>
</Box>
<Box mt="xl">
{isEditMode ? (
<EditCampaign campaign={campaign} onAfterSubmit={onAfterEditSubmit} />
<EditCampaign campaign={campaign} />
) : (
<Container fluid className={classes.wrapper}>
{isAdminPanel && <AdminBadge title="Admin Details" />}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
const isArchived = x.campaign.archived
if (isArchived) archivedCount++

return matchFilter && (!isArchived || showArchived)
return matchFilter && ((!showArchived && !isArchived) || (showArchived && isArchived))
})
.sort((a, b) => {
const statusOrderDiff =
Expand Down Expand Up @@ -226,7 +226,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
status: CampaignStatus.created
})
})
navigate('/dashboard/create-campaign', { replace: true })
navigate('/dashboard/create-campaign', {})
} else {
showNotification('error', 'Editing draft campaign failed', 'Editing draft campaign failed')
}
Expand All @@ -236,7 +236,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun

const handleEdit = useCallback(
(data: DashboardTableElement['actionData']) =>
navigate(`/dashboard/campaign-details/${data.campaign.id}?edit=true`),
navigate(`/dashboard/campaign-details/${data.campaign.id}?edit=true`, {}),
[navigate]
)

Expand Down Expand Up @@ -325,7 +325,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
{
action: handleEdit,
disabled: (ada: DashboardTableElement['actionData']) =>
ada.campaign.status === CampaignStatus.closedByUser,
![CampaignStatus.active, CampaignStatus.paused].includes(ada.campaign.status),
label: 'Edit',
icon: <EditIcon />,
hide: (ada: DashboardTableElement['actionData']) => ada.isDraft
Expand Down
Loading

0 comments on commit 4bd01ef

Please sign in to comment.