gab-social/app/javascript/gabsocial/features/status.js
mgabdev bc6cf0e624 Added placeholder loaders to multiple components
• Added:
- placeholder loaders to multiple components
- status, panels, comment, lists, group items, notifications
2020-07-28 15:11:51 -05:00

85 lines
2.0 KiB
JavaScript

import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import {
fetchStatus,
fetchComments,
fetchContext,
} from '../actions/statuses'
import StatusContainer from '../containers/status_container'
import StatusPlaceholder from '../components/placeholder/status_placeholder'
const mapStateToProps = (state, props) => {
const statusId = props.id || props.params.statusId
return {
status: state.getIn(['statuses', statusId]),
}
}
const mapDispatchToProps = (dispatch) => ({
onFetchStatus: (id) => dispatch(fetchStatus(id)),
onFetchContext: (id) => dispatch(fetchContext(id)),
onFetchComments: (id) => dispatch(fetchComments(id)),
})
export default
@connect(mapStateToProps, mapDispatchToProps)
class Status extends ImmutablePureComponent {
static propTypes = {
onFetchContext: PropTypes.func.isRequired,
onFetchStatus: PropTypes.func.isRequired,
onFetchComments: PropTypes.func.isRequired,
params: PropTypes.object,
status: ImmutablePropTypes.map,
}
updateOnProps = [
'params',
'status',
]
componentDidMount() {
const statusId = this.props.id || this.props.params.statusId
this.props.onFetchStatus(statusId)
if (!!this.props.status) {
this.shouldFetchStatusParts(this.props.status)
}
}
componentDidUpdate(prevProps) {
const { status } = this.props
if (prevProps.status !== status && !!status) {
this.shouldFetchStatusParts(status)
}
}
shouldFetchStatusParts = (status) => {
if (!status) return
const isComment = !!status.get('in_reply_to_account_id')
const hasComments = status.get('replies_count') > 0
if (isComment) {
this.props.onFetchContext(status.get('id'))
} else if (!isComment && hasComments) {
this.props.onFetchComments(status.get('id'))
}
}
render() {
const { status } = this.props
if (!status) {
return <StatusPlaceholder />
}
return (
<StatusContainer {...this.props} contextType='feature' />
)
}
}