diff --git a/app/soapbox/features/ui/components/edit_federation_modal.js b/app/soapbox/features/ui/components/edit_federation_modal.js index c83ba6557..4a914148b 100644 --- a/app/soapbox/features/ui/components/edit_federation_modal.js +++ b/app/soapbox/features/ui/components/edit_federation_modal.js @@ -1,12 +1,24 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { defineMessages, injectIntl } from 'react-intl'; import { SimpleForm, Checkbox } from 'soapbox/features/forms'; import { makeGetRemoteInstance } from 'soapbox/selectors'; +import { Map as ImmutableMap } from 'immutable'; const getRemoteInstance = makeGetRemoteInstance(); +const messages = defineMessages({ + reject: { id: 'edit_federation.reject', defaultMessage: 'Reject all activities' }, + mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' }, + forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' }, + unlisted: { id: 'edit_federation.unlisted', defaultMessage: 'Force posts unlisted' }, + followersOnly: { id: 'edit_federation.followers_only', defaultMessage: 'Hide posts except to followers' }, + save: { id: 'edit_federation.save', defaultMessage: 'Save' }, +}); + const mapStateToProps = (state, { host }) => { return { remoteInstance: getRemoteInstance(state, host), @@ -14,15 +26,47 @@ const mapStateToProps = (state, { host }) => { }; export default @connect(mapStateToProps) -class EditFederationModal extends React.PureComponent { +@injectIntl +class EditFederationModal extends ImmutablePureComponent { static propTypes = { host: PropTypes.string.isRequired, remoteInstance: ImmutablePropTypes.map, }; - render() { + state = { + data: ImmutableMap(), + } + + componentDidMount() { const { remoteInstance } = this.props; + this.setState({ data: remoteInstance.get('federation') }); + } + + handleDataChange = key => { + return ({ target }) => { + const { data } = this.state; + this.setState({ data: data.set(key, target.checked) }); + }; + } + + handleMediaRemoval = ({ target: { checked } }) => { + const data = this.state.data.merge({ + avatar_removal: checked, + banner_removal: checked, + media_removal: checked, + }); + + this.setState({ data }); + } + + handleSubmit = e => { + // TODO + } + + render() { + const { intl, remoteInstance } = this.props; + const { data } = this.state; const { avatar_removal, @@ -32,18 +76,51 @@ class EditFederationModal extends React.PureComponent { media_nsfw, media_removal, reject, - } = remoteInstance.get('federation').toJS(); + } = data.toJS(); + + const fullMediaRemoval = avatar_removal && banner_removal && media_removal; return (