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 [selectedIndex, setSelectedIndex] = useState(0);
const isFullPage = !partnerDetails?.partner;
const {appState, partnerFeedsAudit} = React.useContext(StoreContext);

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]
);
const {selectedFeedId, marketingContextAudit, explorerFeedsAudit, isFetchingPartnerFeedDeatils} = partnerFeedsAudit;

const partnerName = partnerDetails?.partner ? partnerDetails?.partner : 'N/A';
const publishedDate = partnerDetails?.publishedTimeStamp
? moment(partnerDetails?.publishedTimeStamp).format(Constants.FORMAT_DATE)
: 'N/A';
const dates = explorerFeedsAudit.map(feed => feed.publishedTimeStamp);
if (isFetchingPartnerFeedDeatils) return <Loader />;

console.log(partnerName, 'partnerName');
console.log(publishedDate, 'publishedDate');
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);