imposed some style decisions on separation of html from server.js and…

… fixed some linting problems
erikras · Jul 25, 2015 · ab3e16a · ab3e16a
1 parent 16b6cee
commit ab3e16a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 32 deletions.
diff --git a/src/components/ContainerHTML.js → src/Html.js b/src/components/ContainerHTML.js → src/Html.js
@@ -1,5 +1,6 @@
 import React, {Component, PropTypes} from 'react';
 import serialize from 'serialize-javascript';
+const cdn = '//cdnjs.cloudflare.com/ajax/libs/';
 
 /**
  * Wrapper component containing HTML metadata and boilerplate tags.
@@ -10,42 +11,35 @@ import serialize from 'serialize-javascript';
  * HTML doctype declaration, which is added to the rendered output
  * by the server.js file.
  */
-class ContainerHTML extends Component {
+export default class Html extends Component {
   static propTypes = {
-    'webpackStats': PropTypes.object,
-    'componentHTML': PropTypes.string,
-    'storeState': PropTypes.object
+    webpackStats: PropTypes.object,
+    component: PropTypes.object,
+    store: PropTypes.object
   }
 
   render() {
-    const {webpackStats, componentHTML, storeState} = this.props;
-    const cdnBase = '//cdnjs.cloudflare.com/ajax/libs/';
+    const {webpackStats, component, store} = this.props;
     return (
       <html lang="en-us">
         <head>
           <meta charSet="utf-8"/>
           <title>React Redux Universal Hot Example</title>
           <link rel="shortcut icon" href="/favicon.ico" />
-          <link href={cdnBase + "twitter-bootstrap/3.3.5/css/bootstrap.css"}
+          <link href={cdn + 'twitter-bootstrap/3.3.5/css/bootstrap.css'}
                 media="screen, projection" rel="stylesheet" type="text/css" />
-          <link href={cdnBase + "font-awesome/4.3.0/css/font-awesome.min.css"}
+          <link href={cdn + 'font-awesome/4.3.0/css/font-awesome.min.css'}
                 media="screen, projection" rel="stylesheet" type="text/css" />
           {webpackStats.css.files.map((css, i) =>
             <link href={css} ref={i} media="screen, projection"
-                  rel="stylesheet" type="text/css"/>
-          )}
+                  rel="stylesheet" type="text/css"/>)}
         </head>
         <body>
-          <div id="content" dangerouslySetInnerHTML={
-            {__html: componentHTML}
-          } />
-          <script dangerouslySetInnerHTML={
-            {__html: `window.__data=${serialize(storeState)};`}
-          } />
-          <script src={webpackStats.script[0]} />
+          <div id="content" dangerouslySetInnerHTML={{__html: React.renderToString(component)}}/>
+          <script dangerouslySetInnerHTML={{__html: `window.__data=${serialize(store.getState())};`}} />
+          <script src={webpackStats.script[0]}/>
         </body>
       </html>
     );
   }
 }
-export default ContainerHTML;
diff --git a/src/components/InfoBar.js b/src/components/InfoBar.js
@@ -21,7 +21,7 @@ class InfoBar extends Component {
   render() {
     const {info, load} = this.props;
     return (
-      <div className={styles.infoBar + " well"}>
+      <div className={styles.infoBar + ' well'}>
         This is an info bar
         {' '}
         <strong>{info ? info.message : 'no info!'}</strong>

diff --git a/src/server.js b/src/server.js
@@ -10,9 +10,7 @@ import createStore from './redux/create';
 import api from './api/api';
 import ApiClient from './ApiClient';
 import universalRouter from './universalRouter';
-import ContainerHTML from './components/ContainerHTML';
-
-const containerDoctype = '<!doctype html>\n';
+import Html from './Html';
 
 const app = new Express();
 const proxy = httpProxy.createProxyServer({
@@ -53,13 +51,8 @@ app.use((req, res) => {
           res.redirect(transition.redirectInfo.pathname);
           return;
         }
-
-        res.send(containerDoctype + React.renderToString(
-          <ContainerHTML
-           webpackStats={webpackStats}
-           componentHTML={React.renderToString(component)}
-           storeState={store.getState()} />
-        ));
+        res.send('<!doctype html>\n' +
+          React.renderToString(<Html webpackStats={webpackStats} component={component} store={store}/>));
       } catch (error) {
         console.error('ERROR', error);
         res.status(500).send({error: error});

diff --git a/src/views/App.js b/src/views/App.js
@@ -43,7 +43,7 @@ class App extends Component {
   render() {
     const {user} = this.props;
     return (
-      <div className={styles.app + " container"}>
+      <div className={styles.app + ' container'}>
         <div className="jumbotron">
           <h1>React Redux Example</h1>
 
@@ -70,7 +70,7 @@ class App extends Component {
               {!user && <li><Link to="/login">Login</Link></li>}
               {user && <li className="logout-link"><a href="/logout" onClick={::this.handleLogout}>Logout</a></li>}
             </ul>
-            {user && <p className={styles.loggedInMessage + " navbar-text"}>Logged in as <strong>{user.name}</strong>.</p>}
+            {user && <p className={styles.loggedInMessage + ' navbar-text'}>Logged in as <strong>{user.name}</strong>.</p>}
           </div>
         </nav>
         <InfoBar/>

diff --git a/src/views/Widgets.js b/src/views/Widgets.js
@@ -32,7 +32,7 @@ class Widgets extends Component {
       <div className={styles.widgets}>
         <h1>
           Widgets
-          <button className={styles.refreshBtn + " btn btn-success"} onClick={load}><i className={refreshClassName}/> {' '} Reload Widgets</button>
+          <button className={styles.refreshBtn + ' btn btn-success'} onClick={load}><i className={refreshClassName}/> {' '} Reload Widgets</button>
         </h1>
         {error &&
         <div className="alert alert-danger" role="alert">