Notes

import React, {useRef, useEffect, useCallback} from 'react';
import {observer} from 'mobx-react';
import moment from 'moment-timezone';
import ActionsMenu from '@aosprodsys/brucke-ui-core/dist/es/components/ActionsMenuV2';
import HorizontalTimeline from 'react-horizontal-timeline';
import Slider from 'react-slick';
import Header from '@aosprodsys/brucke-ui-core/dist/es/components/Header';
import Download from '@apple/symbols/medium/arrow.down.to.line.circle.svg';
import Position from '@aosprodsys/brucke-ui-core/dist/es/components/Position';
import FilterTable from '@aosprodsys/brucke-ui-core/dist/es/components/filterTable/FilterTable';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import Constants from '../constants/AppConstants';
import Loader from '../components/Loader';
import {StoreContext} from '../utils/StoreContext';
import styles from '../sass/pages/feed-details.scss';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const FeedDetailsPage = ({partnerDetails}) => {
const slickRef = useRef();
const {appState, partnerFeedsAudit} = React.useContext(StoreContext);
const {
selectedFeedId,
marketingContextAudit,
explorerFeedsAudit,
isFetchingPartnerFeedDetails,
selectedFeedType,
selectedIndex,
feedTypeOptions,
partnerFeedTypeOptions,
explorerDateFeed,
eventTypeSelectDateFeed,
isFetchingPartnerFeedExlorerDetails
} = partnerFeedsAudit;

console.log(eventTypeSelectDateFeed, 'eventTypeSelectDateFeed');

useEffect(() => {
const partnerParam = partnerDetails?.partner ? partnerDetails?.partner : selectedFeedId?.partner;
const feedIdParam = partnerDetails?.feedId ? partnerDetails?.feedId : selectedFeedId?.feedId;
let feedTypeParam = partnerDetails?.feedType ? partnerDetails?.feedType : selectedFeedId?.feedType;
if (feedTypeParam.includes(',')) {
feedTypeParam = feedTypeParam.split(',')[0];
}
partnerFeedsAudit.reset();
const startDate = moment()
.subtract(7, 'days')
.format('YYYY-MM-DD');
partnerFeedsAudit.fetchPartnerFeedsAudit(partnerParam, startDate);
partnerFeedsAudit.fetchPartnerFeedsMarketingContext(partnerParam, feedIdParam, feedTypeParam);
const feedTypeOptions = selectedFeedId.feedType.split(',').map(type => ({
label: type.trim(),
value: type.trim()
}));
const defaultOption = feedTypeOptions[0] || null;
partnerFeedsAudit.updateValue({key: 'feedTypeOptions', value: feedTypeOptions});
partnerFeedsAudit.updateValue({key: 'selectedFeedType', value: defaultOption});
}, []);

useEffect(
() => {
const calculateDefaultFeedIndex = () => {
return explorerFeedsAudit.findIndex(feed => feed.feedId === selectedFeedId?.feedId);
};
const newDefaultFeedIndex = calculateDefaultFeedIndex();
const safeIndex = Math.max(0, Math.min(newDefaultFeedIndex, explorerFeedsAudit.length - 1));
partnerFeedsAudit.updateValue({key: 'selectedIndex', value: safeIndex});
},
[explorerFeedsAudit, selectedFeedId?.feedId]
);

const onIndexClick = useCallback(
index => {
const safeIndex = Math.max(0, Math.min(index, explorerFeedsAudit.length - 1));
partnerFeedsAudit.updateValue({key: 'selectedIndex', value: safeIndex});
const selectedFeed = explorerFeedsAudit[safeIndex];
if (selectedFeed) {
const {partner, feedId, feedType} = selectedFeed;
partnerFeedsAudit.updateValue({key: 'selectedFeedId', value: selectedFeed});
partnerFeedsAudit.updateValue({key: 'selectedIndex', value: safeIndex});
partnerFeedsAudit.fetchPartnerFeedsMarketingContext(partner, feedId, selectedFeedType.value);
const feedTypeOptions = feedType.split(',').map(type => ({
label: type.trim(),
value: type.trim()
}));
partnerFeedsAudit.updateValue({key: 'feedTypeOptions', value: feedTypeOptions});
}
},
[explorerFeedsAudit, selectedFeedType.value, partnerFeedsAudit]
);

if (isFetchingPartnerFeedDetails) return <Loader />;

const isFullPage = !partnerDetails?.partner;
const partnerName = partnerDetails?.partner ? partnerDetails?.partner : selectedFeedId?.partner;
const publishedDate = partnerDetails?.publishedTimeStamp
? moment(partnerDetails?.publishedTimeStamp).format(Constants.FORMAT_DATE)
: moment(selectedFeedId?.publishedTimeStamp).format(Constants.FORMAT_DATE);
const dates = explorerFeedsAudit.map(feed => feed.publishedTimeStamp);
const sortedDates = dates.sort((a, b) => new Date(b) - new Date(a));

const mcFileMapData = (marketingContextAudit.partnerMarketingContextFileDetails || []).map(detail => ({
marketingContext: detail.key,
size: detail.fileSize,
geo: detail.geo,
channel: detail.channel,
fileName: detail.fileName,
lang: detail.lang,
segment: detail.segment,
feedType: selectedFeedType
}));
const columns = [
{
Header: 'Marketing Context',
accessor: 'marketingContext',
resizable: false,
width: 500,
Cell: ({value, row: {geo, lang, segment, fileName, feedType}}) => (
<div className="icon-actions-container">
<div className="marketing-context">
<span>{value}</span>
<a
className="action-icon"
title="Download"
onClick={e => {
e.stopPropagation();
const feedTypeValue = feedType.value;
partnerFeedsAudit.downloadMC(
selectedFeedId?.partner,
selectedFeedId?.feedId,
feedTypeValue,
geo,
lang,
segment,
fileName,
selectedFeedId?.groupType
);
}}
>
<Download desiredFontSize={10} />
</a>
</div>
</div>
)
},
{
Header: 'Size (KB)',
accessor: 'size',
resizable: false
}
];

const handleOptionClick = optionValue => {
let startDate;
switch (optionValue) {
case 'Last 7 days':
startDate = moment()
.subtract(7, 'days')
.format('YYYY-MM-DD');
break;
case 'Last 15 days':
startDate = moment()
.subtract(15, 'days')
.format('YYYY-MM-DD');
break;
case 'Last 30 days':
startDate = moment()
.subtract(30, 'days')
.format('YYYY-MM-DD');
break;
default:
startDate = moment()
.subtract(7, 'days')
.format('YYYY-MM-DD');
}
partnerFeedsAudit.updateValue({
key: 'explorerDateFeed',
value: optionValue
});
partnerFeedsAudit.fetchPartnerFeedsAudit(selectedFeedId?.partner, startDate);
};

return (
<section className={`${styles.feedDetails} feed-details`}>
{isFullPage ? (
<Header
onNavIconClick={appState.toggleLeftNav}
title={() => (
<div className="list-header">
<h4 className="header global-header-super">{partnerName}</h4>
<span className="subtitle">
Published on <strong>{publishedDate}</strong>
</span>
</div>
)}
/>
) : (
<header>
<h3>{partnerName}</h3>
<small>
Published on <strong>{publishedDate}</strong>
</small>
</header>
)}
<div className="date-select-container">
<ActionsMenu
title={explorerDateFeed}
align="right"
placement="bottom"
className="global-link-bold"
offsetX={0}
offsetY={8}
tooltipStyles={{borderTopLeftRadius: 0, borderTopRightRadius: 0}}
>
{partnerFeedTypeOptions.map(option => (
<span
key={option.value}
className={`global-menu-link action-item`}
onClick={() => handleOptionClick(option.value)}
>
{option.label}
</span>
))}
</ActionsMenu>
</div>
<section className={isFullPage ? 'well' : 'dock'}>
<section className="timeline-container">
{sortedDates.length > 0 && explorerFeedsAudit.length > 0 ? (
<HorizontalTimeline
index={selectedIndex}
indexClick={index => onIndexClick(index)}
getLabel={(date, i) => {
const isOdd = i % 2 !== 0;
const labelStyle = isOdd ? {bottom: '2px'} : {top: '2px'};
const matchingFeed = explorerFeedsAudit.find(feed => feed.publishedTimeStamp === date);
const feedId = matchingFeed ? matchingFeed.feedId : 'N/A';
const feedType = matchingFeed ? matchingFeed.feedType : 'N/A';
return (
<div style={{...labelStyle, position: 'absolute'}}>
<strong>{`${feedType} ${feedId} ${moment(date).format(Constants.FORMAT_DATE)}`}</strong>
</div>
);
}}
values={sortedDates || []}
/>
) : null}
</section>
<Slider
{...{
ref: slickRef,
arrows: false,
draggable: false,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: selectedIndex
}}
>
<div className="slider-item">
<section className="queue-headers-container">
<h4>
<strong>Feed Information</strong>
</h4>
<div className="feed-headers-list">
<div className="feed-header">
<h5>
<strong>Feed Type</strong>
</h5>
<TypeAhead
placeholder="Feed Type"
className="feed-header-value"
selectOptions={{
options: feedTypeOptions,
closeMenuOnSelect: true
}}
value={selectedFeedType}
showChevronIcon
onChange={option => {
partnerFeedsAudit.updateValue({key: 'selectedFeedType', value: option});
partnerFeedsAudit.fetchPartnerFeedsMarketingContext(
selectedFeedId?.partner,
selectedFeedId?.feedId,
option?.value
);
}}
/>
</div>
<div className="feed-header">
<h5>
<strong>Total Expected Messages</strong>
</h5>
<span className="feed-header-value">
{selectedFeedId?.totalExpectedMessages ? selectedFeedId?.totalExpectedMessages : '-'}
</span>
</div>
<div className="feed-header">
<h5>
<strong>Total Received Messages</strong>
</h5>
<span className="feed-header-value">
{selectedFeedId?.totalReceivedMessages ? selectedFeedId?.totalReceivedMessages : '-'}
</span>
</div>
<div className="feed-header">
<h5>
<strong>Group Type</strong>
</h5>
<span className="feed-header-value">
{selectedFeedId?.groupType ? `${selectedFeedId?.groupType === 'F' ? 'Full' : 'Partial'}` : '-'}
</span>
</div>
</div>
</section>
<br />
<section className="attributes-container">
<h4>
<strong>Marketing Context</strong>
</h4>
{isFetchingPartnerFeedExlorerDetails ? (
<Loader />
) : (
<div className={`attributes-list ${isFullPage ? 'full-page' : 'explorer-pane'}`}>
<Position>
{({windowInnerHeight = window.innerHeight, width}) => (
<FilterTable
{...{
enableGlobalFilter: true,
infiniteScroll: true,
columns,
data: mcFileMapData,
height: Math.max(windowInnerHeight - 520, 500),
width: Math.max(1000, isFullPage ? width : width + 212),
rowCountRenderer: count => {
console.log(count, 'count');
return (
<>
{count > 0 && (
<>
<div className="row-label-export-container">
<a
className="download-container"
onClick={e => {
e.stopPropagation();
partnerFeedsAudit.downloadFeed(
selectedFeedId?.partner,
selectedFeedId?.feedId
);
}}
>
Download All
<Download desiredFontSize={8} />
</a>
</div>
<span>{`${count} ${count.length > 1}?Rows:Row`}</span>
</>
)}
</>
);
}
}}
/>
)}
</Position>
</div>
)}
</section>
</div>
</Slider>
</section>
</section>
);
};

export default observer(FeedDetailsPage);