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 ActionsMenu from '@aosprodsys/brucke-ui-core/dist/es/components/ActionsMenuV2';
import FeedDetailsPage from './FeedDetailsPage';
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,
selectedFeedId
} = partnerFeedsAudit;
useEffect(() => {
const startDate = moment()
.subtract(7, 'days')
.format('YYYY-MM-DD');
partnerFeedsAudit.fetchFeedsAudit(startDate);
}, []);

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

useEffect(
() => {
const newData = partnerFeedsAuditData.map((data, index) => ({
...data,
isExpanded: false,
uniqueId: `${data.feedId}-${data.feedType}-${index}`
}));
setTableData(newData);
},
[partnerFeedsAuditData]
);

const formatTableData = formatData => {
return formatData.reduce((newData, data) => {
newData.push(data);
if (
'isExpanded' in data &&
data.isExpanded === true &&
data.partnerFeedsList &&
!isEmpty(data.partnerFeedsList)
) {
newData = [...newData, ...data.partnerFeedsList];
}
return newData;
}, []);
};
const [formattedData, setFormattedData] = useState(formatTableData(tableData));
const [scrollToIndex, setScrollToIndex] = useState(undefined);

useEffect(
() => {
const formatted = formatTableData(tableData);
setFormattedData(formatted);
},
[tableData]
);
const handleOptionClick = optionValue => {
let startDate;
switch (optionValue) {
case 'Last 7 days':
startDate = moment()
.subtract(7, 'days')
.format('YYYY-MM-DD');
break;
case 'Last 15 days':
startDate = moment()
.subtract(15, 'days')
.format('YYYY-MM-DD');
break;
case 'Last 30 days':
startDate = moment()
.subtract(30, 'days')
.format('YYYY-MM-DD');
break;
default:
startDate = moment()
.subtract(7, 'days')
.format('YYYY-MM-DD');
}
partnerFeedsAudit.updateValue({
key: 'eventTypeSelectDateFeed',
value: optionValue
});
partnerFeedsAudit.fetchFeedsAudit(startDate);
};

const columns = [
{
Header: '',
hideFilter: true,
accessor: '',
width: 60,
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 form-checkbox"
desiredFontSize={8}
onClick={e => {
e.stopPropagation();
e.preventDefault();
setTableData(currentTableData => {
const startIndex = currentTableData.findIndex(item => item.uniqueId === row.uniqueId);
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: 'Feed Types',
accessor: 'feedType',
width: 150
},
{
Header: 'Partner Name',
accessor: 'partner',
filterType: 'lookup-multiselect',
width: 150
},
{
Header: 'Total Expected Messages',
accessor: 'totalExpectedMessages',
width: 220
},
{
Header: 'Total Received Messages',
accessor: 'totalReceivedMessages',
width: 220
},
{
Header: 'Group Type',
accessor: 'groupType',
width: 150
},
{
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="Partner Feeds Audit" />
<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.partnerFeedsList && !isEmpty(data.partnerFeedsList)) {
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.partnerFeedsList && !isEmpty(data.partnerFeedsList)) {
data['isExpanded'] = false;
}
return data;
});
setTableData(newTableData);
setFormattedData(formatTableData(newTableData));
}}
>
Collapse all
</button>
</div>
<div className="date-select-container">
<ActionsMenu
title={eventTypeSelectDateFeed}
align="right"
placement="bottom"
className="global-link-bold"
offsetX={0}
offsetY={8}
tooltipStyles={{borderTopLeftRadius: 0, borderTopRightRadius: 0}}
>
{partnerFeedTypeOptions.map(option => (
<span
key={option.value}
className={`global-menu-link action-item`}
onClick={() => handleOptionClick(option.value)}
>
{option.label}
</span>
))}
</ActionsMenu>
</div>
<span>{`${count?.toLocaleString('en-US')} Partners`}</span>
</>
)}
</>
)}
defaultSorted={[
{
id: 'displayName',
desc: true
}
]}
tableProps={{
scrollToIndex,
onRowClick: ({rowData}) => {
updateValue({key: 'selectedFeedId', value: rowData});
updateValue({key: 'showDock', value: true});
}
}}
/>
);
}}
</Position>
)}
</section>
<FeedDock
isVisible={showDock}
onClose={() => {
updateValue({key: 'showDock', value: false});
updateValue({key: 'selectedFeedId', value: {}});
updateValue({key: 'feedTypeOptions', value: []});
updateValue({key: 'explorerFeedsAudit', value: []});
updateValue({key: 'marketingContextAudit', value: {}});
}}
partnerDetails={selectedFeedId}
>
{showDock && <FeedDetailsPage partnerDetails={selectedFeedId} />}
</FeedDock>
</section>
);
};

export default observer(PartnerFeedsAuditPage);