87 lines
3.1 KiB
JavaScript
87 lines
3.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Loader, Message, Tab, Label, Menu } from 'semantic-ui-react';
|
|
|
|
class UploadResults extends Component {
|
|
render(){
|
|
const {pending, result, error} = this.props;
|
|
|
|
const parsedEntries = result && result.parsedData ? result.parsedData : [];
|
|
const errorEntries = result && result.parserErrors ? result.parserErrors : [];
|
|
const unknownMembers = result && result.unknownMembers ? result.unknownMembers : [];
|
|
|
|
const renderParsedEntriesTab = () => {
|
|
return (
|
|
<div>
|
|
<br/>
|
|
<Message positive>
|
|
<p>{parsedEntries.length} entries successfully parsed</p>
|
|
</Message>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderErrorTabResults = (results) => {
|
|
return (
|
|
<div>
|
|
<br/>
|
|
{
|
|
results.map((entry, index) => {
|
|
return (
|
|
<div key={`error-${entry.error}-${index}`}>
|
|
<br/>
|
|
<Message negative>
|
|
<Message.Header>{entry.error}</Message.Header>
|
|
<p>{JSON.stringify(entry.details)}</p>
|
|
<p>File : {entry.file}</p>
|
|
</Message>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const parsedEntriesTabTitle = (<Menu.Item key="parsed-entries">Parsed Entries<Label>{parsedEntries.length}</Label></Menu.Item>);
|
|
const errorEntriesTabTitle = (<Menu.Item key="error-entries">Error Entries<Label>{errorEntries.length}</Label></Menu.Item>);
|
|
const unknownMembersTabTitle = (<Menu.Item key="unknown-members">Unknown Members<Label>{unknownMembers.length}</Label></Menu.Item>);
|
|
|
|
const panes = [
|
|
{menuItem: parsedEntriesTabTitle, render: renderParsedEntriesTab},
|
|
{menuItem: errorEntriesTabTitle, render: () => renderErrorTabResults(errorEntries)},
|
|
{menuItem: unknownMembersTabTitle, render: () => renderErrorTabResults(unknownMembers)}
|
|
];
|
|
|
|
|
|
return (
|
|
<div>
|
|
{
|
|
pending && <Loader active />
|
|
}
|
|
<br/>
|
|
{
|
|
!pending && !error && result &&
|
|
<Tab panes={panes}/>
|
|
}
|
|
{
|
|
!pending && error &&
|
|
<Message>
|
|
<Message.Header>Upload Failed</Message.Header>
|
|
<p>{error.data}</p>
|
|
</Message>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
pending: state.doorLockData.pending,
|
|
result: state.doorLockData.result,
|
|
error: state.doorLockData.error,
|
|
|
|
});
|
|
|
|
export default connect(mapStateToProps)(UploadResults);
|