Notes

import React, {useEffect} from 'react';
import moment from 'moment-timezone';
import Papa from 'papaparse';
import Header from '@aosprodsys/brucke-ui-core/dist/es/components/Header';
import FilterTable from '@aosprodsys/brucke-ui-core/dist/es/components/filterTable/FilterTable';
import ActionsMenu from '@aosprodsys/brucke-ui-core/dist/es/components/ActionsMenuV2';
import Position from '@aosprodsys/brucke-ui-core/dist/es/components/Position';
import styles from '../sass/pages/feed-attributes.scss';
import {StoreContext} from '../utils/StoreContext';
import downloadFile from '../utils/downloadFile';

export const FeedAttributes = () => {
const {appState, feedAttributes} = React.useContext(StoreContext);
useEffect(() => {
feedAttributes.initialize();
feedAttributes.fetchFeedTypes();
}, []);
const tableColumns = [
{
Header: 'Attribute',
accessor: 'attribute'
},
{
Header: 'Immediate Parent',
accessor: 'immediateParent',
filterType: 'lookup-multiselect'
},
{
Header: 'Data Type',
accessor: 'dataType',
filterType: 'lookup-multiselect'
}
];
const {feedAttributesSchema, feedTypes, selectedFeedType} = feedAttributes;

const exportFeedAttributesData = (rows = []) => {
let exportRows = rows.map(row => ({
Attribute: row.attribute,
'Immediate Parent': row.immediateParent,
DataType: row.dataType
}));
downloadFile(
`feed_attribute_explorer_export_${moment(new Date()).format('YYYY_MM_DD_HHmm')}.csv`,
'text/csv',
`${Papa.unparse({
fields: Object.keys(exportRows[0] || {}),
data: exportRows
})}`
);
};
return (
<section className={`${styles.feedAttributes} feed-attributes`}>
<Header
onNavIconClick={appState.toggleLeftNav}
title={() => (
<div className="header-info">
<h1 className="global-header-super">Feed Attribute Explorer</h1>
<span className="global-header-subtitle">
(Information about attributes and where Deltamaker sources them from)
</span>
</div>
)}
/>

<section className="feed-attributes-table-container">
<Position>
{({width = window.innerWidth, windowInnerHeight = window.innerHeight}) => (
<FilterTable
height={windowInnerHeight - 350}
width={Math.max(width, 1300)}
columns={tableColumns}
data={feedAttributesSchema}
infiniteScroll={true}
enableGlobalFilter={true}
rowCountRenderer={count => (
<>
{count > 0 && (
<>
<div className="sub-actions-container">
<ActionsMenu
title={selectedFeedType}
align="right"
placement="bottom"
className="global-link-bold"
offsetX={0}
offsetY={8}
tooltipStyles={{borderTopLeftRadius: 0, borderTopRightRadius: 0}}
>
{feedTypes.map(option => (
<span
key={option.name}
className={`global-menu-link action-item`}
onClick={option => {
feedAttributes.updateValue({key: 'selectedFeedType', value: option});
}}
>
{option.label}
</span>
))}
</ActionsMenu>
</div>

<div className="row-label-export-container">
<button
className="global-link-bold"
onClick={() => {
exportFeedAttributesData(feedAttributesSchema);
}}
>
Export Table
</button>
<span>{`${count} ${count > 1 ? 'Rows' : 'Row'}`}</span>
</div>
</>
)}
</>
)}
/>
)}
</Position>
</section>
</section>
);
};

export default FeedAttributes;