* Lists all Direct statuses you've sent and received * Displayed in Getting Started * Streaming server support for direct TL
		
			
				
	
	
		
			107 lines
		
	
	
	
		
			2.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			107 lines
		
	
	
	
		
			2.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| 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>
 | |
|     );
 | |
|   }
 | |
| 
 | |
| }
 |