Introduce dashboard widget to DRY up socket sharing

src/dashboards/index.jsx

@@ -1,26 +1,24 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import socketIOClient from 'socket.io-client';
 
 import '../styles/default.scss';
 
+import Dashboard from '../widgets/dashboard';
 import NumberWidget from '../widgets/number/widget';
 import PingWidget from '../widgets/ping/widget';
 import BuildStatusWidget from '../widgets/build-status/widget';
 import SparklineWidget from '../widgets/sparkline/widget';
 import ProgressWidget from '../widgets/progress/widget';
 
-const socket = socketIOClient(`http://${window.location.host}`);
-
 ReactDOM.render(
-  <div className="dashboard">
-    <SparklineWidget socket={socket} name="DemoUsers" title="Users" format="0.00a" />
-    <PingWidget socket={socket} name="GooglePing" title="API" />
-    <NumberWidget socket={socket} name="ReasonPRs" title="Pull Requests" />
-    <BuildStatusWidget socket={socket} name="DemoMaster" title="Build - Master" size="medium" />
-    <ProgressWidget socket={socket} name="DemoProgress" title="Sales Target" />
-    <NumberWidget socket={socket} name="DemoConversion" title="Conversion" metric="%" format="0.0a" />
-    <BuildStatusWidget socket={socket} name="DemoDevelop" title="Build - Develop" size="medium" />
-  </div>,
+  <Dashboard>
+    <SparklineWidget name="DemoUsers" title="Users" format="0.00a" />
+    <PingWidget name="GooglePing" title="API" />
+    <NumberWidget name="ReasonPRs" title="Pull Requests" />
+    <BuildStatusWidget name="DemoMaster" title="Build - Master" size="medium" />
+    <ProgressWidget name="DemoProgress" title="Sales Target" />
+    <NumberWidget name="DemoConversion" title="Conversion" metric="%" format="0.0a" />
+    <BuildStatusWidget name="DemoDevelop" title="Build - Develop" size="medium" />
+  </Dashboard>,
   document.getElementById('content'),
 );

src/widgets/base.jsx

@@ -6,13 +6,12 @@ import logger from '../../lib/logger';
 export default class BaseWidget extends React.Component {
   constructor(props) {
     super(props);
-    this.socket = this.props.socket;
     this.classList = ['widget', `widget__${this.props.name}`];
     if (this.props.size) this.classList.push(`widget--${this.props.size}`);
   }
 
   componentWillMount() {
-    this.socket.on(`widget:update:${this.props.name}`, data => {
+    this.props.socket.on(`widget:update:${this.props.name}`, data => {
       logger('info', `updating widget: ${this.props.name}`, data);
       this.setState(data);
     });
@@ -26,5 +25,5 @@ BaseWidget.defaultProps = {
 BaseWidget.propTypes = {
   size: PropTypes.string,
   name: PropTypes.string.isRequired,
-  socket: PropTypes.shape().isRequired,
+  socket: PropTypes.shape.isRequired,
 };

src/widgets/dashboard.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import socketIOClient from 'socket.io-client';
+
+function renderWidgets(props) {
+  const socket = socketIOClient(`http://${window.location.host}`);
+  return React.Children.map(props.children, child => React.cloneElement(child, { socket }));
+}
+
+function Dashboard(props) {
+  return <div className="dashboard">{renderWidgets(props)}</div>;
+}
+
+export default Dashboard;

webpack.config.babel.js

@@ -37,7 +37,7 @@ const webConfig = {
     new webpack.optimize.CommonsChunkPlugin({ name: 'commons', filename: 'common.bundle.js' }),
     new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
     new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(en)$/),
-    new webpack.optimize.UglifyJsPlugin(),
+    // new webpack.optimize.UglifyJsPlugin(),
     new webpack.optimize.AggressiveMergingPlugin(),
   ],
   resolve: {