From a543b71cc25fa209e4da05889546097aef0f4945 Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sun, 4 Sep 2016 18:38:36 +0300 Subject: [PATCH] Implemented dev tools --- src/App.jsx | 20 ++---- src/constants.js | 2 + src/devTools/DevApp.jsx | 94 ++++++++++++++++++++++++++++ src/devTools/List.jsx | 30 +++++++++ src/devTools/index.js | 3 + src/emails/activation/Activation.jsx | 7 +++ src/emails/activation/index.js | 3 + src/emails/register/fixtures.js | 9 +++ src/index.js | 16 ++--- 9 files changed, 160 insertions(+), 24 deletions(-) create mode 100644 src/constants.js create mode 100644 src/devTools/DevApp.jsx create mode 100644 src/devTools/List.jsx create mode 100644 src/devTools/index.js create mode 100644 src/emails/activation/Activation.jsx create mode 100644 src/emails/activation/index.js create mode 100644 src/emails/register/fixtures.js diff --git a/src/App.jsx b/src/App.jsx index 043b61b..a8f7711 100644 --- a/src/App.jsx +++ b/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']; -const DEFAULT_LANGUAGE = 'en'; +import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from './constants'; -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 ( - {debug - ? ( -
- Hello world - -
- ) : ( - - ) - } + ); } @@ -46,6 +35,5 @@ App.propTypes = { type: PropTypes.string.isRequired, payload: PropTypes.shape({ locale: PropTypes.string - }), - debug: PropTypes.bool + }) }; diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..d241e0a --- /dev/null +++ b/src/constants.js @@ -0,0 +1,2 @@ +export const SUPPORTED_LANGUAGES = ['ru', 'en', 'be', 'uk']; +export const DEFAULT_LANGUAGE = 'en'; diff --git a/src/devTools/DevApp.jsx b/src/devTools/DevApp.jsx new file mode 100644 index 0000000..2f63e64 --- /dev/null +++ b/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 ( +
+
+ [ + {isMinimized ? '+' : '-'} + ] + +
+ + + + + +
+
+ + +
+ ); + } + + 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 + }); + } +} diff --git a/src/devTools/List.jsx b/src/devTools/List.jsx new file mode 100644 index 0000000..89b417a --- /dev/null +++ b/src/devTools/List.jsx @@ -0,0 +1,30 @@ +import { PropTypes } from 'react'; + +export default function List({label, items, active, onChange}) { + return ( +
+ {label}: + {items.map((key) => + { + event.preventDefault(); + + onChange && onChange(key); + }} + style={{ + margin: '0 5px', + color: active === key ? 'red' : '' + }} + >{key} + )} +
+ ); +} + +List.propTypes = { + label: PropTypes.string.isRequired, + items: PropTypes.arrayOf(PropTypes.string).isRequired, + active: PropTypes.string, + onChange: PropTypes.func +}; diff --git a/src/devTools/index.js b/src/devTools/index.js new file mode 100644 index 0000000..605753e --- /dev/null +++ b/src/devTools/index.js @@ -0,0 +1,3 @@ +import DevApp from './DevApp'; + +export default DevApp; diff --git a/src/emails/activation/Activation.jsx b/src/emails/activation/Activation.jsx new file mode 100644 index 0000000..2f3a430 --- /dev/null +++ b/src/emails/activation/Activation.jsx @@ -0,0 +1,7 @@ +export default function Activation() { + return ( +
+ Activated! +
+ ); +} diff --git a/src/emails/activation/index.js b/src/emails/activation/index.js new file mode 100644 index 0000000..d7979d6 --- /dev/null +++ b/src/emails/activation/index.js @@ -0,0 +1,3 @@ +import Activation from './Activation'; + +export default Activation; diff --git a/src/emails/register/fixtures.js b/src/emails/register/fixtures.js new file mode 100644 index 0000000..ab99df6 --- /dev/null +++ b/src/emails/register/fixtures.js @@ -0,0 +1,9 @@ +export default { + default: { + username: 'ErickSkrauch' + }, + + SleepWalker: { + username: 'SleepWalker' + } +}; diff --git a/src/index.js b/src/index.js index 41cb848..5630bb0 100644 --- a/src/index.js +++ b/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() - }; -} else { ReactDOM.render( - , + , document.getElementById('app') ); } + +export default function(props) { + return ReactDOMServer.renderToStaticMarkup(); +}