server.js

main.jsx

'use strict';

/* Initialize Locales */
l20n.initializeLocales('demo', {
  'locales': ['en-US', 'fr', 'it', 'ge', 'ar', 'ch'],
  'default': 'en-US'
});

/* Initializing touch events */
React.initializeTouchEvents(true);

require('./preloader.jsx');

var routes = require('./routes.jsx'),
    //fluxxor
    Fluxxor = require('fluxxor'),
    FluxMixin = Fluxxor.FluxMixin(React),
    StoreWatchMixin = Fluxxor.StoreWatchMixin,
    Constants = require('./constants.jsx'),
    Actions = require('./actions.jsx'),
    UserStore = require('./stores/UserStore.jsx');

/*
 *fluxxor
*/
var stores = {
    UserStore:new UserStore()
};  

var flux = new Fluxxor.Flux(stores,Actions);

flux.on('dispatch', function(type, payload) {
    if (console && console.log) {
        console.log('[Dispatch]', type, payload);
    }
});


Pace.once('hide', function() {
  $('#pace-loader').removeClass('pace-big').addClass('pace-small');
});

var InitializeRouter = function(View) {
  // cleanup
  if(window.Rubix) window.Rubix.Cleanup();
  Pace.restart();
  if(window.hasOwnProperty('ga') && typeof window.ga === 'function') {
    window.ga('send', 'pageview', {
     'page': window.location.pathname + window.location.search  + window.location.hash
    });
  }

  React.render(<View flux={flux} />, document.getElementById('app-container'), function() {
    // l20n initialized only after everything is rendered/updated

    // 每次 rerender 頁面都會初始化 l20n
    l20n.ready();
    // 頁面重整特效可不加
    setTimeout(function() {
      $('body').removeClass('fade-out');
    }, 500);
  });
};

if(Modernizr.history)
  ReactRouter.run(routes, ReactRouter.HistoryLocation, InitializeRouter);
else
  ReactRouter.run(routes, InitializeRouter);

server.js

require('./globals');

var fs = require('fs');
var path = require('path');
var express = require('express');
var compression = require('compression');
var cookieParser = require('cookie-parser');
var expressBeautify = require('express-beautify')();

var app = express();
app.use(compression());
app.use(cookieParser());
app.use(express.static(path.join(process.cwd(), 'public')));
app.use(expressBeautify);

var package = require('./package.json');

var defaultAppName = process.env.APP ? process.env.APP : 'app';

var routes = require('./src/jsx/'+defaultAppName+'/routes.jsx');

var webpack_host = process.env.WHOST ? process.env.WHOST : 'localhost';
var webpack_dev_server_port = process.env.WPORT ? process.env.WPORT : 8079;

var html = fs.readFileSync(path.join(process.cwd(), 'src', 'jsx', defaultAppName, 'index.html'), {
  encoding: 'utf8'
});

var createStyleTag = function(file, media) {
  media = media || 'screen';
  return "    <link media='"+media+"' rel='stylesheet' type='text/css' href='"+file+"'>\n";
};

var stylesheets;
if(process.env.NODE_ENV === 'development') {
  stylesheets = createStyleTag('/css/'+defaultAppName+'/raw/{dir}/main.css', 'screen,print') +
      createStyleTag('/css/'+defaultAppName+'/raw/{dir}/theme.css') +
      createStyleTag('/css/'+defaultAppName+'/raw/{dir}/colors.css') +
      createStyleTag('/css/'+defaultAppName+'/raw/{dir}/font-faces.css');
  html = html.replace(new RegExp('{appscript}', 'g'), 'http://'+webpack_host+':'+webpack_dev_server_port+'/scripts/bundle.js');
} else {
  stylesheets = createStyleTag('/css/'+defaultAppName+'/blessed/{dir}/main-blessed1.css', 'screen,print') +
      createStyleTag('/css/'+defaultAppName+'/blessed/{dir}/main.css', 'screen,print') +
      createStyleTag('/css/'+defaultAppName+'/blessed/{dir}/theme.css') +
      createStyleTag('/css/'+defaultAppName+'/blessed/{dir}/colors-blessed1.css') +
      createStyleTag('/css/'+defaultAppName+'/blessed/{dir}/colors.css') +
      createStyleTag('/css/'+defaultAppName+'/blessed/{dir}/font-faces.css');
  html = html.replace(new RegExp('{appscript}', 'g'), '/js/demo/demo.js');
}

html = html.replace(new RegExp('{app}', 'g'), defaultAppName);
html = html.replace(new RegExp('{stylesheets}', 'g'), stylesheets);
html = html.replace(new RegExp('{version}', 'g'), package.version);

var ltr = html.replace(new RegExp('{dir}', 'g'), 'ltr');
var rtl = html.replace(new RegExp('{dir}', 'g'), 'rtl');

var Fluxxor = require('fluxxor'),
    Actions = require('./src/jsx/demo/actions.jsx'),
    UserStore = require('./src/jsx/demo/stores/UserStore.jsx');

var renderApp = function(req, res, cb) {

  var stores = {
      UserStore:new UserStore()
  };  

  var flux = new Fluxxor.Flux(stores,Actions);

  flux.on('dispatch', function(type, payload) {
      if (console && console.log) {
          console.log('[Dispatch]', type, payload);
      }
  });

  var router = ReactRouter.create({
    routes: routes,
    location: req.url,
    onAbort: function(redirect) {
      cb({redirect: redirect});
    },
    onError: function(err) {
      console.log(err);
    }
  });

  router.run(function(Handler, state) {
    if(state.routes[0].name === 'not-found') {
      cb({notFound: true}, React.renderToStaticMarkup(<Handler flux={flux} />));
      return;
    }

    cb(null, React.renderToStaticMarkup(<Handler flux={flux} />));
  });
};


/** BEGIN X-EDITABLE ROUTES */

app.get('/xeditable/groups', function(req, res) {
  res.send([
    {value: 0, text: 'Guest'},
    {value: 1, text: 'Service'},
    {value: 2, text: 'Customer'},
    {value: 3, text: 'Operator'},
    {value: 4, text: 'Support'},
    {value: 5, text: 'Admin'}
  ]);
});

app.get('/xeditable/status', function(req, res) {
  res.send(500);
});

app.post('/xeditable/address', function(req, res) {
  res.send(200);
});

app.post('/dropzone/file-upload', function(req, res) {
  res.send(200);
});

/** END X-EDITABLE ROUTES */

/** CATCH-ALL ROUTE **/
app.get('*', function(req, res, next) {
  if(req.url === '/favicon.ico') return next();
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With');
  var isRTL = req.cookies.rubix_dir === 'rtl' ? true : false;
  renderApp(req, res, function(err, h, token) {
    if(isRTL)
      h = rtl.replace(new RegExp('{container}', 'g'), h || '');
    else
      h = ltr.replace(new RegExp('{container}', 'g'), h || '');

    if (!err) {
      res.sendHTML(h);
    } else if (error.redirect) {
      res.redirect(error.redirect.to);
    } else if (error.notFound) {
      res.status(404).sendHTML(h);
    }
  });
});

var server = app.listen(process.env.PORT, function() {
  try {
    process.send('CONNECTED');
  } catch(e) {}
});

process.on('uncaughtException', function(err) {
  console.log(arguments);
  process.exit(0);
});

social.jsx

var Social = React.createClass({
  mixins: [SidebarMixin, FluxMixin, StoreWatchMixin("UserStore")],
  getInitialState: function() {
    this.getFlux().actions.getCurrentUser()
    // console.log(this.state)
  },
  getStateFromFlux: function() {
    var flux = this.getFlux();
    // Our entire state is made up of the TodoStore data. In a larger
    // application, you will likely return data from multiple stores, e.g.:
    //
    //   return {
    //     todoData: flux.store("TodoStore").getState(),
    //     userData: flux.store("UserStore").getData(),
    //     fooBarData: flux.store("FooBarStore").someMoreData()
    //   };
    return flux.store("UserStore").getState();
  },
  render: function() {
    console.log('hi')
    console.log(this.props.flux)
    var classes = classSet({
      'container-open': this.state.open
    });
    return (
      <Container id='container' className={classes}>
        <Sidebar />
        <Header pressed />
        <Body user={this.state.user} />
        <Footer />
      </Container>
    );
  }
});