From 1991e5751da8a234d836b29b6d09817013726afd Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 9 May 2022 21:59:30 -0500
Subject: [PATCH] PinnedHostsPicker: convert to TSX

---
 .../components/pinned_hosts_picker.js         | 46 -------------------
 .../components/pinned_hosts_picker.tsx        | 31 +++++++++++++
 2 files changed, 31 insertions(+), 46 deletions(-)
 delete mode 100644 app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js
 create mode 100644 app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx

diff --git a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js
deleted file mode 100644
index f9cc609a2..000000000
--- a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js
+++ /dev/null
@@ -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);
diff --git a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx
new file mode 100644
index 000000000..f1c1ac425
--- /dev/null
+++ b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx
@@ -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;