Merge branch 'remote-instance' into 'develop'

Remote instance TSX conversions

See merge request soapbox-pub/soapbox-fe!1341

app/soapbox/features/ui/components/edit_federation_modal.js

@@ -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>
-    );
-  }
-
-}

app/soapbox/features/ui/components/edit_federation_modal.tsx

@@ -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;

app/soapbox/features/ui/components/instance_info_panel.js

@@ -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>
-    );
-  }
-
-}

app/soapbox/features/ui/components/instance_info_panel.tsx

@@ -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;

app/soapbox/features/ui/components/instance_moderation_panel.js

@@ -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>
-    );
-  }
-
-}

app/soapbox/features/ui/components/instance_moderation_panel.tsx

@@ -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;