troutowicz · troutowicz · May 22, 2015
diff --git a/.eslintrc b/.eslintrc
@@ -15,7 +15,7 @@
     "brace-style": 2,
     "comma-dangle": [2, "always-multiline"],
     "consistent-return": 2,
-    "curly": 2,
+    "curly": [2, "multi-line"],
     "dot-notation": 2,
     "eol-last": 2,
     "indent": [2, 2],
@@ -30,7 +30,7 @@
     "object-shorthand": 2,
     "quotes": [2, "single"],
     "space-after-keywords": 2,
-    "strict": [2, "global"],
+    "strict": 0,
     "vars-on-top": 2,
     "wrap-iife": 2,
     "react/jsx-boolean-value": [2, "always"],

diff --git a/app/actions/AppActions.js b/app/actions/AppActions.js
@@ -1,5 +1,3 @@
-'use strict';
-
 import alt from '../alt';
 import io from 'socket.io-client';
 
@@ -8,24 +6,34 @@ if (typeof window !== 'undefined') {
   socket = io();
 }
 
-class AppActions {
-  constructor() {
-    this.generateActions(
-      'updateFocusedMarker',
-      'updateFlowSuccess',
-      'updateInstaData',
-      'updateMarkers',
-      'updateTimeout'
-    );
-  }
+export default alt.createActions({
+  displayName: 'AppActions',
+
+  updateFocusedMarker(data) {
+    this.dispatch(data);
+  },
+
+  updateFlowSuccess(data) {
+    this.dispatch(data);
+      },
+
+  updateInstaData(data) {
+    this.dispatch(data);
+  },
+
+  updateMarkers(data) {
+    this.dispatch(data);
+  },
+
+  updateTimeout(data) {
+    this.dispatch(data);
+  },
 
   updateFlow(curFlow) {
     if (curFlow === 'Pause') {
       socket.emit('flow:pause', () => this.actions.updateFlowSuccess('Resume'));
     } else {
       socket.emit('flow:start', () => this.actions.updateFlowSuccess('Pause'));
     }
-  }
-}
-
-export default alt.createActions(AppActions);
+  },
+});
diff --git a/app/alt.js b/app/alt.js
@@ -1,5 +1,3 @@
-'use strict';
-
 import Alt from 'alt';
 
 export default new Alt();
diff --git a/app/app.js b/app/app.js
@@ -1,8 +1,8 @@
-'use strict';
-
 import React from 'react';
 import Iso from 'iso';
-import Wrapper from './components/Wrapper';
+import wrapperFactory from './components/Wrapper';
+
+const Wrapper = wrapperFactory(React);
 
 require('babel/polyfill');
 

diff --git a/app/components/App.jsx b/app/components/App.jsx
@@ -1,15 +1,14 @@
-'use strict';
-
 const isBrowser = typeof window !== 'undefined';
-// TODO how to handle the es6 way?
-const GeoMap = isBrowser ? require('./Map') : undefined;
 
-import React from 'react';
 import injectTapEventPlugin from 'react-tap-event-plugin';
-import List from './List';
-import Snackbar from 'material-ui/lib/snackbar';
-import TopBar from './TopBar';
 import io from 'socket.io-client';
+import stampit from 'react-stampit';
+import Snackbar from 'material-ui/lib/snackbar';
+
+import listFactory from './List';
+import topBarFactory from './TopBar';
+// TODO how to handle conditional imports in ES6?
+const mapFactory = isBrowser ? require('./Map') : undefined;
 
 let socket;
 if (isBrowser) {
@@ -18,79 +17,102 @@ if (isBrowser) {
 
 injectTapEventPlugin();
 
-class App extends React.Component {
-  componentDidMount() {
-    socket.on('data:add', this._onNewData.bind(this));
-    socket.on('data:timeout', this._onDataTimeout.bind(this));
-  }
-
-  _getStyles() {
-    return {
-      root: {
-        fontFamily: this.context.muiTheme.contentFontFamily,
-        fontSize: '13px',
-        lineHeight: '20px',
-        WebkitFontSmoothing: 'antialiased',
-      },
-      list: {
-        position: 'absolute',
-        top: '56px',
-        bottom: '0',
-        right: '0',
-        width: '290px',
-        overflow: 'hidden',
-        overflowY: 'scroll',
-      },
-      map: {
-        position: 'absolute',
-        top: '56px',
-        bottom: '0',
-        left: '0',
-        right: '290px',
-      },
-    };
-  }
-
-  _onNewData(data) {
-    this.props.updateInstaData(data);
-  }
-
-  _onDataTimeout(data) {
-    this.props.updateTimeout(data);
-  }
-
-  _onListItemClick(item) {
-    this.props.updateFocusedMarker(item);
-  }
-
-  render() {
-    let styles = this._getStyles();
-    // cant be executing client side js on prerender
-    let map, alert;
-
-    if (isBrowser) {
-      map = (
-        <GeoMap
-          focusMarker={this.props.focusMarker}
-          markers={this.props.markers}
-          newMarkerData={this.props.newImageData}
-          style={styles.map}
-          updateMarkers={this.props.updateMarkers}
-        />
-      );
-    }
-
-    if (this.props.timeout) {
-      alert = (
-        <Snackbar
-          message='All tokens have reached the hourly limit, consider logging in to register a token!'
-          openOnMount={true}
-        />
-      );
-    }
-
-    return (
-      <div id='app-container' style={styles.root} >
+export default React => {
+  const GeoMap = mapFactory ? mapFactory(React) : mapFactory;
+  const List = listFactory(React);
+  const TopBar = topBarFactory(React);
+
+  return stampit(React, {
+    contextTypes: {
+      muiTheme: React.PropTypes.object,
+    },
+
+    propTypes: {
+      flow: React.PropTypes.string,
+      focusMarker: React.PropTypes.object,
+      imageData: React.PropTypes.array,
+      markers: React.PropTypes.object,
+      newImageData: React.PropTypes.object,
+      timeout: React.PropTypes.bool,
+      updateFlow: React.PropTypes.func,
+      updateFocusedMarker: React.PropTypes.func,
+      updateInstaData: React.PropTypes.func,
+      updateMarkers: React.PropTypes.func,
+      updateTimeout: React.PropTypes.func,
+    },
+
+    componentDidMount() {
+      socket.on('data:add', this._onNewData.bind(this));
+      socket.on('data:timeout', this._onDataTimeout.bind(this));
+    },
+
+    _getStyles() {
+      return {
+        root: {
+          fontFamily: this.context.muiTheme.contentFontFamily,
+          fontSize: '13px',
+          lineHeight: '20px',
+          WebkitFontSmoothing: 'antialiased',
+        },
+        list: {
+          position: 'absolute',
+          top: '56px',
+          bottom: '0',
+          right: '0',
+          width: '290px',
+          overflow: 'hidden',
+          overflowY: 'scroll',
+        },
+        map: {
+          position: 'absolute',
+          top: '56px',
+          bottom: '0',
+          left: '0',
+          right: '290px',
+        },
+      };
+    },
+
+    _onNewData(data) {
+      this.props.updateInstaData(data);
+    },
+
+    _onDataTimeout(data) {
+      this.props.updateTimeout(data);
+    },
+
+    _onListItemClick(item) {
+      this.props.updateFocusedMarker(item);
+    },
+
+    render() {
+      let styles = this._getStyles();
+      // cant be executing client side js on prerender
+      let map, alert;
+
+      if (isBrowser) {
+        map = (
+          <GeoMap
+            focusMarker={this.props.focusMarker}
+            markers={this.props.markers}
+            newMarkerData={this.props.newImageData}
+            style={styles.map}
+            updateMarkers={this.props.updateMarkers}
+          />
+        );
+      }
+
+      if (this.props.timeout) {
+        alert = (
+          <Snackbar
+            message='All tokens have reached the hourly limit, consider logging in to register a token!'
+            openOnMount={true}
+          />
+        );
+      }
+
+      return (
+        <div id='app-container' style={styles.root} >
         <TopBar
           flow={this.props.flow}
           itemCount={Object.keys(this.props.markers).length}
@@ -104,26 +126,7 @@ class App extends React.Component {
           style={styles.list}
         />
       </div>
-    );
-  }
-}
-
-App.contextTypes = {
-  muiTheme: React.PropTypes.object,
-};
-
-App.propTypes = {
-  flow: React.PropTypes.string,
-  focusMarker: React.PropTypes.object,
-  imageData: React.PropTypes.array,
-  markers: React.PropTypes.object,
-  newImageData: React.PropTypes.object,
-  timeout: React.PropTypes.bool,
-  updateFlow: React.PropTypes.func,
-  updateFocusedMarker: React.PropTypes.func,
-  updateInstaData: React.PropTypes.func,
-  updateMarkers: React.PropTypes.func,
-  updateTimeout: React.PropTypes.func,
+      );
+    },
+  });
 };
-
-export default App;
diff --git a/app/components/AuthButton.jsx b/app/components/AuthButton.jsx
@@ -1,16 +1,31 @@
-'use strict';
-
-import React from 'react';
+import stampit from 'react-stampit';
 import FlatButton from 'material-ui/lib/flat-button';
 
-class AuthButton extends React.Component {
+export default React => stampit(React, {
+  displayName: 'AuthButton',
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  propTypes: {
+    label: React.PropTypes.string,
+    onTouchTap: React.PropTypes.func,
+    style: React.PropTypes.object,
+  },
+
+  defaultProps: {
+    label: 'Login',
+    style: {},
+  },
+
   _getStyles() {
     const theme = this.context.muiTheme.component.flatButton;
 
     return {
       hoverColor: theme.hoverColor,
     };
-  }
+  },
 
   render() {
     const styles = this._getStyles.call(this);
@@ -21,22 +36,5 @@ class AuthButton extends React.Component {
         hoverColor={styles.hoverColor}
       />
     );
-  }
-}
-
-AuthButton.contextTypes = {
-  muiTheme: React.PropTypes.object,
-};
-
-AuthButton.propTypes = {
-  label: React.PropTypes.string,
-  onTouchTap: React.PropTypes.func,
-  style: React.PropTypes.object,
-};
-
-AuthButton.defaultProps = {
-  label: 'Login',
-  style: {},
-};
-
-export default AuthButton;
+  },
+});