Merge branch 'remote-instance' into 'develop'
Remote instance TSX conversions See merge request soapbox-pub/soapbox-fe!1341
This commit is contained in:
Alex Gleason
commit
2ebf735884
|
|
@ -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,46 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
|
||||||
const settings = getSettings(state);
|
|
||||||
|
|
||||||
return {
|
|
||||||
pinnedHosts: settings.getIn(['remote_timeline', 'pinnedHosts']),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
class PinnedHostsPicker extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
dispatch: PropTypes.func.isRequired,
|
|
||||||
pinnedHosts: ImmutablePropTypes.orderedSet,
|
|
||||||
host: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { pinnedHosts, host: activeHost } = this.props;
|
|
||||||
|
|
||||||
if (!pinnedHosts || pinnedHosts.isEmpty()) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='pinned-hosts-picker'>
|
|
||||||
{pinnedHosts.map(host => (
|
|
||||||
<div className={classNames('pinned-host', { 'active': host === activeHost })} key={host}>
|
|
||||||
<Link to={`/timeline/${host}`}>{host}</Link>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(mapStateToProps)(PinnedHostsPicker);
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { useSettings } from 'soapbox/hooks';
|
||||||
|
|
||||||
|
interface IPinnedHostsPicker {
|
||||||
|
/** The active host among pinned hosts. */
|
||||||
|
host: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const PinnedHostsPicker: React.FC<IPinnedHostsPicker> = ({ host: activeHost }) => {
|
||||||
|
const settings = useSettings();
|
||||||
|
const pinnedHosts = settings.getIn(['remote_timeline', 'pinnedHosts']) as any;
|
||||||
|
|
||||||
|
if (!pinnedHosts || pinnedHosts.isEmpty()) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='pinned-hosts-picker'>
|
||||||
|
{pinnedHosts.map((host: any) => (
|
||||||
|
<div className={classNames('pinned-host', { 'active': host === activeHost })} key={host}>
|
||||||
|
<Link to={`/timeline/${host}`}>{host}</Link>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PinnedHostsPicker;
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { withRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
|
||||||
import IconButton from 'soapbox/components/icon_button';
|
|
||||||
import Column from 'soapbox/features/ui/components/column';
|
|
||||||
|
|
||||||
import { connectRemoteStream } from '../../actions/streaming';
|
|
||||||
import { expandRemoteTimeline } from '../../actions/timelines';
|
|
||||||
import StatusListContainer from '../ui/containers/status_list_container';
|
|
||||||
|
|
||||||
import PinnedHostsPicker from './components/pinned_hosts_picker';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
title: { id: 'column.remote', defaultMessage: 'Federated timeline' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => {
|
|
||||||
const instance = props.params.instance;
|
|
||||||
const settings = getSettings(state);
|
|
||||||
const onlyMedia = settings.getIn(['remote', 'other', 'onlyMedia']);
|
|
||||||
|
|
||||||
const timelineId = 'remote';
|
|
||||||
|
|
||||||
return {
|
|
||||||
timelineId,
|
|
||||||
onlyMedia,
|
|
||||||
hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}:${instance}`, 'unread']) > 0,
|
|
||||||
instance,
|
|
||||||
pinned: settings.getIn(['remote_timeline', 'pinnedHosts']).includes(instance),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps)
|
|
||||||
@injectIntl
|
|
||||||
@withRouter
|
|
||||||
class RemoteTimeline extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
dispatch: PropTypes.func.isRequired,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
hasUnread: PropTypes.bool,
|
|
||||||
onlyMedia: PropTypes.bool,
|
|
||||||
timelineId: PropTypes.string,
|
|
||||||
instance: PropTypes.string.isRequired,
|
|
||||||
pinned: PropTypes.bool,
|
|
||||||
history: PropTypes.object,
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { dispatch, onlyMedia, instance } = this.props;
|
|
||||||
dispatch(expandRemoteTimeline(instance, { onlyMedia }));
|
|
||||||
this.disconnect = dispatch(connectRemoteStream(instance, { onlyMedia }));
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
if (prevProps.onlyMedia !== this.props.onlyMedia) {
|
|
||||||
const { dispatch, onlyMedia, instance } = this.props;
|
|
||||||
this.disconnect();
|
|
||||||
|
|
||||||
dispatch(expandRemoteTimeline(instance, { onlyMedia }));
|
|
||||||
this.disconnect = dispatch(connectRemoteStream(instance, { onlyMedia }));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (this.disconnect) {
|
|
||||||
this.disconnect();
|
|
||||||
this.disconnect = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCloseClick = e => {
|
|
||||||
this.props.history.push('/timeline/fediverse');
|
|
||||||
}
|
|
||||||
|
|
||||||
handleLoadMore = maxId => {
|
|
||||||
const { dispatch, onlyMedia, instance } = this.props;
|
|
||||||
dispatch(expandRemoteTimeline(instance, { maxId, onlyMedia }));
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { intl, onlyMedia, timelineId, instance, pinned } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
|
|
||||||
<PinnedHostsPicker host={instance} />
|
|
||||||
{!pinned && <div className='timeline-filter-message'>
|
|
||||||
<IconButton src={require('@tabler/icons/icons/x.svg')} onClick={this.handleCloseClick} />
|
|
||||||
<FormattedMessage
|
|
||||||
id='remote_timeline.filter_message'
|
|
||||||
defaultMessage='You are viewing the timeline of {instance}.'
|
|
||||||
values={{ instance }}
|
|
||||||
/>
|
|
||||||
</div>}
|
|
||||||
<StatusListContainer
|
|
||||||
scrollKey={`${timelineId}_${instance}_timeline`}
|
|
||||||
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
|
|
||||||
onLoadMore={this.handleLoadMore}
|
|
||||||
emptyMessage={
|
|
||||||
<FormattedMessage
|
|
||||||
id='empty_column.remote'
|
|
||||||
defaultMessage='There is nothing here! Manually follow users from {instance} to fill it up.'
|
|
||||||
values={{ instance }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
divideType='space'
|
|
||||||
/>
|
|
||||||
</Column>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
|
||||||
|
import IconButton from 'soapbox/components/icon_button';
|
||||||
|
import Column from 'soapbox/features/ui/components/column';
|
||||||
|
import { useAppDispatch, useSettings } from 'soapbox/hooks';
|
||||||
|
|
||||||
|
import { connectRemoteStream } from '../../actions/streaming';
|
||||||
|
import { expandRemoteTimeline } from '../../actions/timelines';
|
||||||
|
import StatusListContainer from '../ui/containers/status_list_container';
|
||||||
|
|
||||||
|
import PinnedHostsPicker from './components/pinned_hosts_picker';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
title: { id: 'column.remote', defaultMessage: 'Federated timeline' },
|
||||||
|
});
|
||||||
|
|
||||||
|
interface IRemoteTimeline {
|
||||||
|
params?: {
|
||||||
|
instance?: string,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** View statuses from a remote instance. */
|
||||||
|
const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const history = useHistory();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const instance = params?.instance;
|
||||||
|
const settings = useSettings();
|
||||||
|
|
||||||
|
const stream = useRef<any>(null);
|
||||||
|
|
||||||
|
const timelineId = 'remote';
|
||||||
|
const onlyMedia = !!settings.getIn(['remote', 'other', 'onlyMedia']);
|
||||||
|
|
||||||
|
const pinned: boolean = (settings.getIn(['remote_timeline', 'pinnedHosts']) as any).includes(instance);
|
||||||
|
|
||||||
|
const disconnect = () => {
|
||||||
|
if (stream.current) {
|
||||||
|
stream.current();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseClick: React.MouseEventHandler = () => {
|
||||||
|
history.push('/timeline/fediverse');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLoadMore = (maxId: string) => {
|
||||||
|
dispatch(expandRemoteTimeline(instance, { maxId, onlyMedia }));
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
disconnect();
|
||||||
|
dispatch(expandRemoteTimeline(instance, { onlyMedia, maxId: undefined }));
|
||||||
|
stream.current = dispatch(connectRemoteStream(instance, { onlyMedia }));
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
disconnect();
|
||||||
|
stream.current = null;
|
||||||
|
};
|
||||||
|
}, [onlyMedia]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
|
||||||
|
{instance && <PinnedHostsPicker host={instance} />}
|
||||||
|
{!pinned && <div className='timeline-filter-message'>
|
||||||
|
<IconButton src={require('@tabler/icons/icons/x.svg')} onClick={handleCloseClick} />
|
||||||
|
<FormattedMessage
|
||||||
|
id='remote_timeline.filter_message'
|
||||||
|
defaultMessage='You are viewing the timeline of {instance}.'
|
||||||
|
values={{ instance }}
|
||||||
|
/>
|
||||||
|
</div>}
|
||||||
|
<StatusListContainer
|
||||||
|
scrollKey={`${timelineId}_${instance}_timeline`}
|
||||||
|
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
|
||||||
|
onLoadMore={handleLoadMore}
|
||||||
|
emptyMessage={
|
||||||
|
<FormattedMessage
|
||||||
|
id='empty_column.remote'
|
||||||
|
defaultMessage='There is nothing here! Manually follow users from {instance} to fill it up.'
|
||||||
|
values={{ instance }}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
divideType='space'
|
||||||
|
/>
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RemoteTimeline;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { injectIntl, defineMessages } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import { pinHost, unpinHost } from 'soapbox/actions/remote_timeline';
|
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
|
||||||
import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
|
|
||||||
import { makeGetRemoteInstance } from 'soapbox/selectors';
|
|
||||||
|
|
||||||
const getRemoteInstance = makeGetRemoteInstance();
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
pinHost: { id: 'remote_instance.pin_host', defaultMessage: 'Pin {host}' },
|
|
||||||
unpinHost: { id: 'remote_instance.unpin_host', defaultMessage: 'Unpin {host}' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapStateToProps = (state, { host }) => {
|
|
||||||
const settings = getSettings(state);
|
|
||||||
|
|
||||||
return {
|
|
||||||
instance: state.get('instance'),
|
|
||||||
remoteInstance: getRemoteInstance(state, host),
|
|
||||||
pinned: settings.getIn(['remote_timeline', 'pinnedHosts']).includes(host),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps, null, null, { forwardRef: true })
|
|
||||||
@injectIntl
|
|
||||||
class InstanceInfoPanel extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
host: PropTypes.string.isRequired,
|
|
||||||
instance: ImmutablePropTypes.map,
|
|
||||||
remoteInstance: ImmutablePropTypes.map,
|
|
||||||
pinned: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
handlePinHost = e => {
|
|
||||||
const { dispatch, host, pinned } = this.props;
|
|
||||||
|
|
||||||
if (!pinned) {
|
|
||||||
dispatch(pinHost(host));
|
|
||||||
} else {
|
|
||||||
dispatch(unpinHost(host));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
makeMenu = () => {
|
|
||||||
const { intl, host, pinned } = this.props;
|
|
||||||
|
|
||||||
return [{
|
|
||||||
text: intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host }),
|
|
||||||
action: this.handlePinHost,
|
|
||||||
icon: require(pinned ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
|
|
||||||
}];
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { remoteInstance, pinned } = this.props;
|
|
||||||
const menu = this.makeMenu();
|
|
||||||
const icon = pinned ? 'thumbtack' : 'globe-w';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='wtf-panel instance-federation-panel'>
|
|
||||||
<div className='wtf-panel-header'>
|
|
||||||
<i role='img' alt={icon} className={`fa fa-${icon} wtf-panel-header__icon`} />
|
|
||||||
<span className='wtf-panel-header__label'>
|
|
||||||
<span>{remoteInstance.get('host')}</span>
|
|
||||||
</span>
|
|
||||||
<div className='wtf-panel__menu'>
|
|
||||||
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { useIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
|
import { pinHost, unpinHost } from 'soapbox/actions/remote_timeline';
|
||||||
|
import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
|
||||||
|
import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
|
||||||
|
import { makeGetRemoteInstance } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
const getRemoteInstance = makeGetRemoteInstance();
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
pinHost: { id: 'remote_instance.pin_host', defaultMessage: 'Pin {host}' },
|
||||||
|
unpinHost: { id: 'remote_instance.unpin_host', defaultMessage: 'Unpin {host}' },
|
||||||
|
});
|
||||||
|
|
||||||
|
interface IInstanceInfoPanel {
|
||||||
|
/** Hostname (domain) of the remote instance, eg "gleasonator.com" */
|
||||||
|
host: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Widget that displays information about a remote instance to users. */
|
||||||
|
const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const settings = useSettings();
|
||||||
|
const remoteInstance: any = useAppSelector(state => getRemoteInstance(state, host));
|
||||||
|
const pinned: boolean = (settings.getIn(['remote_timeline', 'pinnedHosts']) as any).includes(host);
|
||||||
|
|
||||||
|
const handlePinHost: React.MouseEventHandler = () => {
|
||||||
|
if (!pinned) {
|
||||||
|
dispatch(pinHost(host));
|
||||||
|
} else {
|
||||||
|
dispatch(unpinHost(host));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const makeMenu = () => {
|
||||||
|
return [{
|
||||||
|
text: intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host }),
|
||||||
|
action: handlePinHost,
|
||||||
|
icon: require(pinned ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
|
||||||
|
}];
|
||||||
|
};
|
||||||
|
|
||||||
|
const menu = makeMenu();
|
||||||
|
const icon = pinned ? 'thumbtack' : 'globe-w';
|
||||||
|
|
||||||
|
if (!remoteInstance) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='wtf-panel instance-federation-panel'>
|
||||||
|
<div className='wtf-panel-header'>
|
||||||
|
<i role='img' className={`fa fa-${icon} wtf-panel-header__icon`} />
|
||||||
|
<span className='wtf-panel-header__label'>
|
||||||
|
<span>{remoteInstance.get('host')}</span>
|
||||||
|
</span>
|
||||||
|
<div className='wtf-panel__menu'>
|
||||||
|
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InstanceInfoPanel;
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import { openModal } from 'soapbox/actions/modals';
|
|
||||||
import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
|
|
||||||
import InstanceRestrictions from 'soapbox/features/federation_restrictions/components/instance_restrictions';
|
|
||||||
import { makeGetRemoteInstance } from 'soapbox/selectors';
|
|
||||||
|
|
||||||
const getRemoteInstance = makeGetRemoteInstance();
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
editFederation: { id: 'remote_instance.edit_federation', defaultMessage: 'Edit federation' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapStateToProps = (state, { host }) => {
|
|
||||||
const { me, instance } = state;
|
|
||||||
const account = state.accounts.get(me);
|
|
||||||
|
|
||||||
return {
|
|
||||||
instance,
|
|
||||||
remoteInstance: getRemoteInstance(state, host),
|
|
||||||
isAdmin: account.admin,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps, null, null, { forwardRef: true })
|
|
||||||
@injectIntl
|
|
||||||
class InstanceModerationPanel extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
host: PropTypes.string.isRequired,
|
|
||||||
instance: ImmutablePropTypes.map,
|
|
||||||
remoteInstance: ImmutablePropTypes.map,
|
|
||||||
isAdmin: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleEditFederation = e => {
|
|
||||||
const { dispatch, host } = this.props;
|
|
||||||
dispatch(openModal('EDIT_FEDERATION', { host }));
|
|
||||||
}
|
|
||||||
|
|
||||||
makeMenu = () => {
|
|
||||||
const { intl } = this.props;
|
|
||||||
|
|
||||||
return [{
|
|
||||||
text: intl.formatMessage(messages.editFederation),
|
|
||||||
action: this.handleEditFederation,
|
|
||||||
icon: require('@tabler/icons/icons/edit.svg'),
|
|
||||||
}];
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { remoteInstance, isAdmin } = this.props;
|
|
||||||
const menu = this.makeMenu();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='wtf-panel instance-federation-panel'>
|
|
||||||
<div className='wtf-panel-header'>
|
|
||||||
<i role='img' alt='gavel' className='fa fa-gavel wtf-panel-header__icon' />
|
|
||||||
<span className='wtf-panel-header__label'>
|
|
||||||
<span><FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' /></span>
|
|
||||||
</span>
|
|
||||||
{isAdmin && <div className='wtf-panel__menu'>
|
|
||||||
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
|
|
||||||
</div>}
|
|
||||||
</div>
|
|
||||||
<div className='wtf-panel__content'>
|
|
||||||
<InstanceRestrictions remoteInstance={remoteInstance} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
|
import { openModal } from 'soapbox/actions/modals';
|
||||||
|
import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
|
||||||
|
import InstanceRestrictions from 'soapbox/features/federation_restrictions/components/instance_restrictions';
|
||||||
|
import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
|
||||||
|
import { makeGetRemoteInstance } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
const getRemoteInstance = makeGetRemoteInstance();
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
editFederation: { id: 'remote_instance.edit_federation', defaultMessage: 'Edit federation' },
|
||||||
|
});
|
||||||
|
|
||||||
|
interface IInstanceModerationPanel {
|
||||||
|
/** Host (eg "gleasonator.com") of the remote instance to moderate. */
|
||||||
|
host: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Widget for moderators to manage a remote instance. */
|
||||||
|
const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
|
const account = useOwnAccount();
|
||||||
|
const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
|
||||||
|
|
||||||
|
const handleEditFederation = () => {
|
||||||
|
dispatch(openModal('EDIT_FEDERATION', { host }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const makeMenu = () => {
|
||||||
|
return [{
|
||||||
|
text: intl.formatMessage(messages.editFederation),
|
||||||
|
action: handleEditFederation,
|
||||||
|
icon: require('@tabler/icons/icons/edit.svg'),
|
||||||
|
}];
|
||||||
|
};
|
||||||
|
|
||||||
|
const menu = makeMenu();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='wtf-panel instance-federation-panel'>
|
||||||
|
<div className='wtf-panel-header'>
|
||||||
|
<i role='img' className='fa fa-gavel wtf-panel-header__icon' />
|
||||||
|
<span className='wtf-panel-header__label'>
|
||||||
|
<span><FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' /></span>
|
||||||
|
</span>
|
||||||
|
{account?.admin && (
|
||||||
|
<div className='wtf-panel__menu'>
|
||||||
|
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className='wtf-panel__content'>
|
||||||
|
<InstanceRestrictions remoteInstance={remoteInstance} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InstanceModerationPanel;
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import LinkFooter from 'soapbox/features/ui/components/link_footer';
|
|
||||||
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
|
|
||||||
import {
|
|
||||||
PromoPanel,
|
|
||||||
InstanceInfoPanel,
|
|
||||||
InstanceModerationPanel,
|
|
||||||
} from 'soapbox/features/ui/util/async-components';
|
|
||||||
import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
|
|
||||||
|
|
||||||
import { Layout } from '../components/ui';
|
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
|
||||||
const me = state.me;
|
|
||||||
const account = state.accounts.get(me);
|
|
||||||
|
|
||||||
return {
|
|
||||||
me,
|
|
||||||
disclosed: federationRestrictionsDisclosed(state),
|
|
||||||
isAdmin: Boolean(account?.admin),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default @connect(mapStateToProps)
|
|
||||||
class RemoteInstancePage extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { children, params: { instance: host }, disclosed, isAdmin } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Layout.Main>
|
|
||||||
{children}
|
|
||||||
</Layout.Main>
|
|
||||||
|
|
||||||
<Layout.Aside>
|
|
||||||
<BundleContainer fetchComponent={PromoPanel}>
|
|
||||||
{Component => <Component key='promo-panel' />}
|
|
||||||
</BundleContainer>
|
|
||||||
<BundleContainer fetchComponent={InstanceInfoPanel}>
|
|
||||||
{Component => <Component host={host} />}
|
|
||||||
</BundleContainer>
|
|
||||||
{(disclosed || isAdmin) && (
|
|
||||||
<BundleContainer fetchComponent={InstanceModerationPanel}>
|
|
||||||
{Component => <Component host={host} />}
|
|
||||||
</BundleContainer>
|
|
||||||
)}
|
|
||||||
<LinkFooter key='link-footer' />
|
|
||||||
</Layout.Aside>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import LinkFooter from 'soapbox/features/ui/components/link_footer';
|
||||||
|
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
|
||||||
|
import {
|
||||||
|
PromoPanel,
|
||||||
|
InstanceInfoPanel,
|
||||||
|
InstanceModerationPanel,
|
||||||
|
} from 'soapbox/features/ui/util/async-components';
|
||||||
|
import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
|
||||||
|
import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
|
||||||
|
|
||||||
|
import { Layout } from '../components/ui';
|
||||||
|
|
||||||
|
interface IRemoteInstancePage {
|
||||||
|
params?: {
|
||||||
|
instance?: string,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Page for viewing a remote instance timeline. */
|
||||||
|
const RemoteInstancePage: React.FC<IRemoteInstancePage> = ({ children, params }) => {
|
||||||
|
const host = params?.instance;
|
||||||
|
|
||||||
|
const account = useOwnAccount();
|
||||||
|
const disclosed = useAppSelector(federationRestrictionsDisclosed);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Layout.Main>
|
||||||
|
{children}
|
||||||
|
</Layout.Main>
|
||||||
|
|
||||||
|
<Layout.Aside>
|
||||||
|
<BundleContainer fetchComponent={PromoPanel}>
|
||||||
|
{Component => <Component key='promo-panel' />}
|
||||||
|
</BundleContainer>
|
||||||
|
<BundleContainer fetchComponent={InstanceInfoPanel}>
|
||||||
|
{Component => <Component host={host} />}
|
||||||
|
</BundleContainer>
|
||||||
|
{(disclosed || account?.admin) && (
|
||||||
|
<BundleContainer fetchComponent={InstanceModerationPanel}>
|
||||||
|
{Component => <Component host={host} />}
|
||||||
|
</BundleContainer>
|
||||||
|
)}
|
||||||
|
<LinkFooter key='link-footer' />
|
||||||
|
</Layout.Aside>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RemoteInstancePage;
|
||||||
Loading…
Reference in New Issue