Notes

import React, {useState, useRef, useEffect} from 'react';
import {observer} from 'mobx-react';
import moment from 'moment-timezone';
import HorizontalTimeline from 'react-horizontal-timeline';
import Slider from 'react-slick';
import Header from '@aosprodsys/brucke-ui-core/dist/es/components/Header';
import FeedDetails from '../components/FeedDetails';
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, isFetchingPartnerFeedDeatils} = partnerFeedsAudit;

useEffect(
() => {
partnerFeedsAudit.fetchPartnerFeedsAudit(
partnerDetails?.partner ? partnerDetails?.partner : selectedFeedId?.partner
);
partnerFeedsAudit.fetchPartnerFeedsMarketingContext(
partnerDetails?.partner ? partnerDetails?.partner : selectedFeedId?.partner,
partnerDetails?.feedId ? partnerDetails?.feedId : selectedFeedId?.feedId,
partnerDetails?.feedType ? partnerDetails?.feedType : selectedFeedId?.feedType
);
},
[partnerFeedsAudit, partnerDetails, selectedFeedId]
);

const defaultFeedIndex = explorerFeedsAudit.findIndex(
feed => feed.feedId === (partnerDetails?.feedId || selectedFeedId?.feedId)
);

const [selectedIndex, setSelectedIndex] = useState(defaultFeedIndex !== -1 ? defaultFeedIndex : 0);

if (isFetchingPartnerFeedDeatils) 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);

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>
)}
<section className={isFullPage ? 'well' : 'dock'}>
<section className="timeline-container">
<HorizontalTimeline
index={selectedIndex}
indexClick={i => {
setSelectedIndex(i);
slickRef.current.slickGoTo(i);
const selectedFeed = explorerFeedsAudit[i];
if (selectedFeed) {
const {partner, feedId, feedType} = selectedFeed;
partnerFeedsAudit.fetchPartnerFeedsMarketingContext(partner, feedId, feedType);
}
}}
getLabel={(date, i) => {
const matchingFeed = explorerFeedsAudit.find(feed => feed.publishedTimeStamp === date);
const feedId = matchingFeed ? matchingFeed.feedId : 'N/A';
return <strong>{`${feedId} ${moment(date).format(Constants.FORMAT_DATE)}`}</strong>;
}}
values={dates}
/>
</section>
<Slider
{...{
ref: slickRef,
arrows: false,
draggable: false,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: selectedIndex
}}
>
{explorerFeedsAudit.map((feed, i) => (
<div key={`${feed.feedId}-${i}`} className="slider-item">
<FeedDetails {...feed} isFullPage={isFullPage} marketingContextAudit={marketingContextAudit} />
</div>
))}
</Slider>
</section>
</section>
);
};

export default observer(FeedDetailsPage);
import React, {useEffect, useState} from 'react';
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 styles from '../sass/components/feed-details.scss';
import {StoreContext} from '../utils/StoreContext';

export default ({
isFullPage,
partner,
feedId,
totalExpectedMessages,
totalReceivedMessages,
feedType,
marketingContextAudit
}) => {
const {partnerFeedsAudit} = React.useContext(StoreContext);
const {explorerFeedsAudit} = partnerFeedsAudit;
const [selectedFeedType, setSelectedFeedType] = useState(null);
const [feedTypeOptions, setFeedTypeOptions] = useState([]);
const {groupType} = marketingContextAudit;

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
}));

useEffect(
() => {
const feedTypes = explorerFeedsAudit.map(feed => feed.feedType);
const uniqueFeedTypes = [...new Set(feedTypes)];
const feedTypeOptions = uniqueFeedTypes.map(type => ({
label: type,
value: type
}));
const currentFeedType = feedTypeOptions.find(type => type.value === feedType);
setFeedTypeOptions(feedTypeOptions);
setSelectedFeedType(currentFeedType);
},
[feedType, explorerFeedsAudit]
);

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

return (
<section className={styles.feedDetails}>
<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 => {
setSelectedFeedType(option);
}}
/>
</div>
<div className="feed-header">
<h5>
<strong>Total Expected Messages</strong>
</h5>
<span className="feed-header-value">{totalExpectedMessages ? totalExpectedMessages : '-'}</span>
</div>
<div className="feed-header">
<h5>
<strong>Total Received Messages</strong>
</h5>
<span className="feed-header-value">{totalReceivedMessages ? totalReceivedMessages : '-'}</span>
</div>
<div className="feed-header">
<h5>
<strong>Group Type</strong>
</h5>
<span className="feed-header-value">{groupType ? groupType : '-'}</span>
</div>
</div>
</section>
<br />
<section className="attributes-container">
<h4>
<strong>Marketing Context</strong>
</h4>
<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 => (
<>
{count > 0 && (
<>
<div className="row-label-export-container">
<a className="download-container">
Download All
<Download desiredFontSize={8} />
</a>
</div>
<span>{`${count?.toLocaleString('en-US')} Partners`}</span>
</>
)}
</>
)
}}
/>
)}
</Position>
</div>
</section>
</section>
);
};