InstanceInfoPanel: convert to TSX

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/pages/remote_instance_page.tsx

@@ -13,13 +13,15 @@ import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
 import { Layout } from '../components/ui';
 
 interface IRemoteInstancePage {
-  params: {
-    instance: string,
+  params?: {
+    instance?: string,
   },
 }
 
 /** Page for viewing a remote instance timeline. */
-const RemoteInstancePage: React.FC<IRemoteInstancePage> = ({ children, params: { instance: host } }) => {
+const RemoteInstancePage: React.FC<IRemoteInstancePage> = ({ children, params }) => {
+  const host = params?.instance;
+
   const account = useOwnAccount();
   const disclosed = useAppSelector(federationRestrictionsDisclosed);