|
|
@ -0,0 +1,107 @@ |
|
|
|
import React from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import PropTypes from 'prop-types'; |
|
|
|
import StatusListContainer from '../ui/containers/status_list_container'; |
|
|
|
import Column from '../../components/column'; |
|
|
|
import ColumnHeader from '../../components/column_header'; |
|
|
|
import { |
|
|
|
refreshDirectTimeline, |
|
|
|
expandDirectTimeline, |
|
|
|
} from '../../actions/timelines'; |
|
|
|
import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; |
|
|
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
|
|
|
import ColumnSettingsContainer from './containers/column_settings_container'; |
|
|
|
import { connectDirectStream } from '../../actions/streaming'; |
|
|
|
|
|
|
|
const messages = defineMessages({ |
|
|
|
title: { id: 'column.direct', defaultMessage: 'Direct messages' }, |
|
|
|
}); |
|
|
|
|
|
|
|
const mapStateToProps = state => ({ |
|
|
|
hasUnread: state.getIn(['timelines', 'direct', 'unread']) > 0, |
|
|
|
}); |
|
|
|
|
|
|
|
@connect(mapStateToProps) |
|
|
|
@injectIntl |
|
|
|
export default class DirectTimeline extends React.PureComponent { |
|
|
|
|
|
|
|
static propTypes = { |
|
|
|
dispatch: PropTypes.func.isRequired, |
|
|
|
columnId: PropTypes.string, |
|
|
|
intl: PropTypes.object.isRequired, |
|
|
|
hasUnread: PropTypes.bool, |
|
|
|
multiColumn: PropTypes.bool, |
|
|
|
}; |
|
|
|
|
|
|
|
handlePin = () => { |
|
|
|
const { columnId, dispatch } = this.props; |
|
|
|
|
|
|
|
if (columnId) { |
|
|
|
dispatch(removeColumn(columnId)); |
|
|
|
} else { |
|
|
|
dispatch(addColumn('DIRECT', {})); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
handleMove = (dir) => { |
|
|
|
const { columnId, dispatch } = this.props; |
|
|
|
dispatch(moveColumn(columnId, dir)); |
|
|
|
} |
|
|
|
|
|
|
|
handleHeaderClick = () => { |
|
|
|
this.column.scrollTop(); |
|
|
|
} |
|
|
|
|
|
|
|
componentDidMount () { |
|
|
|
const { dispatch } = this.props; |
|
|
|
|
|
|
|
dispatch(refreshDirectTimeline()); |
|
|
|
this.disconnect = dispatch(connectDirectStream()); |
|
|
|
} |
|
|
|
|
|
|
|
componentWillUnmount () { |
|
|
|
if (this.disconnect) { |
|
|
|
this.disconnect(); |
|
|
|
this.disconnect = null; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
setRef = c => { |
|
|
|
this.column = c; |
|
|
|
} |
|
|
|
|
|
|
|
handleLoadMore = () => { |
|
|
|
this.props.dispatch(expandDirectTimeline()); |
|
|
|
} |
|
|
|
|
|
|
|
render () { |
|
|
|
const { intl, hasUnread, columnId, multiColumn } = this.props; |
|
|
|
const pinned = !!columnId; |
|
|
|
|
|
|
|
return ( |
|
|
|
<Column ref={this.setRef}> |
|
|
|
<ColumnHeader |
|
|
|
icon='envelope' |
|
|
|
active={hasUnread} |
|
|
|
title={intl.formatMessage(messages.title)} |
|
|
|
onPin={this.handlePin} |
|
|
|
onMove={this.handleMove} |
|
|
|
onClick={this.handleHeaderClick} |
|
|
|
pinned={pinned} |
|
|
|
multiColumn={multiColumn} |
|
|
|
> |
|
|
|
<ColumnSettingsContainer /> |
|
|
|
</ColumnHeader> |
|
|
|
|
|
|
|
<StatusListContainer |
|
|
|
trackScroll={!pinned} |
|
|
|
scrollKey={`direct_timeline-${columnId}`} |
|
|
|
timelineId='direct' |
|
|
|
loadMore={this.handleLoadMore} |
|
|
|
emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />} |
|
|
|
/> |
|
|
|
</Column> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
} |