DefaultPage: convert to tsx

app/soapbox/pages/default_page.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
-import LinkFooter from 'soapbox/features/ui/components/link_footer';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import {
-  WhoToFollowPanel,
-  TrendsPanel,
-  SignUpPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { getFeatures } from 'soapbox/utils/features';
-
-import { Layout } from '../components/ui';
-
-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 DefaultPage extends ImmutablePureComponent {
-
-  render() {
-    const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props;
-
-    return (
-      <Layout>
-        <Layout.Sidebar>
-          <SidebarNavigation />
-        </Layout.Sidebar>
-
-        <Layout.Main>
-          {children}
-        </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>
-      </Layout>
-    );
-  }
-
-}

app/soapbox/pages/default_page.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import SidebarNavigation from 'soapbox/components/sidebar-navigation';
+import LinkFooter from 'soapbox/features/ui/components/link_footer';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import {
+  WhoToFollowPanel,
+  TrendsPanel,
+  SignUpPanel,
+} from 'soapbox/features/ui/util/async-components';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
+
+import { Layout } from '../components/ui';
+
+const DefaultPage: React.FC = ({ children }) => {
+  const me = useAppSelector(state => state.me);
+  const features = useFeatures();
+
+  return (
+    <Layout>
+      <Layout.Sidebar>
+        <SidebarNavigation />
+      </Layout.Sidebar>
+
+      <Layout.Main>
+        {children}
+      </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>
+    </Layout>
+  );
+};
+
+export default DefaultPage;