From e402660bc1f1813e9bed19f40a98796ce627237f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 12 Aug 2022 10:15:21 -0500
Subject: [PATCH] StatusPage: convert to TSX

---
 app/soapbox/pages/status_page.js  | 69 -------------------------------
 app/soapbox/pages/status_page.tsx | 57 +++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 69 deletions(-)
 delete mode 100644 app/soapbox/pages/status_page.js
 create mode 100644 app/soapbox/pages/status_page.tsx

diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js
deleted file mode 100644
index e4ff9955e..000000000
--- a/app/soapbox/pages/status_page.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import LinkFooter from 'soapbox/features/ui/components/link_footer';
-import {
-  WhoToFollowPanel,
-  TrendsPanel,
-  SignUpPanel,
-  CtaBanner,
-} from 'soapbox/features/ui/util/async-components';
-// import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import { getFeatures } from 'soapbox/utils/features';
-
-import { Layout } from '../components/ui';
-import BundleContainer from '../features/ui/containers/bundle_container';
-
-const mapStateToProps = state => {
-  const me = state.get('me');
-  const features = getFeatures(state.get('instance'));
-
-  return {
-    me,
-    showTrendsPanel: features.trends,
-    showWhoToFollowPanel: features.suggestions,
-  };
-};
-
-export default @connect(mapStateToProps)
-class StatusPage extends ImmutablePureComponent {
-
-  render() {
-    const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props;
-
-    return (
-      <>
-        <Layout.Main>
-          {children}
-
-          {!me && (
-            <BundleContainer fetchComponent={CtaBanner}>
-              {Component => <Component key='cta-banner' />}
-            </BundleContainer>
-          )}
-        </Layout.Main>
-
-        <Layout.Aside>
-          {!me && (
-            <BundleContainer fetchComponent={SignUpPanel}>
-              {Component => <Component key='sign-up-panel' />}
-            </BundleContainer>
-          )}
-          {showTrendsPanel && (
-            <BundleContainer fetchComponent={TrendsPanel}>
-              {Component => <Component limit={3} key='trends-panel' />}
-            </BundleContainer>
-          )}
-          {showWhoToFollowPanel && (
-            <BundleContainer fetchComponent={WhoToFollowPanel}>
-              {Component => <Component limit={5} key='wtf-panel' />}
-            </BundleContainer>
-          )}
-          <LinkFooter key='link-footer' />
-        </Layout.Aside>
-      </>
-    );
-  }
-
-}
diff --git a/app/soapbox/pages/status_page.tsx b/app/soapbox/pages/status_page.tsx
new file mode 100644
index 000000000..2c35947ad
--- /dev/null
+++ b/app/soapbox/pages/status_page.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import LinkFooter from 'soapbox/features/ui/components/link_footer';
+import {
+  WhoToFollowPanel,
+  TrendsPanel,
+  SignUpPanel,
+  CtaBanner,
+} from 'soapbox/features/ui/util/async-components';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
+
+import { Layout } from '../components/ui';
+import BundleContainer from '../features/ui/containers/bundle_container';
+
+interface IStatusPage {
+  children: React.ReactNode,
+}
+
+const StatusPage: React.FC<IStatusPage> = ({ children }) => {
+  const me = useAppSelector(state => state.me);
+  const features = useFeatures();
+
+  return (
+    <>
+      <Layout.Main>
+        {children}
+
+        {!me && (
+          <BundleContainer fetchComponent={CtaBanner}>
+            {Component => <Component key='cta-banner' />}
+          </BundleContainer>
+        )}
+      </Layout.Main>
+
+      <Layout.Aside>
+        {!me && (
+          <BundleContainer fetchComponent={SignUpPanel}>
+            {Component => <Component key='sign-up-panel' />}
+          </BundleContainer>
+        )}
+        {features.trends && (
+          <BundleContainer fetchComponent={TrendsPanel}>
+            {Component => <Component limit={3} key='trends-panel' />}
+          </BundleContainer>
+        )}
+        {features.suggestions && (
+          <BundleContainer fetchComponent={WhoToFollowPanel}>
+            {Component => <Component limit={5} key='wtf-panel' />}
+          </BundleContainer>
+        )}
+        <LinkFooter key='link-footer' />
+      </Layout.Aside>
+    </>
+  );
+};
+
+export default StatusPage;