/**
 * THIS IS THE ENTRY POINT FOR THE CLIENT, JUST LIKE server.js IS THE ENTRY POINT FOR THE SERVER.
 */
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import createStore from './redux/create';
import ApiClient from './helpers/ApiClient';
import io from 'socket.io-client';
import {Provider} from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { ReduxAsyncConnect } from 'redux-async-connect';
import useScroll from 'scroll-behavior/lib/useStandardScroll';
import injectTapEventPlugin from 'react-tap-event-plugin';

import getRoutes from './routes';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

const client = new ApiClient();
const _browserHistory = useScroll(() => browserHistory)();
const dest = document.getElementById('content');
const store = createStore(_browserHistory, client, window.__data);
const history = syncHistoryWithStore(_browserHistory, store);

function initSocket() {
  const socket = io('', {path: '/ws'});
  socket.on('news', (data) => {
    console.log(data);
    socket.emit('my other event', { my: 'data from client' });
  });
  socket.on('msg', (data) => {
    console.log(data);
  });

  return socket;
}

global.socket = initSocket();

const component = (
  <Router render={(props) =>
        <ReduxAsyncConnect {...props} helpers={{client}} filter={item => !item.deferred} />
      } history={history}>
    {getRoutes(store)}
  </Router>
);

ReactDOM.render(
  <Provider store={store} key="provider">
    {component}
  </Provider>,
  dest
);

if (process.env.NODE_ENV !== 'production') {
  window.React = React; // enable debugger

  if (!dest || !dest.firstChild || !dest.firstChild.attributes || !dest.firstChild.attributes['data-react-checksum']) {
    console.error('Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.');
  }
}

if (__DEVTOOLS__ && !window.devToolsExtension) {
  const DevTools = require('./containers/DevTools/DevTools');
  ReactDOM.render(
    <Provider store={store} key="provider">
      <div>
        {component}
        <DevTools />
      </div>
    </Provider>,
    dest
  );
}

@@ -642,136 +642,539 @@
 n';%0A
-%0Aimport getRoutes from './routes';%0A%0A// Needed for onTouchTap%0A// http://stackoverflow.com/a/34015469/988941%0AinjectTapEventPlugin(
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';%0Aimport getMuiTheme from 'material-ui/styles/getMuiTheme';%0Aimport %7B green100, green500, green700 %7D from 'material-ui/styles/colors';%0A%0Aimport getRoutes from './routes';%0A%0A// Needed for onTouchTap%0A// http://stackoverflow.com/a/34015469/988941%0AinjectTapEventPlugin();%0A%0Aconst muiTheme = getMuiTheme(%7B%0A  palette: %7B%0A    primary1Color: green500,%0A    primary2Color: green700,%0A    primary3Color: green100%0A  %7D,%0A%7D, %7B%0A  avatar: %7B%0A    borderColor: null%0A  %7D,%0A  userAgent: 'all'%0A%7D
 );%0A%0A
@@ -2573,24 +2573,71 @@
 %22provider%22%3E%0A
+      %3CMuiThemeProvider muiTheme=%7BmuiTheme%7D%3E%0A  
       %3Cdiv%3E%0A
@@ -2632,24 +2632,26 @@
       %3Cdiv%3E%0A
+  
         %7Bcom
@@ -2666,16 +2666,18 @@
         
+ 
+ 
 %3CDevTool
@@ -2691,15 +2691,43 @@
     
+  
 %3C/div%3E%0A
+      %3C/MuiThemeProvider%3E%0A
     

Add Material UI theme