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  | Bin 1984 -> 0 bytes
 app/soapbox/pages/status_page.tsx |  57 ++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 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 e4ff9955e9d7aef3da65273a5155a4dca5cb6dbb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1984
zcmb_dO>5gg5WVYHOfRtwmUSq-G`49INGYTcnuH$BS{mC+q+PKe*g@#OcXsu)QBr8!
z8XvT)w=?tJyjk(0l*+(QWT}Cjk_AkZd!AfIym|G#D6C=I9Pg~cYe|~|#S3iAJ4jp-
zCQduh5Tt@s3W1cP4zt7xGkYRfm+Y2{ryD5^surdtE4T8L?2s9XtrN?WKE6(J!f$r|
zK#(i~_;rvE@<!&lJl-*Z`JDD16pBpu%X_{Tk7d8SHtdQ~jcOisHNKVH8lERiKZ|tW
zsVR4oKr7fcC2e`nGu$%eqqkHRi-E=7VRWJ!)TVSL1_WS_=B8!bE7n!xD$sqXK)ecW
z*|W5R#*{J8%JLz@l@(b|-4up#qWngMUg!3;PPQJup(Zv5Tvl3W0|hJZ4Kw&4@02Vx
ztU$XZtkzJG<}HZU&HjRzO(z9TW|#fjuD65<cu#$t2G1!I6DggdV{}d-nL+pj00p|{
z0_cN01}**!UEGE7jUP~Ba|BRr_j}Za6E}yiFC+R#c=A({;f~qdz!zfW%sd^DpG9fT
zv<4@LC8O;T@MN6n;15$&HEcwNYC3EAG?G=07o-QCXH@-s%&yrO6Ctmxz#O<<l&%?G
zt6r_CR|#ObZXf8eG0frzxnS4@sJgthtFQZ29}0wv3+Mth`^#5eLX#f)i(*yvgH?wq
z+~KN6IlC-})e}CiCaGcZ)=%UFl64&vLWL)ztYPTcfL$gp81^wb;$PhahG);@7~CcA
zWU1*EiftJ;SHRgsNz9S|&*)SzJ%7(4=LI*b>SGPQYt5|vCpxeE{eJh2L%f^Vr<T~!
l?EanAGWfuGx!eaVZa-ku{K24|abGxe*&_VqNwZl;zX6nVZ`}X@

diff --git a/app/soapbox/pages/status_page.tsx b/app/soapbox/pages/status_page.tsx
new file mode 100644
index 0000000000..2c35947ad0
--- /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;