Move homepage rendering logic to routes so its ssr-able

Author: mxstbr

src/index.js

@@ -13,7 +13,6 @@ import { initStore } from './store';
 import { getItemFromStorage } from './helpers/localStorage';
 import { theme } from './components/theme';
 import Routes from './routes';
-import Homepage from './views/homepage';
 import { addToastWithTimeout } from './actions/toasts';
 import registerServiceWorker from './registerServiceWorker';
 import type { ServiceWorkerResult } from './registerServiceWorker';
@@ -49,34 +48,16 @@ const store = initStore(window.__SERVER_STATE__ || initialState, {
 });
 
 function render() {
-  // if user is not stored in localStorage and they visit a blacklist url
-  if (
-    (!existingUser || existingUser === null) &&
-    (window.location.pathname === '/' ||
-      window.location.pathname === '/messages' ||
-      window.location.pathname === '/messages/new' ||
-      window.location.pathname === '/notifications')
-  ) {
-    return ReactDOM.render(
-      <Router history={history}>
+  return ReactDOM.render(
+    <Router history={history}>
+      <ApolloProvider store={store} client={client}>
         <ThemeProvider theme={theme}>
-          <Homepage />
+          <Routes />
         </ThemeProvider>
-      </Router>,
-      document.querySelector('#root')
-    );
-  } else {
-    return ReactDOM.render(
-      <Router history={history}>
-        <ApolloProvider store={store} client={client}>
-          <ThemeProvider theme={theme}>
-            <Routes />
-          </ThemeProvider>
-        </ApolloProvider>
-      </Router>,
-      document.querySelector('#root')
-    );
-  }
+      </ApolloProvider>
+    </Router>,
+    document.querySelector('#root')
+  );
 }
 
 try {

src/routes.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 //$FlowFixMe
 import { Route, Switch, Redirect } from 'react-router';
+import { connect } from 'react-redux';
 //$FlowFixMe
 import styled, { ThemeProvider } from 'styled-components';
 import generateMetaInfo from 'shared/generate-meta-info';
@@ -27,6 +28,8 @@ import communitySettings from './views/communitySettings';
 import channelSettings from './views/channelSettings';
 import NewCommunity from './views/newCommunity';
 import ThreadSlider from './views/threadSlider';
+import Homepage from './views/homepage';
+import homepageFallback from './views/homepage/fallback';
 
 const About = () =>
   <div>
@@ -68,8 +71,12 @@ class Routes extends Component {
               https://reacttraining.com/react-router/web/api/Switch
             */}
             <Switch>
-              <Route exact path="/" component={Dashboard} />
-              <Route exact path="/home" component={Dashboard} />
+              <Route exact path="/" component={homepageFallback(Dashboard)} />
+              <Route
+                exact
+                path="/home"
+                component={homepageFallback(Dashboard)}
+              />
 
               {/* Public Business Pages */}
               <Route path="/about" component={About} />

src/views/homepage/fallback.js

@@ -0,0 +1,23 @@
+// @flow
+// Fallback to the <Homepage /> component if there's no current user
+import React from 'react';
+import { connect } from 'react-redux';
+import Homepage from './';
+
+// This is the component that determines at render time what to do
+const HomepageFallbackComp = props => {
+  const { Component, currentUser, ...rest } = props;
+  if (!currentUser || !Component) return <Homepage {...rest} />;
+  return <Component {...rest} />;
+};
+
+// Connect that component to the Redux state
+const ConnectedFallbackComp = connect(state => ({
+  currentUser: state.users.currentUser,
+}))(HomepageFallbackComp);
+
+const homepageFallback = Component => {
+  return props => <ConnectedFallbackComp {...props} Component={Component} />;
+};
+
+export default homepageFallback;