Convert InstanceRestrictions to TSX+FC

app/soapbox/features/federation_restrictions/components/instance_restrictions.tsx

@@ -1,39 +1,29 @@
 '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 { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
 
 import Icon from 'soapbox/components/icon';
 import { Text } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
 
-const hasRestrictions = remoteInstance => {
+import type { Map as ImmutableMap } from 'immutable';
+
+const hasRestrictions = (remoteInstance: ImmutableMap<string, any>): boolean => {
   return remoteInstance
     .get('federation')
     .deleteAll(['accept', 'reject_deletes', 'report_removal'])
-    .reduce((acc, value) => acc || value, false);
+    .reduce((acc: boolean, value: boolean) => acc || value, false);
 };
 
-const mapStateToProps = state => {
+interface IInstanceRestrictions {
-  return {
+  remoteInstance: ImmutableMap<string, any>,
-    instance: state.get('instance'),
+}
-  };
-};
 
-export default @connect(mapStateToProps)
+const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance }) => {
-class InstanceRestrictions extends ImmutablePureComponent {
+  const instance = useAppSelector(state => state.instance);
 
-  static propTypes = {
+  const renderRestrictions = () => {
-    intl: PropTypes.object.isRequired,
-    remoteInstance: ImmutablePropTypes.map.isRequired,
-    instance: ImmutablePropTypes.map,
-  };
-
-  renderRestrictions = () => {
-    const { remoteInstance } = this.props;
     const items = [];
 
     const {
@@ -105,10 +95,9 @@ class InstanceRestrictions extends ImmutablePureComponent {
     }
 
     return items;
-  }
+  };
 
-  renderContent = () => {
+  const renderContent = () => {
-    const { instance, remoteInstance } = this.props;
     if (!instance || !remoteInstance) return null;
 
     const host = remoteInstance.get('host');
@@ -136,7 +125,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
             />
           </Text>
         ),
-        this.renderRestrictions(),
+        renderRestrictions(),
       ];
     } else {
       return (
@@ -150,14 +139,13 @@ class InstanceRestrictions extends ImmutablePureComponent {
         </Text>
       );
     }
-  }
+  };
 
-  render() {
   return (
     <div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
-        {this.renderContent()}
+      {renderContent()}
     </div>
   );
-  }
+};
 
-}
+export default InstanceRestrictions;