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,
selectedFeedType
} = partnerFeedsAudit;

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

console.log(toJS(selectedFeedType), 'selectedFeedType');

console.log(toJS(filteredFeeds), 'filteredFeeds');

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

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

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 = filteredFeeds.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 = filteredFeeds[i];
if (selectedFeed) {
const {partner, feedId} = selectedFeed;
partnerFeedsAudit.fetchPartnerFeedsMarketingContext(partner, feedId, selectedFeedType.value);
}
}}
getLabel={(date, i) => {
const isOdd = i % 2 !== 0;
const labelStyle = isOdd ? {bottom: '15px'} : {top: '15px'};
const matchingFeed = filteredFeeds.find(feed => feed.publishedTimeStamp === date);
const feedId = matchingFeed ? matchingFeed.feedId : 'N/A';
return (
<div style={{...labelStyle, position: 'absolute'}}>
<strong>{`${feedId} ${moment(date).format(Constants.FORMAT_DATE)}`}</strong>
</div>
);
}}
values={dates}
/>
</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);