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';

import {toJS} from 'mobx';

const FeedDetailsPage = ({partnerDetails}) => {
const slickRef = useRef();
const {appState, partnerFeedsAudit} = React.useContext(StoreContext);
const {
selectedFeedId,
marketingContextAudit,
explorerFeedsAudit,
isFetchingPartnerFeedDeatils,
isFetchingPartnerFeedExlorerDetails,
selectedFeedType
} = partnerFeedsAudit;
const [selectedIndex, setSelectedIndex] = useState(0);

const filteredFeeds = explorerFeedsAudit.filter(
feed => (selectedFeedType ? feed.feedType.split(',').includes(selectedFeedType.value) : true)
);
console.log(toJS(filteredFeeds), 'filteredFeeds');
console.log(toJS(selectedFeedType), 'selectedFeedType');

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();
partnerFeedsAudit.fetchPartnerFeedsAudit(partnerParam);
partnerFeedsAudit.fetchPartnerFeedsMarketingContext(partnerParam, feedIdParam, feedTypeParam);
},
[partnerFeedsAudit, partnerDetails, selectedFeedId]
);

useEffect(
() => {
const calculateDefaultFeedIndex = () => {
return filteredFeeds.findIndex(feed => feed.feedId === selectedFeedId?.feedId);
};
const newDefaultFeedIndex = calculateDefaultFeedIndex();
setSelectedIndex(newDefaultFeedIndex !== -1 ? newDefaultFeedIndex : 0);
},
[filteredFeeds, selectedFeedId]
);

useEffect(
() => {
if (slickRef.current && typeof selectedIndex === 'number') {
slickRef.current.slickGoTo(selectedIndex);
}
},
[selectedIndex]
);

if (isFetchingPartnerFeedDeatils) return <Loader />;
if (isFetchingPartnerFeedExlorerDetails) 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 = filteredFeeds.map(feed => feed.publishedTimeStamp);
const sortedDates = dates.sort((a, b) => new Date(b) - new Date(a));

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">
{dates.length > 0 && (
<HorizontalTimeline
index={selectedIndex}
indexClick={i => {
setSelectedIndex(i);
console.log(slickRef.current, 'slickRef.current');
slickRef.current.slickGoTo(i);
const selectedFeed = filteredFeeds[i];
if (selectedFeed) {
const {partner, feedId} = selectedFeed;
partnerFeedsAudit.updateValue({key: 'selectedFeedId', value: selectedFeed});
partnerFeedsAudit.fetchPartnerFeedsMarketingContext(partner, feedId, selectedFeedType.value);
}
}}
getLabel={(date, i) => {
const isOdd = i % 2 !== 0;
const labelStyle = isOdd ? {bottom: '2px'} : {top: '2px'};
const matchingFeed = filteredFeeds.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 || []}
/>
)}
</section>
<Slider
{...{
ref: slickRef,
arrows: false,
draggable: false,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: selectedIndex
}}
>
{filteredFeeds.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} 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';

import {toJS, runInAction} from 'mobx';

export default ({
isFullPage,
partner,
feedId,
totalExpectedMessages,
totalReceivedMessages,
feedType,
groupType,
marketingContextAudit
}) => {
const {partnerFeedsAudit} = React.useContext(StoreContext);
const {
explorerFeedsAudit,
updateValue,
selectedFeedId,
selectedFeedType,
feedTypeOptions,
isFetchingPartnerFeedExlorerDetails
} = partnerFeedsAudit;

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

useEffect(
() => {
const feedTypeOptions = selectedFeedId.feedType.split(',').map(type => ({
label: type.trim(),
value: type.trim()
}));

const defaultOption =
feedType && feedTypeOptions.find(option => option.value === feedType.trim())
? feedTypeOptions.find(option => option.value === feedType.trim())
: feedTypeOptions[0];

console.log(defaultOption, 'defaultOption');
runInAction(() => {
partnerFeedsAudit.updateValue({key: 'feedTypeOptions', value: feedTypeOptions});
partnerFeedsAudit.updateValue({key: 'selectedFeedType', value: defaultOption});
});
},
[selectedFeedId, feedType, explorerFeedsAudit, partnerFeedsAudit]
);

if (isFetchingPartnerFeedExlorerDetails) return <Loader />;
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(partner, feedId, feedTypeValue, 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 => {
console.log(option, 'option');
updateValue({key: 'selectedFeedType', value: option});
console.log(toJS(selectedFeedType), 'selectedFeedType');
}}
/>
</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"
onClick={e => {
e.stopPropagation();
partnerFeedsAudit.downloadFeed(partner, feedId);
}}
>
Download All
<Download desiredFontSize={8} />
</a>
</div>
<span>{`${count?.toLocaleString('en-US')} Partners`}</span>
</>
)}
</>
)
}}
/>
)}
</Position>
</div>
</section>
</section>
);
};