Port 02ba9cfa35
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
parent
84da970d6b
commit
14ddb85c3b
4 changed files with 0 additions and 214 deletions
@ -1,90 +0,0 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import { expandHashtagTimeline } from 'flavours/glitch/actions/timelines'; |
||||
import Masonry from 'react-masonry-infinite'; |
||||
import { List as ImmutableList } from 'immutable'; |
||||
import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container'; |
||||
import { debounce } from 'lodash'; |
||||
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; |
||||
|
||||
const mapStateToProps = (state, { hashtag }) => ({ |
||||
statusIds: state.getIn(['timelines', `hashtag:${hashtag}`, 'items'], ImmutableList()), |
||||
isLoading: state.getIn(['timelines', `hashtag:${hashtag}`, 'isLoading'], false), |
||||
hasMore: state.getIn(['timelines', `hashtag:${hashtag}`, 'hasMore'], false), |
||||
}); |
||||
|
||||
export default @connect(mapStateToProps) |
||||
class HashtagTimeline extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
dispatch: PropTypes.func.isRequired, |
||||
statusIds: ImmutablePropTypes.list.isRequired, |
||||
isLoading: PropTypes.bool.isRequired, |
||||
hasMore: PropTypes.bool.isRequired, |
||||
hashtag: PropTypes.string.isRequired, |
||||
local: PropTypes.bool.isRequired, |
||||
}; |
||||
|
||||
static defaultProps = { |
||||
local: false, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { dispatch, hashtag, local } = this.props; |
||||
|
||||
dispatch(expandHashtagTimeline(hashtag, { local })); |
||||
} |
||||
|
||||
handleLoadMore = () => { |
||||
const { dispatch, hashtag, local, statusIds } = this.props; |
||||
const maxId = statusIds.last(); |
||||
|
||||
if (maxId) { |
||||
dispatch(expandHashtagTimeline(hashtag, { maxId, local })); |
||||
} |
||||
} |
||||
|
||||
setRef = c => { |
||||
this.masonry = c; |
||||
} |
||||
|
||||
handleHeightChange = debounce(() => { |
||||
if (!this.masonry) { |
||||
return; |
||||
} |
||||
|
||||
this.masonry.forcePack(); |
||||
}, 50) |
||||
|
||||
render () { |
||||
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 ( |
||||
<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> |
||||
); |
||||
} |
||||
|
||||
} |
@ -1,100 +0,0 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import { expandPublicTimeline, expandCommunityTimeline } from 'flavours/glitch/actions/timelines'; |
||||
import Masonry from 'react-masonry-infinite'; |
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; |
||||
import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container'; |
||||
import { debounce } from 'lodash'; |
||||
import LoadingIndicator from 'flavours/glitch/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, |
||||
statusIds: ImmutablePropTypes.list.isRequired, |
||||
isLoading: PropTypes.bool.isRequired, |
||||
hasMore: PropTypes.bool.isRequired, |
||||
local: PropTypes.bool, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
this._connect(); |
||||
} |
||||
|
||||
componentDidUpdate (prevProps) { |
||||
if (prevProps.local !== this.props.local) { |
||||
this._disconnect(); |
||||
this._connect(); |
||||
} |
||||
} |
||||
|
||||
_connect () { |
||||
const { dispatch, local } = this.props; |
||||
|
||||
dispatch(local ? expandCommunityTimeline() : expandPublicTimeline()); |
||||
} |
||||
|
||||
handleLoadMore = () => { |
||||
const { dispatch, statusIds, local } = this.props; |
||||
const maxId = statusIds.last(); |
||||
|
||||
if (maxId) { |
||||
dispatch(local ? expandCommunityTimeline({ maxId }) : expandPublicTimeline({ maxId })); |
||||
} |
||||
} |
||||
|
||||
setRef = c => { |
||||
this.masonry = c; |
||||
} |
||||
|
||||
handleHeightChange = debounce(() => { |
||||
if (!this.masonry) { |
||||
return; |
||||
} |
||||
|
||||
this.masonry.forcePack(); |
||||
}, 50) |
||||
|
||||
render () { |
||||
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 ( |
||||
<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> |
||||
); |
||||
} |
||||
|
||||
} |
@ -1,23 +0,0 @@ |
||||
import 'packs/public-path'; |
||||
import loadPolyfills from 'flavours/glitch/load_polyfills'; |
||||
|
||||
function loaded() { |
||||
const TimelineContainer = require('flavours/glitch/containers/timeline_container').default; |
||||
const React = require('react'); |
||||
const ReactDOM = require('react-dom'); |
||||
const mountNode = document.getElementById('mastodon-timeline'); |
||||
|
||||
if (mountNode !== null) { |
||||
const props = JSON.parse(mountNode.getAttribute('data-props')); |
||||
ReactDOM.render(<TimelineContainer {...props} />, mountNode); |
||||
} |
||||
} |
||||
|
||||
function main() { |
||||
const ready = require('flavours/glitch/ready').default; |
||||
ready(loaded); |
||||
} |
||||
|
||||
loadPolyfills().then(main).catch(error => { |
||||
console.error(error); |
||||
}); |
Loading…
Reference in new issue