update with fixes from generator and enable isormophic images (#32)

.gitignore

@@ -154,4 +154,4 @@ Procfile
 config/assets.json
 npm-shrinkwrap.json
 
-.isomorphic-loader-config.json
+.isomorphic-loader-config.*

client/app.jsx

@@ -1,29 +1,25 @@
 import React from "react";
+import {render} from "react-dom";
 import { routes } from "./routes";
 import { Router, browserHistory } from "react-router";
 import { createStore, compose } from "redux";
-import { Resolver } from "react-resolver";
 import { Provider } from "react-redux";
 import "styles/base.css";
-import rootReducer from "./reducers/index";
+import rootReducer from "./reducers";
 
 import DevTools from "../client/devtools";
 
-const initialState = window.__PRELOADED_STATE__;
-
-// const rootReducer = (s, a) => s; // eslint-disable-line no-unused-vars
-
 const enhancer = compose(
   // Add middlewares you want to use in development:
   // applyMiddleware(d1, d2, d3),
   DevTools.instrument()
 );
 
-const store = createStore(rootReducer, initialState, enhancer);
 
 window.webappStart = () => {
-  Resolver.render(
-    () =>
+  const initialState = window.__PRELOADED_STATE__;
+  const store = createStore(rootReducer, initialState, enhancer);
+  render(
       <Provider store={store}>
         <div>
           <Router history={browserHistory}>{routes}</Router>

client/components/above-the-fold.jsx

@@ -1,28 +1,91 @@
-import React from "react";
+import React, {PropTypes} from "react";
 import {AboveTheFoldOnlyServerRender} from "above-the-fold-only-server-render";
+import {connect} from "react-redux";
+import smileyPng from "../images/718smiley.png";
+import peaceSmileyPng from "../images/peace-smiley.png";
+
+/* eslint-disable max-len */
 
 export class AboveFold extends React.Component {
 
   render() {
     return (
       <div>
-        <h3>Above-the-fold-only-server-render: Increase Your Performance</h3>
-        <AboveTheFoldOnlyServerRender skip={true}>
-            <div className="renderMessage" style={{color: "blue"}}>
-              <p>This will skip server rendering if the 'AboveTheFoldOnlyServerRender'
-                lines are present, or uncommented out.</p>
-              <p>This will be rendered on the server and visible
-                if the 'AboveTheFoldOnlyServerRender' lines are commented out.</p>
-              <p>Try manually toggling this component to see it in action</p>
-              <p>
-                <a href="https://github.com/electrode-io/above-the-fold-only-server-render"
-                  target="_blank">Read more about this module and see our live demo
-                </a>
-              </p>
-            </div>
+        <div style={{
+          marginLeft: "auto",
+          marginRight: "auto",
+          width: "98%",
+          border: "2px solid",
+          padding: "5pt"
+        }}>
+          <h3>Above-the-fold-only-server-render: Increase Your Performance. Note: This demo uses CSS3.</h3>
+          <p>This page demonstrates the <span>AboveTheFoldOnlyServerRender</span> component.</p>
+          <p>
+            <a href="https://github.com/electrode-io/above-the-fold-only-server-render" target="_blank">
+              Read more about this module and see our live demo
+            </a>
+          </p>
+        </div>
+        <div style={{
+          marginLeft: "auto",
+          marginRight: "auto",
+          marginTop: "10px",
+          marginBottom: "10px",
+          color: "blue",
+          border: "2px solid",
+          width: "98%",
+          height: "90vh",
+          padding: "5pt"
+        }}>
+          <p>This content block is here to fill up the browser view port as Above The Fold content and it always will be
+            rendered on server side.</p>
+          <p>To verify, use your browser's view source to see the original HTML of this page and see this being part of
+            the SSR content</p>
+          <p>You should see this fill up your browser screen to push content below the browser view port, which are
+            wrapped in the <span>AboveTheFoldOnlyServerRender</span> component.</p>
+          <img style={{
+            height: "30%"
+          }} src={smileyPng}/>
+          <p>Scroll down to see the content below</p>
+        </div>
+        {this.props.skip ? (
+          <div>In the page source you should NOT see any more HTML after this except a few empty <span>divs</span>
+          </div>)
+          :
+          (<div>In the page source you should SEE the HTML for the wrapped component after this.</div>)
+        }
+        <AboveTheFoldOnlyServerRender skip={this.props.skip}>
+          <div style={{
+            marginLeft: "auto",
+            marginRight: "auto",
+            marginTop: "10px",
+            color: "red",
+            border: "2px solid",
+            width: "98%",
+            height: "400px",
+            padding: "5pt"
+          }}>
+            <p>This content block is wrapped inside the <span>AboveTheFoldOnlyServerRender</span> component, with the
+              <span> skip</span> prop set to <span>{`${this.props.skip}`}</span>.</p>
+            {this.props.skip ?
+              <div><p>It will not be rendered on the server side, but you should see it in the browser.</p>
+                <p>To verify, check the page source to see this not being part of the SSR content.</p></div>
+              :
+              <div><p>It is also rendered on the server side since skip is <span>{`${this.props.skip}`}</span></p>
+                <p>To verify, check the page source to see this being part of the SSR content.</p></div>
+            }
+            <img src={peaceSmileyPng}/>
+          </div>
         </AboveTheFoldOnlyServerRender>
-        <h3>This is below the 'Above the fold closing tag'</h3>
       </div>
     );
   }
 }
+
+AboveFold.propTypes = {
+  skip: PropTypes.bool
+};
+
+export default connect((state) => {
+  return {skip: state.skip};
+})(AboveFold);

client/components/home.jsx

@@ -1,10 +1,11 @@
-import React, { PropTypes } from "react";
-import { connect } from "react-redux";
+import React, {PropTypes} from "react";
+import {connect} from "react-redux";
+import electrodeLogo from "../images/electrode.svg";
 
 class HomeWrapper extends React.Component {
   render() {
     return (
-     <Home data={this.props.data}/>
+      <Home data={this.props.data}/>
     );
   }
 }
@@ -13,17 +14,33 @@ HomeWrapper.propTypes = {
   data: PropTypes.string
 };
 
+/* eslint-disable max-len */
+
 export class Home extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello <a href="https://github.com/electrode-io">Electrode</a></h1>
+        <div style={{
+          width: "50%",
+          marginLeft: "auto",
+          marginRight: "auto"
+        }}>
+          <a href="https://github.com/electrode-io"> <img style={{
+            width: "100%"
+          }} alt="Electrode Logo" src={electrodeLogo}/>
+          </a>
+        </div>
         <h2>Demonstration Components</h2>
         <ul>
           <li><a href="/csrf">CSRF protection using electrode-csrf-jwt</a></li>
           <li>
-            <a href="/above-the-fold">
-            Above the Fold Render - increase your App's performance by using a skip prop
+            <a href="/above-the-fold?skip=true">
+              Above the Fold Render with skip=true - increase your App's performance by using a skip prop
+            </a>
+          </li>
+          <li>
+            <a href="/above-the-fold?skip=false">
+              Above the Fold Render with skip=false - increase your App's performance by using a skip prop
             </a>
           </li>
           <li><a href="/ssrcachingsimpletype">SSR Caching Simple Type Example</a></li>
@@ -40,7 +57,7 @@ Home.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  data: state.data
+  data: state && state.data
 });
 
 export default connect(

client/reducers/index.jsx

@@ -0,0 +1,5 @@
+const rootReducer = (state) => {
+  return state || {};
+};
+
+export default rootReducer;

client/routes.jsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { Route, IndexRoute} from "react-router";
+import {Route, IndexRoute} from "react-router";
 import Home from "./components/home";
 import SSRCachingTemplateType from "./components/ssr-caching-template-type";
 import SSRCachingSimpleType from "./components/ssr-caching-simple-type";
-import { CSRF } from "./components/csrf";
-import { AboveFold } from "./components/above-the-fold";
+import {CSRF} from "./components/csrf";
+import AboveFold from "./components/above-the-fold";
 
 export const routes = (
   <Route path="/">
-    <IndexRoute component={Home} />
-    <Route path="ssrcachingtemplatetype" component={SSRCachingTemplateType} />
-    <Route path="ssrcachingsimpletype" component={SSRCachingSimpleType} />
-    <Route path="csrf" component={CSRF} />
-    <Route path="above-the-fold" component={AboveFold} />
+    <IndexRoute component={Home}/>
+    <Route path="ssrcachingtemplatetype" component={SSRCachingTemplateType}/>
+    <Route path="ssrcachingsimpletype" component={SSRCachingSimpleType}/>
+    <Route path="csrf" component={CSRF}/>
+    <Route path="above-the-fold" component={AboveFold}/>
   </Route>
 );