Merge branch 'public-layout-tsx' into 'develop'

TSX conversions

See merge request soapbox-pub/soapbox-fe!1364

app/soapbox/components/ui/icon/svg-icon.tsx

@@ -13,7 +13,7 @@ interface ISvgIcon {
 }
 
 /** Renders an inline SVG with an empty frame loading state */
-const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.Element => {
+const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className, ...filteredProps }): JSX.Element => {
   const loader = (
     <svg
       className={className}
@@ -33,6 +33,7 @@ const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.El
       height={size}
       loader={loader}
       data-testid='svg-icon'
+      {...filteredProps}
     >
       {/* If the fetch fails, fall back to displaying the loader */}
       {loader}

app/soapbox/features/public_layout/index.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-import { Switch, Route, Redirect } from 'react-router-dom';
-
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import LandingGradient from 'soapbox/components/landing-gradient';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import {
-  NotificationsContainer,
-  ModalContainer,
-} from 'soapbox/features/ui/util/async-components';
-import { isStandalone } from 'soapbox/utils/state';
-
-import AboutPage from '../about';
-import LandingPage from '../landing_page';
-import MobilePage from '../mobile';
-
-import Footer from './components/footer';
-import Header from './components/header';
-
-const mapStateToProps = (state, props) => ({
-  soapbox: getSoapboxConfig(state),
-  standalone: isStandalone(state),
-});
-
-class PublicLayout extends ImmutablePureComponent {
-
-  render() {
-    const { standalone } = this.props;
-
-    if (standalone) {
-      return <Redirect to='/login/external' />;
-    }
-
-    return (
-      <div className='h-full'>
-        <LandingGradient />
-
-        <div className='flex flex-col h-screen'>
-          <div className='flex-shrink-0'>
-            <Header />
-
-            <div className='relative'>
-              <Switch>
-                <Route exact path='/' component={LandingPage} />
-                <Route exact path='/about/:slug?' component={AboutPage} />
-                <Route exact path='/mobile/:slug?' component={MobilePage} />
-              </Switch>
-            </div>
-          </div>
-
-          <Footer />
-
-          <BundleContainer fetchComponent={NotificationsContainer}>
-            {(Component) => <Component />}
-          </BundleContainer>
-
-          <BundleContainer fetchComponent={ModalContainer}>
-            {(Component) => <Component />}
-          </BundleContainer>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps)(PublicLayout);

app/soapbox/features/public_layout/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+
+import LandingGradient from 'soapbox/components/landing-gradient';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import {
+  NotificationsContainer,
+  ModalContainer,
+} from 'soapbox/features/ui/util/async-components';
+import { useAppSelector } from 'soapbox/hooks';
+import { isStandalone } from 'soapbox/utils/state';
+
+import AboutPage from '../about';
+import LandingPage from '../landing_page';
+import MobilePage from '../mobile';
+
+import Footer from './components/footer';
+import Header from './components/header';
+
+const PublicLayout = () => {
+  const standalone = useAppSelector((state) => isStandalone(state));
+
+  if (standalone) {
+    return <Redirect to='/login/external' />;
+  }
+
+  return (
+    <div className='h-full'>
+      <LandingGradient />
+
+      <div className='flex flex-col h-screen'>
+        <div className='flex-shrink-0'>
+          <Header />
+
+          <div className='relative'>
+            <Switch>
+              <Route exact path='/' component={LandingPage} />
+              <Route exact path='/about/:slug?' component={AboutPage} />
+              <Route exact path='/mobile/:slug?' component={MobilePage} />
+            </Switch>
+          </div>
+        </div>
+
+        <Footer />
+
+        <BundleContainer fetchComponent={NotificationsContainer}>
+          {(Component) => <Component />}
+        </BundleContainer>
+
+        <BundleContainer fetchComponent={ModalContainer}>
+          {(Component) => <Component />}
+        </BundleContainer>
+      </div>
+    </div>
+  );
+};
+
+export default PublicLayout;