Implemented dev tools

src/App.jsx

@@ -7,16 +7,14 @@ import ruLocaleData from 'react-intl/locale-data/ru';
 import beLocaleData from 'react-intl/locale-data/be';
 import ukLocaleData from 'react-intl/locale-data/uk';
 
-// till we have not so many locales, we can require their data at once
 addLocaleData(enLocaleData);
 addLocaleData(ruLocaleData);
 addLocaleData(beLocaleData);
 addLocaleData(ukLocaleData);
 
-const SUPPORTED_LANGUAGES = ['ru', 'en', 'be', 'uk'];
+import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from './constants';
-const DEFAULT_LANGUAGE = 'en';
 
-export default function App({type, payload = {}, debug = false}) {
+export default function App({type, payload = {}}) {
     let {locale} = payload;
 
     if (!locale || SUPPORTED_LANGUAGES.indexOf(locale) === -1) {
@@ -28,16 +26,7 @@ export default function App({type, payload = {}, debug = false}) {
 
     return (
         <IntlProvider locale={locale} messages={messages}>
-            {debug
-                ? (
-                    <div>
-                        Hello world
             <Email {...payload} />
-                    </div>
-                ) : (
-                    <Email {...payload} />
-                )
-            }
         </IntlProvider>
     );
 }
@@ -46,6 +35,5 @@ App.propTypes = {
     type: PropTypes.string.isRequired,
     payload: PropTypes.shape({
         locale: PropTypes.string
-    }),
+    })
-    debug: PropTypes.bool
 };

src/constants.js

@@ -0,0 +1,2 @@
+export const SUPPORTED_LANGUAGES = ['ru', 'en', 'be', 'uk'];
+export const DEFAULT_LANGUAGE = 'en';

src/devTools/DevApp.jsx

@@ -0,0 +1,94 @@
+import { Component } from 'react';
+
+import App from 'App';
+
+import List from './List';
+
+import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from 'constants';
+
+const EVAILABLE_EMAILS = require.context('emails', true, /index\.js$/).keys().map((path) => path.split('/')[1]);
+
+export default class DevApp extends Component {
+    state = {
+        locale: DEFAULT_LANGUAGE,
+        type: EVAILABLE_EMAILS[0],
+        fixture: 'default',
+        isMinimized: false
+    };
+
+    componentWillMount() {
+        try {
+            const lastState = JSON.parse(localStorage.getItem('emailRendererState'));
+            this.setState(lastState);
+        } catch (err) {/* no state was saved */}
+    }
+
+    componentWillUpdate(nextProps, nextState) {
+        localStorage.setItem('emailRendererState', JSON.stringify(nextState));
+    }
+
+    render() {
+        const {locale, type, isMinimized} = this.state;
+        let {fixture} = this.state;
+
+        let fixturesAvailable = {};
+        try {
+            fixturesAvailable = require(`emails/${type}/fixtures`).default;
+        } catch (err) {/* no fixtures available */}
+
+        if (!fixturesAvailable[fixture]) {
+            fixture = 'default';
+        }
+
+        const payload = {
+            locale,
+            ...(fixturesAvailable[fixture] || {})
+        };
+
+        return (
+            <div>
+                <div style={isMinimized ? {
+                    opacity: 0.4,
+                    position: 'fixed'
+                } : {}}>
+                    [<a href="#" style={{textDecoration: 'none', padding: '6px'}} onClick={this.onMinimizeToggle}>
+                        {isMinimized ? '+' : '-'}
+                    </a>]
+
+                    <div style={isMinimized ? {display: 'none'} : {}}>
+                        <List label="Lang"
+                            items={SUPPORTED_LANGUAGES}
+                            active={locale}
+                            onChange={this.onLocaleChange}
+                        />
+
+                        <List label="Email"
+                            items={EVAILABLE_EMAILS}
+                            active={type}
+                            onChange={this.onTypeChange}
+                        />
+
+                        <List label="Fixtures"
+                            items={Object.keys(fixturesAvailable)}
+                            active={fixture}
+                            onChange={this.onFixtureChange}
+                        />
+                    </div>
+                </div>
+
+                <App type={type} payload={payload} />
+            </div>
+        );
+    }
+
+    onLocaleChange = (locale) => this.setState({locale});
+    onTypeChange = (type) => this.setState({type});
+    onFixtureChange = (fixture) => this.setState({fixture});
+    onMinimizeToggle = (event) => {
+        event.preventDefault();
+
+        this.setState({
+            isMinimized: !this.state.isMinimized
+        });
+    }
+}

src/devTools/List.jsx

@@ -0,0 +1,30 @@
+import { PropTypes } from 'react';
+
+export default function List({label, items, active, onChange}) {
+    return (
+        <div>
+            {label}:
+            {items.map((key) =>
+                <a href="#"
+                    key={key}
+                    onClick={(event) => {
+                        event.preventDefault();
+
+                        onChange && onChange(key);
+                    }}
+                    style={{
+                        margin: '0 5px',
+                        color: active === key ? 'red' : ''
+                    }}
+                >{key}</a>
+            )}
+        </div>
+    );
+}
+
+List.propTypes = {
+    label: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(PropTypes.string).isRequired,
+    active: PropTypes.string,
+    onChange: PropTypes.func
+};

src/devTools/index.js

@@ -0,0 +1,3 @@
+import DevApp from './DevApp';
+
+export default DevApp;

src/emails/activation/Activation.jsx

@@ -0,0 +1,7 @@
+export default function Activation() {
+    return (
+        <div>
+            Activated!
+        </div>
+    );
+}

src/emails/activation/index.js

@@ -0,0 +1,3 @@
+import Activation from './Activation';
+
+export default Activation;

src/emails/register/fixtures.js

@@ -0,0 +1,9 @@
+export default {
+    default: {
+        username: 'ErickSkrauch'
+    },
+
+    SleepWalker: {
+        username: 'SleepWalker'
+    }
+};

src/index.js

@@ -5,16 +5,16 @@ import ReactDOMServer from 'react-dom/server';
 
 import App from 'App';
 
-const isCli = typeof window === 'undefined';
+/* global process: false */
+if (process.env.NODE_ENV !== 'production') {
+    const DevApp = require('devTools').default;
 
-if (isCli) {
-    module.exports = {
-        default: (props) =>
-            ReactDOMServer.renderToStaticMarkup(<App {...props} />)
-    };
-} else {
     ReactDOM.render(
-        <App type="register" payload={{locale: 'ru'}} debug />,
+        <DevApp />,
         document.getElementById('app')
     );
 }
+
+export default function(props) {
+    return ReactDOMServer.renderToStaticMarkup(<App {...props} />);
+}