gab-social/app/javascript/gabsocial/features/groups/timeline/index.js

106 lines
3.1 KiB
JavaScript
Raw Normal View History

2019-07-02 08:10:25 +01:00
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import StatusListContainer from '../../ui/containers/status_list_container';
import Column from '../../../components/column';
import ColumnBackButton from '../../../components/column_back_button';
import ColumnHeader from '../../../components/column_header';
import { FormattedMessage, injectIntl } from 'react-intl';
import { connectGroupStream } from '../../../actions/streaming';
import { expandGroupTimeline } from '../../../actions/timelines';
import { fetchGroup } from '../../../actions/groups';
import MissingIndicator from '../../../components/missing_indicator';
import LoadingIndicator from '../../../components/loading_indicator';
import HeaderContainer from './containers/header_container';
const mapStateToProps = (state, props) => ({
group: state.getIn(['groups', props.params.id]),
hasUnread: state.getIn(['timelines', `group:${props.params.id}`, 'unread']) > 0,
});
export default @connect(mapStateToProps)
@injectIntl
class GroupTimeline extends React.PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
columnId: PropTypes.string,
hasUnread: PropTypes.bool,
group: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
intl: PropTypes.object.isRequired,
};
componentDidMount () {
const { dispatch } = this.props;
const { id } = this.props.params;
dispatch(fetchGroup(id));
dispatch(expandGroupTimeline(id));
this.disconnect = dispatch(connectGroupStream(id));
}
componentWillUnmount () {
if (this.disconnect) {
this.disconnect();
this.disconnect = null;
}
}
handleLoadMore = maxId => {
const { id } = this.props.params;
this.props.dispatch(expandGroupTimeline(id, { maxId }));
}
render () {
const { hasUnread, columnId, group } = this.props;
const { id } = this.props.params;
const title = group ? group.get('title') : id;
if (typeof group === 'undefined') {
return (
<Column>
<div>
<LoadingIndicator />
</div>
</Column>
);
} else if (group === false) {
return (
<Column>
<ColumnBackButton />
<MissingIndicator />
</Column>
);
}
return (
<Column label={title}>
<ColumnHeader icon='list-ul' active={hasUnread} title={title}>
<div className='column-header__links'>
{/* Leave might be here */}
</div>
<hr />
</ColumnHeader>
<StatusListContainer
prepend={<HeaderContainer groupId={id} />}
alwaysPrepend
scrollKey={`group_timeline-${columnId}`}
timelineId={`group:${id}`}
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.group' defaultMessage='There is nothing in this group yet. When members of this group post new statuses, they will appear here.' />}
/>
</Column>
);
}
}