From 57c803037430631bf5ce44f4a3f396f1595b9480 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 9 May 2022 21:49:53 -0500
Subject: [PATCH] InstanceInfoPanel: convert to TSX

---
 .../ui/components/instance_info_panel.js      | Bin 2651 -> 0 bytes
 .../ui/components/instance_info_panel.tsx     |  68 ++++++++++++++++++
 app/soapbox/pages/remote_instance_page.tsx    |   8 ++-
 3 files changed, 73 insertions(+), 3 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/instance_info_panel.js
 create mode 100644 app/soapbox/features/ui/components/instance_info_panel.tsx

diff --git a/app/soapbox/features/ui/components/instance_info_panel.js b/app/soapbox/features/ui/components/instance_info_panel.js
deleted file mode 100644
index 20582ddcfd8da27ecaaeac7f46abaedced2ac1d2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2651
zcma)8!EWO=5WV{=ra%G7fF<9xQ5v8Hx;|_XWVffq!b?jdn_Y=?Nh(Pp=-)ddk&<jD
zMS;Mu%s0a~@6C)7wHCoTBMTROSgmAp*2cl3(dRG!oY6vMbOX_uo)gDE5XfVmP!!Ie
z8~#2Y?V6@_;!xvto&lH0aGY@7tF&`$Yw%Z1d=#pSdzSHpNs0iP33MRUUs$-Ea`gsE
ztfazEXstL>N&S*^A_=k#EVNP-d4)1qwyy*W#dmO)>Z7)91FiC3rx2^f`Ji97q>0qZ
zZVfit;oivxYa+6|?TGF(Iw#d}=5-xzJz$RejbtnJi~5AB^~HoBqVEJ<V(hl`sC`4Q
z{d6#=>7Wrm@ON}i1HqlLPN)KJ>abXoBHFO|E6QUX5bvv?{Ox4%dWva+0r{09akqk?
zX9nb5nL*@5lb%#cBJWQmcr^Ga+S++T3HvA&bbQ!H&~GT&<jK3~2E@Aw|71^>Df>kk
z;{4eOhhH>zw}l*H(#_$9m@^0H*O1=>*EDJs{3GPT?lFkd0vL3yq5J47Q0I;|WHgqP
zHl>(23O`0`E{`L)rGjJGtsj9CGx9N1l0uR;@Zrom6@Lv<PyM-}fgi9RDcDBe)~QrQ
z-Ii$MDP8|zMSm-N9rguH7&`(FR54Fa++2#Z0oB$tiQ{Jnl{PQJluuY?;7m&`w_ZKW
zBfBbUVJ(F6cB;~kLSYT~>QI$*5;n-=#ggb)Ojb=6z^i3kVfiGitFw8vrTV}tB9-<D
z|86Bs_$V!xxP<X?RL2`wa3ouh30J06{@Xsy#BZ^|pJ{2P2d!()!%733geqyJj(dli
z2}7HOM(d!I_AFd++6<kz;h`eSX`pj(Cuvg_#SY1+&nk$28Ubss5KIYTI$-xl!>LQT
z>3YDL-WFq<F0j+IU80#d^X4TpY$}?RX*6ceynz1?Uq2*Y!}X4uA){$=bxQ5jh_DZs
zIv4#5goTq%1R<M$^c60~cC-v&+}qTdEZK$X0U@c+GaAC7Z{`c5hvBVfwtQ~==SU~f
zRh8Q3V?-3*gAM0?So?3R`JkVnmPbR<jg^l}rMp@I?|RL~jUoIR2#pXt;q^Qtm^L9M
z0V8*6n}ZX@kAe2F)(1>p_$|OO-jH~B0JtmVGYo_KhiEX5UR;%&hp7#tl2k~A&~$1w
zo<#RP_CKPN6AFr2KnX0t=$h`34GAi0mv>CPUtHgPuLM*g`PrXLY<#}`o+G~Zu$?(j
zVj3T{$TAl(h1KGK^#vOrcHdnt<#BQIHi_2#-Ig<7Ty^`)djjr<H~96P7ykrEhmFlU
zwzvmtik!%d&G}}tmD<_l84WE;QIBoc)9f4Chh$D38F@Up=t`R{@tZ5STRtuxhK8cP
H?N|Q-2xWFV

diff --git a/app/soapbox/features/ui/components/instance_info_panel.tsx b/app/soapbox/features/ui/components/instance_info_panel.tsx
new file mode 100644
index 0000000000..a100abc2c6
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/pages/remote_instance_page.tsx b/app/soapbox/pages/remote_instance_page.tsx
index 548e0f9de4..e3488908ca 100644
--- a/app/soapbox/pages/remote_instance_page.tsx
+++ b/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);