EditFederationModal: convert to tsx
This commit is contained in:
Alex Gleason
parent
5a23d75aa5
commit
57cfd9b18e
|
|
@ -167,6 +167,7 @@ interface ICheckbox {
|
||||||
hint?: React.ReactNode,
|
hint?: React.ReactNode,
|
||||||
name?: string,
|
name?: string,
|
||||||
checked?: boolean,
|
checked?: boolean,
|
||||||
|
disabled?: boolean,
|
||||||
onChange?: React.ChangeEventHandler<HTMLInputElement>,
|
onChange?: React.ChangeEventHandler<HTMLInputElement>,
|
||||||
required?: boolean,
|
required?: boolean,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
import { Map as ImmutableMap, is } from 'immutable';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import { updateMrf } from 'soapbox/actions/mrf';
|
|
||||||
import snackbar from 'soapbox/actions/snackbar';
|
|
||||||
import { SimpleForm, Checkbox } from 'soapbox/features/forms';
|
|
||||||
import { makeGetRemoteInstance } from 'soapbox/selectors';
|
|
||||||
|
|
||||||
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' },
|
|
||||||
success: { id: 'edit_federation.success', defaultMessage: '{host} federation was updated' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapStateToProps = (state, { host }) => {
|
|
||||||
return {
|
|
||||||
remoteInstance: getRemoteInstance(state, host),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps)
|
|
||||||
@injectIntl
|
|
||||||
class EditFederationModal extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
host: PropTypes.string.isRequired,
|
|
||||||
remoteInstance: ImmutablePropTypes.map,
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
|
||||||
data: ImmutableMap(),
|
|
||||||
}
|
|
||||||
|
|
||||||
hydrateState = () => {
|
|
||||||
const { remoteInstance } = this.props;
|
|
||||||
this.setState({ data: remoteInstance.get('federation') });
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.hydrateState();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const { remoteInstance } = this.props;
|
|
||||||
|
|
||||||
if (!is(prevProps.remoteInstance, remoteInstance)) {
|
|
||||||
this.hydrateState();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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 => {
|
|
||||||
const { intl, dispatch, host, onClose } = this.props;
|
|
||||||
const { data } = this.state;
|
|
||||||
|
|
||||||
dispatch(updateMrf(host, data))
|
|
||||||
.then(() => dispatch(snackbar.success(intl.formatMessage(messages.success, { host }))))
|
|
||||||
.catch(() => {});
|
|
||||||
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { intl, remoteInstance } = this.props;
|
|
||||||
const { data } = this.state;
|
|
||||||
|
|
||||||
const {
|
|
||||||
avatar_removal,
|
|
||||||
banner_removal,
|
|
||||||
federated_timeline_removal,
|
|
||||||
followers_only,
|
|
||||||
media_nsfw,
|
|
||||||
media_removal,
|
|
||||||
reject,
|
|
||||||
} = data.toJS();
|
|
||||||
|
|
||||||
const fullMediaRemoval = avatar_removal && banner_removal && media_removal;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='modal-root__modal edit-federation-modal'>
|
|
||||||
<div>
|
|
||||||
<div className='edit-federation-modal__title'>
|
|
||||||
{remoteInstance.get('host')}
|
|
||||||
</div>
|
|
||||||
<SimpleForm onSubmit={this.handleSubmit}>
|
|
||||||
<Checkbox
|
|
||||||
label={intl.formatMessage(messages.reject)}
|
|
||||||
checked={reject}
|
|
||||||
onChange={this.handleDataChange('reject')}
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
label={intl.formatMessage(messages.mediaRemoval)}
|
|
||||||
disabled={reject}
|
|
||||||
checked={fullMediaRemoval}
|
|
||||||
onChange={this.handleMediaRemoval}
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
label={intl.formatMessage(messages.forceNsfw)}
|
|
||||||
disabled={reject || media_removal}
|
|
||||||
checked={media_nsfw}
|
|
||||||
onChange={this.handleDataChange('media_nsfw')}
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
label={intl.formatMessage(messages.followersOnly)}
|
|
||||||
disabled={reject}
|
|
||||||
checked={followers_only}
|
|
||||||
onChange={this.handleDataChange('followers_only')}
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
label={intl.formatMessage(messages.unlisted)}
|
|
||||||
disabled={reject || followers_only}
|
|
||||||
checked={federated_timeline_removal}
|
|
||||||
onChange={this.handleDataChange('federated_timeline_removal')}
|
|
||||||
/>
|
|
||||||
<button type='submit' className='edit-federation-modal__submit'>
|
|
||||||
{intl.formatMessage(messages.save)}
|
|
||||||
</button>
|
|
||||||
</SimpleForm>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
import { Map as ImmutableMap } from 'immutable';
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import { updateMrf } from 'soapbox/actions/mrf';
|
||||||
|
import snackbar from 'soapbox/actions/snackbar';
|
||||||
|
import { SimpleForm, Checkbox } from 'soapbox/features/forms';
|
||||||
|
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||||
|
import { makeGetRemoteInstance } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
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' },
|
||||||
|
success: { id: 'edit_federation.success', defaultMessage: '{host} federation was updated' },
|
||||||
|
});
|
||||||
|
|
||||||
|
interface IEditFederationModal {
|
||||||
|
host: string,
|
||||||
|
onClose: () => void,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Modal for moderators to edit federation with a remote instance. */
|
||||||
|
const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
|
||||||
|
|
||||||
|
const [data, setData] = useState(ImmutableMap<string, any>());
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setData(remoteInstance.get('federation') as any);
|
||||||
|
}, [remoteInstance]);
|
||||||
|
|
||||||
|
const handleDataChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {
|
||||||
|
return ({ target }) => {
|
||||||
|
setData(data.set(key, target.checked));
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMediaRemoval: React.ChangeEventHandler<HTMLInputElement> = ({ target: { checked } }) => {
|
||||||
|
const newData = data.merge({
|
||||||
|
avatar_removal: checked,
|
||||||
|
banner_removal: checked,
|
||||||
|
media_removal: checked,
|
||||||
|
});
|
||||||
|
|
||||||
|
setData(newData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit: React.FormEventHandler = () => {
|
||||||
|
dispatch(updateMrf(host, data))
|
||||||
|
.then(() => dispatch(snackbar.success(intl.formatMessage(messages.success, { host }))))
|
||||||
|
.catch(() => {});
|
||||||
|
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const {
|
||||||
|
avatar_removal,
|
||||||
|
banner_removal,
|
||||||
|
federated_timeline_removal,
|
||||||
|
followers_only,
|
||||||
|
media_nsfw,
|
||||||
|
media_removal,
|
||||||
|
reject,
|
||||||
|
} = data.toJS() as Record<string, boolean>;
|
||||||
|
|
||||||
|
const fullMediaRemoval = avatar_removal && banner_removal && media_removal;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='modal-root__modal edit-federation-modal'>
|
||||||
|
<div>
|
||||||
|
<div className='edit-federation-modal__title'>
|
||||||
|
{host}
|
||||||
|
</div>
|
||||||
|
<SimpleForm onSubmit={handleSubmit}>
|
||||||
|
<Checkbox
|
||||||
|
label={intl.formatMessage(messages.reject)}
|
||||||
|
checked={reject}
|
||||||
|
onChange={handleDataChange('reject')}
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
label={intl.formatMessage(messages.mediaRemoval)}
|
||||||
|
disabled={reject}
|
||||||
|
checked={fullMediaRemoval}
|
||||||
|
onChange={handleMediaRemoval}
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
label={intl.formatMessage(messages.forceNsfw)}
|
||||||
|
disabled={reject || media_removal}
|
||||||
|
checked={media_nsfw}
|
||||||
|
onChange={handleDataChange('media_nsfw')}
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
label={intl.formatMessage(messages.followersOnly)}
|
||||||
|
disabled={reject}
|
||||||
|
checked={followers_only}
|
||||||
|
onChange={handleDataChange('followers_only')}
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
label={intl.formatMessage(messages.unlisted)}
|
||||||
|
disabled={reject || followers_only}
|
||||||
|
checked={federated_timeline_removal}
|
||||||
|
onChange={handleDataChange('federated_timeline_removal')}
|
||||||
|
/>
|
||||||
|
<button type='submit' className='edit-federation-modal__submit'>
|
||||||
|
{intl.formatMessage(messages.save)}
|
||||||
|
</button>
|
||||||
|
</SimpleForm>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditFederationModal;
|
||||||
Loading…
Reference in New Issue