openreplay/frontend/app/components/Errors/Error/ErrorInfo.js
2021-05-20 14:46:37 +05:30

122 lines
No EOL
3.1 KiB
JavaScript

import { connect } from 'react-redux';
import withSiteIdRouter from 'HOCs/withSiteIdRouter';
import { errors as errorsRoute, error as errorRoute } from 'App/routes';
import { NoContent , Loader, IconButton, Icon, Popup, BackLink, } from 'UI';
import { fetch, fetchTrace } from 'Duck/errors';
import MainSection from './MainSection';
import SideSection from './SideSection';
@connect(state =>({
errorIdInStore: state.getIn(["errors", "instance"]).errorId,
loading: state.getIn([ "errors", "fetch", "loading" ]) || state.getIn([ "errors", "fetchTrace", "loading" ]),
errorOnFetch: state.getIn(["errors", "fetch", "errors"]) || state.getIn([ "errors", "fetchTrace", "errors" ]),
}), {
fetch,
fetchTrace,
})
@withSiteIdRouter
export default class ErrorInfo extends React.PureComponent {
ensureInstance() {
const { errorId, loading, errorOnFetch } = this.props;
if (!loading &&
this.props.errorIdInStore !== errorId &&
errorId != null) {
this.props.fetch(errorId);
this.props.fetchTrace(errorId)
}
}
componentDidMount() {
this.ensureInstance();
}
componentDidUpdate() {
this.ensureInstance();
}
next = () => {
const { list, errorId } = this.props;
const curIndex = list.findIndex(e => e.errorId === errorId);
const next = list.get(curIndex + 1);
if (next != null) {
this.props.history.push(errorRoute(next.errorId))
}
}
prev = () => {
const { list, errorId } = this.props;
const curIndex = list.findIndex(e => e.errorId === errorId);
const prev = list.get(curIndex - 1);
if (prev != null) {
this.props.history.push(errorRoute(prev.errorId))
}
}
render() {
const {
loading,
errorIdInStore,
list,
errorId,
} = this.props;
let nextDisabled = true,
prevDisabled = true;
if (list.size > 0) {
nextDisabled = loading || list.last().errorId === errorId;
prevDisabled = loading || list.first().errorId === errorId;
}
return (
<NoContent
title="No Error Found!"
subtext="Please try to find existing one."
icon="exclamation-circle"
show={ !loading && errorIdInStore == null }
>
<div className="w-9/12 mb-4 flex justify-between">
<BackLink to={ errorsRoute() } label="Back" />
<div className="flex items-center">
<Popup
pinned
position="bottom center"
inverted
trigger={
<IconButton
// className="mr-3"
outline
compact
size="small"
icon="prev1"
disabled={ prevDisabled }
onClick={this.prev}
/>
}
content="Prev Error"
/>
<div className="mr-3" />
<Popup
pinned
inverted
position="bottom center"
trigger={
<IconButton
outline
compact
size="small"
icon="next1"
disabled={ nextDisabled }
onClick={this.next}
/>
}
content="Next Error"
/>
</div>
</div>
<div className="flex" >
<Loader loading={ loading } className="w-9/12">
<MainSection className="w-9/12" />
<SideSection className="w-3/12" />
</Loader>
</div>
</NoContent>
);
}
}