How to use fluxible-addons-react - 10 common examples

app.rehydrate(window.App, (err, context) => {
    let isRehydrating = true;

    if (err) {
        throw err;
    }

    debug('React Rendering');

    const RouterWithContext = provideContext(Router, app.customContexts);

    ReactDOM.hydrate(
         {
                        /* emit an event? */
                    })
                    .catch(fetchDataErr => {
                        console.error(fetchDataErr.stack);

// http://numenta.org/licenses/

import connectToStores from 'fluxible-addons-react/connectToStores';
import IconCheckbox from 'material-ui/lib/svg-icons/toggle/check-box';
import Paper from 'material-ui/lib/paper';
import React from 'react';
import ReactDOM from 'react-dom';

import Model from './Model';
import ModelStore from '../stores/ModelStore';


/**
 * List of Model Charts, React component
 */
@connectToStores([ModelStore], (context) => ({
  models: context.getStore(ModelStore).getModels(),
  visibleModelStack: context.getStore(ModelStore).getVisibleModelStack()
}))
export default class ModelList extends React.Component {

  static get contextTypes() {
    return {
      executeAction: React.PropTypes.func,
      getConfigClient: React.PropTypes.func,
      getStore: React.PropTypes.func,
      muiTheme: React.PropTypes.object
    };
  }

  static get propTypes() {
    return {

}, (err) => {
        if (err) {
            if (err.statusCode && err.statusCode === 404) {
                // Pass through to next middleware
                next();
            } else {
                next(err);
            }
            return;
        }

        debug('Exposing context state');
        const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

        debug('Rendering Application component into html');
        const markup = ReactDOM.renderToString(createElementWithContext(context));
        const htmlElement = React.createElement(HtmlComponent, {
            clientFile: env === 'production' ? 'main.min.js' : 'main.js',
            context: context.getComponentContext(),
            state: exposed,
            markup: markup
        });
        const html = ReactDOM.renderToStaticMarkup(htmlElement);

        debug('Sending markup');
        res.type('html');
        res.write('' + html);
        res.end();
    });
});

if (process.env.NODE_ENV === "production") {
  // on production, include scripts and css from the webpack stats
  const config = require("../../webpack/prod.config");
  const stats = require("../../static/dist/stats.json");
  scripts.push(`${config.output.publicPath}${stats.main}`);
  css.push(`${config.output.publicPath}${stats.css}`);
}
else {
  // on development, use the webpack dev server config
  // css are not needed since they are injected inline with webpack
  const config = require("../../webpack/dev.config");
  scripts.push(`${config.output.publicPath}${config.output.filename}`);
}


@provideContext()
@connectToStores([], context => {
  const htmlHeadStore = context.getStore("HtmlHeadStore");
  return {
    title: htmlHeadStore.getTitle(),
    description: htmlHeadStore.getDescription(),
    siteName: htmlHeadStore.getSiteName(),
    currentUrl: htmlHeadStore.getCurrentUrl(),
    images: htmlHeadStore.getImages()
  };
})
class Html extends React.Component {

  static propTypes = {
    context: PropTypes.object.isRequired,
    lang: PropTypes.string.isRequired,
    state: PropTypes.string.isRequired,

// internals

import FileAddAction from '../actions/FileAdd';
import FileUploadAction from '../actions/FileUpload';
import FileList from '../components/FileList';
import FileDetails from '../components/FileDetails';
import LeftNav from '../components/LeftNav';
import ModelList from '../components/ModelList';
import UnicornTheme from '../lib/MaterialUI/UnicornTheme';


/**
 * React Main View Component
 */
@provideContext({
  getConfigClient: React.PropTypes.func,
  getLoggerClient: React.PropTypes.func,
  getDatabaseClient: React.PropTypes.func,
  getFileClient: React.PropTypes.func,
  getModelClient: React.PropTypes.func
})
@ThemeDecorator(ThemeManager.getMuiTheme(UnicornTheme)) // eslint-disable-line new-cap
export default class Main extends React.Component {

  static get contextTypes() {
    return {
      executeAction: React.PropTypes.func.isRequired
    };
  }

  constructor(props, context) {

import FileValidateAction from '../actions/FileValidate';
import FileList from './FileList';
import FileDetails from './FileDetails';
import HTMStudioTheme from '../lib/MaterialUI/HTMStudioTheme';
import LeftNav from './LeftNav';
import ModelList from './ModelList';

const app = remote.app;
const dialog = remote.require('dialog');


/**
 * React Main View Component
 */
@provideContext({
  getConfigClient: React.PropTypes.func,
  getLogger: React.PropTypes.func,
  getDatabaseClient: React.PropTypes.func,
  getFileClient: React.PropTypes.func,
  getGATracker: React.PropTypes.func,
  getModelClient: React.PropTypes.func,
  getParamFinderClient: React.PropTypes.func
})
@ThemeDecorator(ThemeManager.getMuiTheme(HTMStudioTheme)) // eslint-disable-line new-cap
export default class Main extends React.Component {

  static get contextTypes() {
    return {
      executeAction: React.PropTypes.func.isRequired,
      getParamFinderClient: React.PropTypes.func,
      getConfigClient: React.PropTypes.func,

beforeEach('render and locate element', function(done){

    let testStores = [ContentModuleStore];
    let context = createMockComponentContext({
      stores : testStores
    });

    let testComponent = provideContext(connectToStores(component, testStores, function(){
      return {};
    }));

    component = TestUtils.renderIntoDocument();

    done();

  });

beforeEach(function() {
    context = createMockComponentContext({});
    sinon.stub(context, 'executeAction');

    var SearchInputClass = provideContext(SearchInput);

    component = ReactTestUtils.renderIntoDocument(
      
    );

    node = ReactDOM.findDOMNode(component);
  });

makeComponent = function(page) {
      var currentRoute = Immutable.Map({
        path: 'http:localhost:8000',
        query: Immutable.Map({q: 'light', p: page || 1})
      });

      var context = createMockComponentContext({
        stores: [RouteStore]
      });

      context.dispatcherContext.dispatcher.stores.RouteStore.prototype.getCurrentRoute = function() {
        return currentRoute;
      }

      var PaginationClass = provideContext(Pagination);

      component = ReactTestUtils.renderIntoDocument(
        
      );

      node = ReactDOM.findDOMNode(component);
    }
  });

beforeEach(function() {
    clock = sinon.useFakeTimers();

    context = createMockComponentContext({
      stores: [AudioplayerStore, SurahsStore, AyahsStore]
    });

    context.getStore('SurahsStore').surahs = getSurahs;
    context.getStore('AyahsStore').ayahs = getAyahs;
    context.getStore('AudioplayerStore').currentAyah = getAyahs[0];
    context.getStore('AudioplayerStore').currentAudio = new AudioStub(getAyahs[0].audio.mp3.url);

    var AudioplayerClass = provideContext(Audioplayer);

    component = ReactTestUtils.renderIntoDocument(
      
    );

    node = ReactDOM.findDOMNode(component);

    foundComponent = ReactTestUtils.findAllInRenderedTree(component, function(t) {
      return t.constructor.name === 'Audioplayer';
    })[0];

    sinon.stub(context, 'executeAction');
    sinon.stub(foundComponent, 'changeAyah');
    sinon.stub(foundComponent, 'loadRestOfAudio');
  });