43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
import React, { useEffect } from 'react'
|
|
import IssueItem from 'Components/Funnels/IssueItem'
|
|
import FunnelSessionList from 'Components/Funnels/FunnelSessionList'
|
|
import { connect } from 'react-redux'
|
|
import { withRouter } from 'react-router'
|
|
import { fetchIssue, setNavRef, resetIssue } from 'Duck/funnels'
|
|
import { funnel as funnelRoute, withSiteId } from 'App/routes'
|
|
import { Loader } from 'UI'
|
|
|
|
function FunnelIssueDetails(props) {
|
|
const { issue, issueId, funnelId, loading = false } = props;
|
|
|
|
useEffect(() => {
|
|
props.fetchIssue(funnelId, issueId)
|
|
|
|
return () => {
|
|
props.resetIssue();
|
|
}
|
|
}, [issueId])
|
|
|
|
const onBack = () => {
|
|
const { siteId, history } = props;
|
|
history.push(withSiteId(funnelRoute(parseInt(funnelId)), siteId));
|
|
}
|
|
|
|
return (
|
|
<div className="page-margin container-70" >
|
|
<Loader loading={loading}>
|
|
<IssueItem issue={issue} inDetails onBack={onBack} />
|
|
<div className="my-6" />
|
|
<FunnelSessionList funnelId={funnelId} issueId={issueId} inDetails />
|
|
</Loader>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect((state, props) => ({
|
|
loading: state.getIn(['funnels', 'fetchIssueRequest', 'loading']),
|
|
issue: state.getIn(['funnels', 'issue']),
|
|
issueId: props.match.params.issueId,
|
|
funnelId: props.match.params.funnelId,
|
|
siteId: state.getIn([ 'site', 'siteId' ]),
|
|
}), { fetchIssue, setNavRef, resetIssue })(withRouter(FunnelIssueDetails))
|