Fixes #79: Migration to the redux library to implement Flux architecture

karma.conf.continuous-test.js

@@ -8,7 +8,8 @@ module.exports = function karmaConfig(config) {
         frameworks: [ 'mocha' ],
 
         files: [
-            'tests.webpack.js'
+            'tests.webpack.js',
+            { pattern: './web/client/test-resources/**/*', included: false }
         ],
 
         preprocessors: {

karma.conf.single-run.js

@@ -8,7 +8,8 @@ module.exports = function karmaConfig(config) {
         frameworks: [ 'mocha' ],
 
         files: [
-            'tests.webpack.js'
+            'tests.webpack.js',
+            { pattern: './web/client/test-resources/**/*', included: false }
         ],
 
         preprocessors: {

package.json

@@ -45,10 +45,13 @@
     "react": "^0.13.3",
     "react-bootstrap": "^0.24.3",
     "react-intl": "^1.2.0",
+    "react-redux": "^1.0.0",
+    "redux": "^1.0.0",
+    "redux-thunk": "^0.1.0",
     "url": "~0.10.3"
   },
   "scripts": {
-    "clean": "rm -Rf ./web/dist",
+    "clean": "rm -Rf ./web/client/dist",
     "compile": "npm run clean && mkdirp ./web/client/dist && webpack",
     "start": "webpack-dev-server --progress --colors --port 8081 --content-base web/client",
     "test": "karma start ./karma.conf.single-run.js",

web/client/actions/__tests__/config-test.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var expect = require('expect');
+var loadMapConfig = require('../config').loadMapConfig;
+
+describe('Test configuration related actions', () => {
+    it('does not load a missing configuration file', (done) => {
+        loadMapConfig('missingConfig.json')((e) => {
+            try {
+                expect(e).toExist();
+                expect(e.type).toBe('MAP_CONFIG_LOAD_ERROR');
+                done();
+            } catch(ex) {
+                done(ex);
+            }
+        });
+    });
+
+    it('loads an existing configuration file', (done) => {
+        loadMapConfig('base/web/client/test-resources/testConfig.json')((e) => {
+            try {
+                expect(e).toExist();
+                expect(e.type).toBe('MAP_CONFIG_LOADED');
+                done();
+            } catch(ex) {
+                done(ex);
+            }
+        });
+    });
+});

web/client/actions/__tests__/locale-test.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var expect = require('expect');
+var loadLocale = require('../locale').loadLocale;
+
+describe('Test locale related actions', () => {
+    it('does not load a missing translation file', (done) => {
+        loadLocale('', 'unknown')((e) => {
+            try {
+                expect(e).toExist();
+                expect(e.type).toBe('LOCALE_LOAD_ERROR');
+                done();
+            } catch(ex) {
+                done(ex);
+            }
+        });
+    });
+
+    it('loads an existing translation file', (done) => {
+        loadLocale('base/web/client/test-resources', 'it-IT')((e) => {
+            try {
+                expect(e).toExist();
+                expect(e.type).toBe('CHANGE_LOCALE');
+                done();
+            } catch(ex) {
+                done(ex);
+            }
+        });
+    });
+});

web/client/actions/config.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var axios = require('axios');
+
+const MAP_CONFIG_LOADED = 'MAP_CONFIG_LOADED';
+const MAP_CONFIG_LOAD_ERROR = 'MAP_CONFIG_LOAD_ERROR';
+
+function configureMap(conf, legacy) {
+    return {
+        type: MAP_CONFIG_LOADED,
+        config: conf,
+        legacy: legacy || false
+    };
+}
+
+function configureError(e) {
+    return {
+        type: MAP_CONFIG_LOAD_ERROR,
+        error: e
+    };
+}
+
+function loadMapConfig(configName, legacy) {
+    return (dispatch) => {
+        return axios.get(configName).then((response) => {
+            dispatch(configureMap(response.data, legacy));
+        }).catch((e) => {
+            dispatch(configureError(e));
+        });
+    };
+}
+
+module.exports = {MAP_CONFIG_LOADED, MAP_CONFIG_LOAD_ERROR, loadMapConfig};

web/client/actions/locale.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var axios = require('axios');
+
+const CHANGE_LOCALE = 'CHANGE_LOCALE';
+const LOCALE_LOAD_ERROR = 'LOCALE_LOAD_ERROR';
+
+function changeLocale(data) {
+    return {
+        type: CHANGE_LOCALE,
+        messages: data.messages,
+        locale: data.locale
+    };
+}
+
+function localeError(e) {
+    return {
+        type: LOCALE_LOAD_ERROR,
+        error: e
+    };
+}
+
+function loadLocale(translationFolder, language) {
+    return (dispatch) => {
+        return axios.get(translationFolder + '/data.' + language).then((response) => {
+            dispatch(changeLocale(response.data));
+        }).catch((e) => {
+            dispatch(localeError(e));
+        });
+    };
+}
+
+module.exports = {CHANGE_LOCALE, LOCALE_LOAD_ERROR, loadLocale};

web/client/components/I18N/Localized.jsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var React = require('react');
+
+var Localized = React.createClass({
+    propTypes: {
+        locale: React.PropTypes.string,
+        messages: React.PropTypes.object
+    },
+    childContextTypes: {
+        locale: React.PropTypes.string,
+        messages: React.PropTypes.object
+    },
+    getChildContext() {
+        return {
+           locale: this.props.locale,
+           messages: this.props.messages
+        };
+    },
+    render() {
+        let { children } = this.props;
+
+        if (typeof children === 'function') {
+            children = children();
+        }
+
+        return React.Children.only(children);
+    }
+ });
+
+module.exports = Localized;

web/client/components/I18N/Message.jsx

@@ -9,40 +9,22 @@ var React = require('react');
 var ReactIntl = require('react-intl');
 var FormattedMessage = ReactIntl.FormattedMessage;
 
-var I18NStore = require('../../stores/I18NStore');
-
 var Message = React.createClass({
     propTypes: {
+        locale: React.PropTypes.string,
+        messages: React.PropTypes.object,
         msgId: React.PropTypes.string.isRequired,
         msgParams: React.PropTypes.object
     },
-    getInitialState() {
-        const currentLocale = I18NStore.getCurrentLocale();
-        const msg = I18NStore.getMsgById(this.props.msgId);
-        return {
-            locales: currentLocale,
-            msg: msg
-        };
-    },
-    // it makes this component reactive when a new language is loaded in
-    // language store.
-    componentDidMount() {
-        I18NStore.register(I18NStore.Event.LANG_CHANGED, this.onLangChanged);
-    },
-    componentWillUnmount() {
-        I18NStore.unregister(I18NStore.Event.LANG_CHANGED, this.onLangChanged);
-    },
-    // it updates the state of this component when the language store loads a new one.
-    onLangChanged() {
-        const currentLocale = I18NStore.getCurrentLocale();
-        const msg = I18NStore.getMsgById(this.props.msgId);
-        this.setState({
-            locales: currentLocale,
-            msg: msg
-        });
+    contextTypes: {
+        locale: React.PropTypes.string.isRequired,
+        messages: React.PropTypes.object
     },
     render() {
-        return <FormattedMessage locales={this.state.locales} message={this.state.msg} {...this.props.msgParams}/>;
+        var locale = this.props.locale || this.context.locale;
+        var messages = this.props.messages || this.context.messages;
+
+        return <FormattedMessage locales={locale} message={messages[this.props.msgId]} {...this.props.msgParams}/>;
     }
 });