diff options
Diffstat (limited to 'app/javascript/mastodon/features/standalone/public_timeline/index.js')
-rw-r--r-- | app/javascript/mastodon/features/standalone/public_timeline/index.js | 116 |
1 files changed, 77 insertions, 39 deletions
diff --git a/app/javascript/mastodon/features/standalone/public_timeline/index.js b/app/javascript/mastodon/features/standalone/public_timeline/index.js index 618696eb1..5a67492ac 100644 --- a/app/javascript/mastodon/features/standalone/public_timeline/index.js +++ b/app/javascript/mastodon/features/standalone/public_timeline/index.js @@ -1,42 +1,59 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import StatusListContainer from '../../ui/containers/status_list_container'; -import { expandPublicTimeline } from '../../../actions/timelines'; -import Column from '../../../components/column'; -import ColumnHeader from '../../../components/column_header'; -import { defineMessages, injectIntl } from 'react-intl'; -import { connectPublicStream } from '../../../actions/streaming'; - -const messages = defineMessages({ - title: { id: 'standalone.public_title', defaultMessage: 'A look inside...' }, -}); - -export default @connect() -@injectIntl +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { expandPublicTimeline, expandCommunityTimeline } from 'mastodon/actions/timelines'; +import { connectPublicStream, connectCommunityStream } from 'mastodon/actions/streaming'; +import Masonry from 'react-masonry-infinite'; +import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; +import DetailedStatusContainer from 'mastodon/features/status/containers/detailed_status_container'; +import { debounce } from 'lodash'; +import LoadingIndicator from 'mastodon/components/loading_indicator'; + +const mapStateToProps = (state, { local }) => { + const timeline = state.getIn(['timelines', local ? 'community' : 'public'], ImmutableMap()); + + return { + statusIds: timeline.get('items', ImmutableList()), + isLoading: timeline.get('isLoading', false), + hasMore: timeline.get('hasMore', false), + }; +}; + +export default @connect(mapStateToProps) class PublicTimeline extends React.PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, + statusIds: ImmutablePropTypes.list.isRequired, + isLoading: PropTypes.bool.isRequired, + hasMore: PropTypes.bool.isRequired, + local: PropTypes.bool, }; - handleHeaderClick = () => { - this.column.scrollTop(); + componentDidMount () { + this._connect(); } - setRef = c => { - this.column = c; + componentDidUpdate (prevProps) { + if (prevProps.local !== this.props.local) { + this._disconnect(); + this._connect(); + } } - componentDidMount () { - const { dispatch } = this.props; + componentWillUnmount () { + this._disconnect(); + } - dispatch(expandPublicTimeline()); - this.disconnect = dispatch(connectPublicStream()); + _connect () { + const { dispatch, local } = this.props; + + dispatch(local ? expandCommunityTimeline() : expandPublicTimeline()); + this.disconnect = dispatch(local ? connectCommunityStream() : connectPublicStream()); } - componentWillUnmount () { + _disconnect () { if (this.disconnect) { this.disconnect(); this.disconnect = null; @@ -44,27 +61,48 @@ class PublicTimeline extends React.PureComponent { } handleLoadMore = maxId => { - this.props.dispatch(expandPublicTimeline({ maxId })); + const { dispatch, local } = this.props; + dispatch(local ? expandCommunityTimeline({ maxId }) : expandPublicTimeline({ maxId })); + } + + setRef = c => { + this.masonry = c; } + handleHeightChange = debounce(() => { + if (!this.masonry) { + return; + } + + this.masonry.forcePack(); + }, 50) + render () { - const { intl } = this.props; + const { statusIds, hasMore, isLoading } = this.props; + + const sizes = [ + { columns: 1, gutter: 0 }, + { mq: '415px', columns: 1, gutter: 10 }, + { mq: '640px', columns: 2, gutter: 10 }, + { mq: '960px', columns: 3, gutter: 10 }, + { mq: '1255px', columns: 3, gutter: 10 }, + ]; + + const loader = (isLoading && statusIds.isEmpty()) ? <LoadingIndicator key={0} /> : undefined; return ( - <Column ref={this.setRef} label={intl.formatMessage(messages.title)}> - <ColumnHeader - icon='globe' - title={intl.formatMessage(messages.title)} - onClick={this.handleHeaderClick} - /> - - <StatusListContainer - timelineId='public' - onLoadMore={this.handleLoadMore} - scrollKey='standalone_public_timeline' - trackScroll={false} - /> - </Column> + <Masonry ref={this.setRef} className='statuses-grid' hasMore={hasMore} loadMore={this.handleLoadMore} sizes={sizes} loader={loader}> + {statusIds.map(statusId => ( + <div className='statuses-grid__item' key={statusId}> + <DetailedStatusContainer + id={statusId} + compact + measureHeight + onHeightChange={this.handleHeightChange} + /> + </div> + )).toArray()} + </Masonry> ); } |