Fixed data fetching: Mount *all* the widgets at once

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mozaik-ext-switcher",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Mozaïk extension for switching between widgets within same dashboard",
   "author": "Juha Mustonen",
   "license": "MIT",
@@ -21,6 +21,7 @@
     "babelify": "7.2.0",
     "bluebird": "3.3.5",
     "chalk": "^1.1.3",
+    "classnames": "^2.2.5",
     "convict": "^0.6.1",
     "json5": "^0.5.0",
     "lodash": "^4.10.0",

src/components/Widgets.jsx

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React, { Component, PropTypes } from 'react';
 import ComponentRegistry from 'mozaik/src/browser/component-registry';
 import Widget from 'mozaik/src/browser/components/Widget.jsx';
+import classNames from 'classnames';
 
 
 class Widgets extends Component {
@@ -19,7 +20,6 @@ class Widgets extends Component {
         nextWidgetIndex = 0;
       }
 
-      console.log('Next widdget', nextWidgetIndex);
       if (this.mounted) {
         this.setState({
           widgetIndex: nextWidgetIndex
@@ -37,16 +37,27 @@ class Widgets extends Component {
   }
 
   render() {
-    const childProps = this.props.widgets[this.state.widgetIndex];
-    const { type } = this.props.widgets[this.state.widgetIndex];
-    const widget = React.createElement(ComponentRegistry.get(type), childProps);
+    // NOTE: Render all the elements to mount them: Also triggers the data fetching
+    const widgetElements = this.props.widgets.map((widgetProps, index) => {
+      const widget = React.createElement(ComponentRegistry.get(widgetProps.type), widgetProps);
+      const typeClass = widgetProps.type.replace('_', '-').replace('.', '__');
 
-    // Set class according to component type
-    const cssClass = `widget ${ type.replace('_', '-').replace('.', '__') }`;
+      let widgetClass = classNames({
+        'widget': true,
+        [typeClass]: true,
+        'switcher__widgets--hidden': this.state.widgetIndex !== index
+      });
+
+      return (
+        <div className="widget__wrapper">
+          <div className={widgetClass}>{widget}</div>
+        </div>
+      );
+    });
 
     return (
       <div className="widget__wrapper">
-        <div className={cssClass}>{widget}</div>
+        {widgetElements}
       </div>
     );
   }

styl/index.styl

@@ -9,3 +9,7 @@
     height: 100%;
   }
 }
+
+.switcher__widgets--hidden {
+  display: none;
+}