Notes

import React, {useRef, useState, useEffect} from 'react';
import isEmpty from 'lodash-es/isEmpty';
import {observer} from 'mobx-react';
import moment from 'moment-timezone';
import Constants from '../constants/AppConstants';
import FeedDock from '../components/FeedDock';
import Header from '@aosprodsys/brucke-ui-core/dist/es/components/Header';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import {StoreContext} from '../utils/StoreContext';
import FilterTable from '@aosprodsys/brucke-ui-core/dist/es/components/filterTable/FilterTable';
import Position from '@aosprodsys/brucke-ui-core/dist/es/components/Position';
import ChevronDown from '@apple/symbols/medium/chevron.down.svg';
import ChevronRight from '@apple/symbols/medium/chevron.right.svg';
import Download from '@apple/symbols/medium/arrow.down.to.line.circle.svg';
import styles from '../sass/pages/partner-feeds-audit-page.scss';

export const PartnerFeedsAuditPage = props => {
const {appState, partnerFeedsAudit} = React.useContext(StoreContext);
const {
isFetching,
updateValue,
showDock,
partnerFeedsAuditData,
partnerFeedTypeOptions,
eventTypeSelectDateFeed
} = partnerFeedsAudit;

useEffect(
() => {
partnerFeedsAudit.fetchFeedsAudit();
},
[partnerFeedsAudit]
);

const tableRef = useRef();

const [tableData, setTableData] = useState([]);

useEffect(
() => {
const newData = partnerFeedsAuditData.map(({feedsAuditEntity, partnerFeedsList}) => ({
...feedsAuditEntity,
partnerFeedsList: partnerFeedsList || [],
isExpanded: false
}));
setTableData(newData);
},
[partnerFeedsAuditData]
);
const formatTableData = formatData => {
return formatData.reduce((newData, item) => {
if (item) {
newData.push(item);
if (item.isExpanded === true && item.partnerFeedsList && !isEmpty(item.partnerFeedsList)) {
newData = [...newData, ...item.partnerFeedsList];
}
}

return newData;
}, []);
};

const [formattedData, setFormattedData] = useState(formatTableData(tableData));
const [scrollToIndex, setScrollToIndex] = useState(undefined);
useEffect(
() => {
const formatted = formatTableData(tableData);
setFormattedData(formatted);
},
[tableData]
);

const columns = [
{
Header: '',
hideFilter: true,
accessor: 'pubsysUse',
width: 90,
Cell: ({value, row}, rowData) => {
let Component = 'isExpanded' in row ? (row.isExpanded ? ChevronDown : ChevronRight) : null;
return (
row?.partnerFeedsList &&
row?.partnerFeedsList.length > 0 && (
<section className="icon-actions-container">
<Component
className="icon-chevron"
desiredFontSize={13}
onClick={e => {
e.stopPropagation();
e.preventDefault();
setTableData(currentTableData => {
const startIndex = currentTableData.findIndex(
item => item.feedId === row.feedId && item.partnerFeedsList && !isEmpty(item.partnerFeedsList)
);
if (startIndex !== -1) {
let newData = [...currentTableData];
newData[startIndex] = {
...newData[startIndex],
isExpanded: !newData[startIndex].isExpanded
};
setFormattedData(formatTableData(newData));
setScrollToIndex(startIndex);
return newData;
}
return currentTableData;
});
}}
/>
</section>
)
);
}
},
{
Header: 'Feed ID',
accessor: 'feedId',
sortMethod: (a, b, sortDirection) => {
if (parseInt(a?.feedId) < parseInt(b?.feedId)) return sortDirection === 'ASC' ? -1 : 1;
return sortDirection !== 'ASC' ? -1 : 1;
},
width: 220,
Cell: ({value, row: {partner}}) => (
<div className="feed-id">
<span>{value}</span>
<a
className="action-icon"
title="Download"
onClick={e => {
e.stopPropagation();
partnerFeedsAudit.downloadFeed(partner, value);
}}
>
<Download desiredFontSize={10} />
</a>
</div>
)
},
{
Header: 'Partner Name',
accessor: 'partner',
width: 150
},
{
Header: 'Total Expected Messages',
accessor: 'totalExpectedMessages',
width: 220
},
{
Header: 'Total Received Messages',
accessor: 'totalReceivedMessages',
width: 220
},
{
Header: 'Publish Timestamp',
accessor: 'publishedTimeStamp',
filterType: 'date-picker',
width: 210,
Cell: ({value}) => <div className="set-cell">{value ? moment(value).format(Constants.FORMAT_DATE) : value}</div>
}
];

return (
<section className={`${styles.partnerFeedsAudit} partner-feeds-audit`}>
<Header
onNavIconClick={appState.toggleLeftNav}
title={() => (
<div className="header-info">
<h1 className="global-header-super">Partner Feeds Audit</h1>
</div>
)}
/>
<div className="date-select-container">
<div className="form-dropdown">
<TypeAhead
placeholder="Select Feed Range"
showChevronIcon={true}
clearable={false}
selectOptions={{
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: partnerFeedTypeOptions,
showSelectedValue: true
}}
value={eventTypeSelectDateFeed}
onChange={selected => {
const endDate = moment().endOf('day');
let startDate;
switch (selected.value) {
case 'last7days':
startDate = moment()
.subtract(7, 'days')
.startOf('day');
break;
case 'last15days':
startDate = moment()
.subtract(15, 'days')
.startOf('day');
break;
case 'last30days':
startDate = moment()
.subtract(30, 'days')
.startOf('day');
break;
default:
startDate = moment()
.subtract(7, 'days')
.startOf('day');
}
const startDateTimeStamp = startDate.valueOf();
const endDateTimeStamp = endDate.valueOf();
partnerFeedsAudit.updateValue({key: 'eventTypeSelectDateFeed', value: selected});
partnerFeedsAudit.fetchFeedsAudit(startDateTimeStamp, endDateTimeStamp);
}}
/>
</div>
</div>

<section className="partner-feeds-audit-table-container">
{isFetching ? (
<div className="loader" />
) : (
<Position>
{({windowInnerHeight = window.innerHeight, width}) => {
if (isFetching) return <Loader />;
return (
<FilterTable
height={windowInnerHeight - 350}
width={Math.max(width, 1300)}
columns={columns}
data={formattedData}
ref={tableRef}
infiniteScroll={true}
enableGlobalFilter
rowCountRenderer={count => (
<>
{count > 0 && (
<>
<div className="row-label-export-container">
<button
className="global-link-bold"
onClick={() => {
let newTableData = [...tableData];
newTableData = newTableData?.map(data => {
if (data.partners && !isEmpty(data.partners)) {
data['isExpanded'] = true;
}
return data;
});
setTableData(newTableData);
setFormattedData(formatTableData(newTableData));
}}
>
Expand all
</button>
<button
className="global-link-bold"
onClick={() => {
let newTableData = [...tableData];
newTableData = newTableData?.map(data => {
if (data.partners && !isEmpty(data.partners)) {
data['isExpanded'] = false;
}
return data;
});
setTableData(newTableData);
setFormattedData(formatTableData(newTableData));
}}
>
Collapse all
</button>
</div>
<span>{`${count?.toLocaleString('en-US')} Partners`}</span>
</>
)}
</>
)}
defaultSorted={[
{
id: 'displayName',
desc: false
}
]}
tableProps={{
scrollToIndex,
onRowClick: () => {
updateValue({key: 'showDock', value: true});
}
}}
/>
);
}}
</Position>
)}
</section>
<FeedDock
isVisible={showDock}
onClose={() => {
updateValue({key: 'showDock', value: false});
}}
>
{showDock && <div>Feed Details</div>}
</FeedDock>
</section>
);
};

export default observer(PartnerFeedsAuditPage);