Refactor PublicLayout

app/gabsocial/containers/gabsocial.js

@@ -20,8 +20,7 @@ import ErrorBoundary from '../components/error_boundary';
 import { fetchInstance } from 'gabsocial/actions/instance';
 import { fetchSoapboxConfig } from 'gabsocial/actions/soapbox';
 import { fetchMe } from 'gabsocial/actions/me';
-import LandingPage from 'gabsocial/features/landing_page';
+import PublicLayout from 'gabsocial/features/public_layout';
-import AboutPage from 'gabsocial/features/about';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
@@ -92,8 +91,8 @@ class GabSocialMount extends React.PureComponent {
         <BrowserRouter>
           <ScrollContext>
             <Switch>
-              {!me && <Route exact path='/' component={LandingPage} />}
+              {!me && <Route exact path='/' component={PublicLayout} />}
-              <Route exact path='/about/:slug?' component={AboutPage} />
+              <Route exact path='/about/:slug?' component={PublicLayout} />
               <Route path='/' component={UI} />
             </Switch>
           </ScrollContext>

app/gabsocial/features/about/index.js

@@ -32,7 +32,14 @@ class AboutPage extends ImmutablePureComponent {
 
   render() {
     return (
-      <div dangerouslySetInnerHTML={{ __html: this.state.pageHtml }} />
+      <div className='content'>
+        <div className='box-widget'>
+          <div
+            className='rich-formatting'
+            dangerouslySetInnerHTML={{ __html: this.state.pageHtml }}
+          />
+        </div>
+      </div>
     );
   }
 

app/gabsocial/features/landing_page/index.js

@@ -2,60 +2,25 @@ import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Link } from 'react-router-dom';
-import LoginForm from 'gabsocial/features/auth_login/components/login_form';
 import RegistrationForm from './components/registration_form';
-import NotificationsContainer from 'gabsocial/features/ui/containers/notifications_container';
+import SiteLogo from '../public_layout/components/site_logo';
 
 const mapStateToProps = (state, props) => ({
   instance: state.get('instance'),
-  soapbox: state.get('soapbox'),
 });
 
 class LandingPage extends ImmutablePureComponent {
 
-  getSiteLogo = () => {
-    const { instance, soapbox } = this.props;
-    const logos = {
-      imgLogo:  (<img alt={instance.get('title')} src={soapbox.get('logo')} />),
-      textLogo: (<h1>{instance.get('title')}</h1>),
-    };
-    return soapbox.get('logo') ? logos.imgLogo : logos.textLogo;
-  }
-
   render() {
     const { instance } = this.props;
-    if (instance.isEmpty()) return null;
-    const siteLogo = this.getSiteLogo();
 
     return (
-      <div className='public-layout'>
-        <nav className='header'>
-          <div className='header-container'>
-            <div className='nav-left'>
-              <Link className='brand' to='/'>
-                {siteLogo}
-              </Link>
-              <Link className='nav-link optional' to='/'>Home</Link>
-              <Link className='nav-link' to='/about'>About</Link>
-            </div>
-            <div className='nav-center' />
-            <div className='nav-right'>
-              <div className='hidden-sm'>
-                <LoginForm />
-              </div>
-              <div className='visible-sm'>
-                <Link className='webapp-btn nav-link nav-button' to='/auth/sign_in'>Log in</Link>
-              </div>
-            </div>
-          </div>
-        </nav>
-        <div className='container'>
       <div className='landing'>
         <div className='landing-columns'>
           <div className='landing-columns--left'>
             <div className='landing__brand'>
               <Link className='brand' to='/'>
-                    {siteLogo}
+                <SiteLogo />
               </Link>
               <div className='brand__tagline'>
                 <span>{instance.get('description')}</span>
@@ -67,23 +32,6 @@ class LandingPage extends ImmutablePureComponent {
           </div>
         </div>
       </div>
-        </div>
-        <div className='footer'>
-          <div className='footer-container'>
-            <div className='copyright'>
-              <span>♡{new Date().getFullYear()}. Copying is an act of love. Please copy and share.</span>
-            </div>
-            <ul>
-              <li><Link to='/about'>About</Link></li>
-              <li><Link to='/about/tos'>Terms of Service</Link></li>
-              <li><Link to='/about/privacy'>Privacy Policy</Link></li>
-              <li><Link to='/about/dmca'>DMCA</Link></li>
-              <li><Link to='/about#opensource'>Source Code</Link></li>
-            </ul>
-          </div>
-        </div>
-        <NotificationsContainer />
-      </div>
     );
   }
 

app/gabsocial/features/public_layout/components/footer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { Link } from 'react-router-dom';
+
+export default class Footer extends ImmutablePureComponent {
+
+  render() {
+    return (
+      <div className='footer'>
+        <div className='footer-container'>
+          <div className='copyright'>
+            <span>♡{new Date().getFullYear()}. Copying is an act of love. Please copy and share.</span>
+          </div>
+          <ul>
+            <li><Link to='/about'>About</Link></li>
+            <li><Link to='/about/tos'>Terms of Service</Link></li>
+            <li><Link to='/about/privacy'>Privacy Policy</Link></li>
+            <li><Link to='/about/dmca'>DMCA</Link></li>
+            <li><Link to='/about#opensource'>Source Code</Link></li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+}

app/gabsocial/features/public_layout/components/header.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { Link } from 'react-router-dom';
+import LoginForm from 'gabsocial/features/auth_login/components/login_form';
+import SiteLogo from './site_logo';
+
+export default class Header extends ImmutablePureComponent {
+
+  render() {
+    return (
+      <nav className='header'>
+        <div className='header-container'>
+          <div className='nav-left'>
+            <Link className='brand' to='/'>
+              <SiteLogo />
+            </Link>
+            <Link className='nav-link optional' to='/'>Home</Link>
+            <Link className='nav-link' to='/about'>About</Link>
+          </div>
+          <div className='nav-center' />
+          <div className='nav-right'>
+            <div className='hidden-sm'>
+              <LoginForm />
+            </div>
+            <div className='visible-sm'>
+              <Link className='webapp-btn nav-link nav-button' to='/auth/sign_in'>Log in</Link>
+            </div>
+          </div>
+        </div>
+      </nav>
+    );
+  }
+
+}

app/gabsocial/features/public_layout/components/site_logo.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+const mapStateToProps = (state, props) => ({
+  instance: state.get('instance'),
+  soapbox: state.get('soapbox'),
+});
+
+class SiteLogo extends ImmutablePureComponent {
+
+  render() {
+    const { instance, soapbox } = this.props;
+    const logos = {
+      imgLogo:  (<img alt={instance.get('title')} src={soapbox.get('logo')} />),
+      textLogo: (<h1>{instance.get('title')}</h1>),
+    };
+    return soapbox.get('logo') ? logos.imgLogo : logos.textLogo;
+  }
+
+}
+
+export default connect(mapStateToProps)(SiteLogo);

app/gabsocial/features/public_layout/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { Switch, Route } from 'react-router-dom';
+import NotificationsContainer from 'gabsocial/features/ui/containers/notifications_container';
+import Header from './components/header';
+import Footer from './components/footer';
+import LandingPage from '../landing_page';
+import AboutPage from '../about';
+
+const mapStateToProps = (state, props) => ({
+  instance: state.get('instance'),
+  soapbox: state.get('soapbox'),
+});
+
+class PublicLayout extends ImmutablePureComponent {
+
+  render() {
+    const { instance } = this.props;
+    if (instance.isEmpty()) return null;
+
+    return (
+      <div className='public-layout'>
+        <Header />
+        <div className='container'>
+          <Switch>
+            <Route exact path='/' component={LandingPage} />
+            <Route exact path='/about/:slug?' component={AboutPage} />
+          </Switch>
+        </div>
+        <Footer />
+        <NotificationsContainer />
+      </div>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps)(PublicLayout);