diff --git a/src/admin/Admin.tsx b/src/admin/Admin.tsx index 484980ce..3b130c5c 100644 --- a/src/admin/Admin.tsx +++ b/src/admin/Admin.tsx @@ -45,10 +45,10 @@ const AdminPanel = () => { const handlePreview = useCallback( (item: Campaign) => { - setSelectedItem(item) + setSelectedItem(campaignData?.filter((campaign) => campaign.id === item.id)[0] || null) open() }, - [open] + [open, campaignData] ) const handleDelete = useCallback((item: Campaign) => { diff --git a/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx b/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx index 0bee9f01..943bb396 100644 --- a/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx +++ b/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx @@ -1,8 +1,13 @@ -import { Button, Flex, Modal, Text, Textarea, createStyles } from '@mantine/core' -import { Campaign } from 'adex-common' +import { Button, Flex, Image, Modal, Text, Textarea, createStyles } from '@mantine/core' +import { Campaign, EventType } from 'adex-common' import CampaignDetailsRow from 'components/common/CampainDetailsRow' import { useAdExApi } from 'hooks/useAdexServices' import { FormEvent, useState } from 'react' +import LeftArrowIcon from 'resources/icons/LeftArrow' +import RightArrowIcon from 'resources/icons/RightArrow' + +const timeIntToDateString = (n: bigint | number | undefined) => + n ? new Date(Number(n)).toLocaleDateString().slice(0, 9) : '' const useStyles = createStyles((theme) => ({ header: { @@ -31,6 +36,7 @@ const AdminCampaignModal = ({ const [reason, setReason] = useState('') const [action, setAction] = useState(null) const [formed, setFormed] = useState(false) + const [currBanner, setCurrBanner] = useState(0) const handleAction = (status: string) => { if (!item?.id) return @@ -38,6 +44,15 @@ const AdminCampaignModal = ({ setFormed(true) } + const handleBannerChange = (n: number) => { + const nextBannerPos = currBanner + n + const bannerLength = item?.adUnits.length || 0 + + if (nextBannerPos < 0) return setCurrBanner(0) + if (nextBannerPos > bannerLength - 1) return setCurrBanner(bannerLength - 1) + setCurrBanner(nextBannerPos) + } + const handleSubmit = (e: FormEvent) => { e.preventDefault() if (!item?.id) return @@ -56,6 +71,7 @@ const AdminCampaignModal = ({ .catch(console.log) setFormed(false) } + return ( - + + {/* TODO: Add data for it */} - + {/* TODO: Add data for it */} - + {/* TODO: Add data for it */} - + {/* TODO: Add data for it */} - + {/* TODO: Add data for it */} {/* TODO: Add data for it */} - {} + + {item?.adUnits && item?.adUnits.length > 1 && ( + + handleBannerChange(-1)} /> + {currBanner + 1} + handleBannerChange(1)} /> + + )} + + + + + } + column + />