gab-social/app/javascript/gabsocial/components/modal/status_revisions_modal.js

96 lines
2.8 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-03-27 22:57:03 +00:00
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { CX } from '../../constants'
2020-03-27 22:57:03 +00:00
import { loadStatusRevisions } from '../../actions/status_revisions'
import ModalLayout from './modal_layout'
import RelativeTimestamp from '../relative_timestamp'
import Text from '../text'
class StatusRevisionsModal extends ImmutablePureComponent {
componentDidMount() {
this.props.onLoadStatusRevisions(this.props.status.get('id'))
}
render() {
const {
intl,
status,
2020-04-07 02:53:23 +01:00
revisions,
onClose
2020-03-27 22:57:03 +00:00
} = this.props
return (
2020-04-07 02:53:23 +01:00
<ModalLayout
title={intl.formatMessage(messages.title)}
2020-04-28 06:33:58 +01:00
width={480}
2020-04-07 02:53:23 +01:00
onClose={onClose}
>
<div className={[_s.d]}>
2020-04-28 06:33:58 +01:00
{
revisions.map((revision, i) => {
const isFirst = i === 0
const isLast = i === revisions.size - 1
2020-03-27 22:57:03 +00:00
const containerClasses = CX({
d: 1,
2020-04-28 06:33:58 +01:00
pt5: 1,
pb10: 1,
mt5: !isFirst,
borderColorSecondary: !isLast,
borderBottom1PX: !isLast,
})
2020-03-27 22:57:03 +00:00
2020-04-28 06:33:58 +01:00
return (
<div key={`status-revision-${i}`} className={containerClasses}>
<div className={[_s.d, _s.pb5].join(' ')}>
2020-04-28 06:33:58 +01:00
<Text size='medium'>
{revision.get('text')}
</Text>
2020-03-27 22:57:03 +00:00
</div>
<div className={[_s.d]}>
2020-04-28 06:33:58 +01:00
<Text size='small' color='secondary'>
Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
</Text>
</div>
</div>
)
})
}
2020-03-27 22:57:03 +00:00
</div>
</ModalLayout>
)
}
}
const messages = defineMessages({
title: { id: 'status_revisions.heading', defaultMessage: 'Revision History' },
})
const mapStateToProps = (state) => ({
loading: state.getIn(['status_revisions', 'loading']),
error: state.getIn(['status_revisions', 'error']),
revisions: state.getIn(['status_revisions', 'revisions']),
})
const mapDispatchToProps = (dispatch) => ({
onLoadStatusRevisions(statusId) {
dispatch(loadStatusRevisions(statusId))
},
})
StatusRevisionsModal.propTypes = {
intl: PropTypes.object.isRequired,
status: ImmutablePropTypes.map.isRequired,
onLoadStatusRevisions: PropTypes.func.isRequired,
loading: PropTypes.bool.isRequired,
error: PropTypes.bool,
revisions: ImmutablePropTypes.list.isRequired,
onClose: PropTypes.func.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(StatusRevisionsModal))