57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { Loader } from 'UI';
|
|
import IssueHeader from './IssueHeader';
|
|
import IssueCommentForm from './IssueCommentForm';
|
|
import IssueComment from './IssueComment';
|
|
import stl from './issueDetails.css';
|
|
import IssueDescription from './IssueDescription';
|
|
|
|
class IssueDetails extends React.PureComponent {
|
|
state = { searchQuery: ''}
|
|
|
|
write = (e, { name, value }) => this.setState({ [ name ]: value });
|
|
|
|
render() {
|
|
const { sessionId, issue, loading, users, issueTypeIcons, provider } = this.props;
|
|
const activities = issue.activities;
|
|
|
|
const assignee = users.filter(({id}) => issue.assignee === id).first();
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<Loader loading={ loading }>
|
|
<div>
|
|
<IssueHeader
|
|
issue={ issue }
|
|
typeIcon={ issueTypeIcons[issue.issueType] }
|
|
assignee={ assignee }
|
|
onSearchComment={ this.write }
|
|
/>
|
|
<div className={ cn( stl.activitiesList, 'p-6') }>
|
|
<IssueDescription
|
|
className="mb-10"
|
|
description={ issue.description }
|
|
provider={provider}
|
|
/>
|
|
|
|
{ activities.size > 0 && <h5 className="mb-4">Comments</h5>}
|
|
{ activities.map(activity => (
|
|
<IssueComment activity={ activity } key={activity.key} provider={provider} />
|
|
))}
|
|
</div>
|
|
<IssueCommentForm sessionId={ sessionId } issueId={ issue.id } />
|
|
</div>
|
|
</Loader>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(state => ({
|
|
users: state.getIn(['assignments', 'users']),
|
|
loading: state.getIn(['assignments', 'fetchAssignment', 'loading']),
|
|
issueTypeIcons: state.getIn(['assignments', 'issueTypeIcons']),
|
|
provider: state.getIn([ 'issues', 'list']).provider,
|
|
}))(IssueDetails);
|