soapbox/app/soapbox/features/public_layout/index.js

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);