/setupTests.js'],
21 | snapshotSerializers: ['enzyme-to-json/serializer']
22 | };
23 |
--------------------------------------------------------------------------------
/src/routes/StartCoding/controller/reducer.js:
--------------------------------------------------------------------------------
1 | import { COUNT_ADD } from '../constants';
2 |
3 | // ------------------------------------
4 | // Action Handlers
5 | // ------------------------------------
6 | const ACTION_HANDLERS = {
7 | [COUNT_ADD]: (state, action) => ({
8 | ...state,
9 | count: action.count,
10 | countDoubl: action.count % 2 === 0 ? action.count : state.countDoubl
11 | })
12 | };
13 |
14 | const initialState = {
15 | count: 5,
16 | countDoubl: 2
17 | };
18 |
19 | // ------------------------------------
20 | // Reducer
21 | // ------------------------------------
22 | const reducer = (state = initialState, action) => {
23 | const handler = ACTION_HANDLERS[action.type];
24 |
25 | return handler ? handler(state, action) : state;
26 | };
27 |
28 | export default reducer;
29 |
--------------------------------------------------------------------------------
/src/routes/index.js:
--------------------------------------------------------------------------------
1 | import React, { lazy } from 'react';
2 | import { injectReducer } from '../controller/middleware';
3 | import rootStore from '../controller/store';
4 |
5 | const HelloWorld = lazy(() => import(/* webpackChunkName: "HelloWorld" */ './HelloWorld'));
6 | const StartCoding = lazy(() => import(/* webpackChunkName: "StartCoding" */ './StartCoding'));
7 |
8 | const Components = {
9 | HelloWorld,
10 | StartCoding
11 | };
12 |
13 | const AsyncComponent = props => {
14 | const { componentName } = props;
15 |
16 | import(`./${componentName}/controller/reducer`).then(({ default: reducer }) => {
17 | injectReducer(rootStore, { key: componentName, reducer });
18 | });
19 |
20 | const Component = Components[componentName];
21 |
22 | return ;
23 | };
24 |
25 | export default AsyncComponent;
26 |
--------------------------------------------------------------------------------
/src/routes/HelloWorld/controller/reducer.js:
--------------------------------------------------------------------------------
1 | import { COUNT_ADD } from '../constants';
2 |
3 | // ------------------------------------
4 | // Action Handlers
5 | // ------------------------------------
6 | const ACTION_HANDLERS = {
7 | [COUNT_ADD]: (state, action) => ({
8 | ...state,
9 | count: action.count,
10 | countDoubl: action.count % 2 === 0 ? action.count : state.countDoubl
11 | })
12 | };
13 |
14 | const initialState = {
15 | count: 5,
16 | countDoubl: 2
17 | };
18 |
19 | // ------------------------------------
20 | // Reducer
21 | // ------------------------------------
22 | const reducer = (state = initialState, action) => {
23 | const handler = ACTION_HANDLERS[action.type];
24 |
25 | // console.log(state, action)
26 | return handler ? handler(state, action) : state;
27 | };
28 |
29 | export default reducer;
30 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 |
3 | # A special property that should be specified at the top of the file outside of
4 | # any sections. Set to true to stop .editor config file search on current file
5 | root = true
6 |
7 | [*]
8 | # Indentation style
9 | # Possible values - tab, space
10 | indent_style = space
11 |
12 | # Indentation size in single-spaced characters
13 | # Possible values - an integer, tab
14 | indent_size = 2
15 |
16 | # Line ending file format
17 | # Possible values - lf, crlf, cr
18 | end_of_line = lf
19 |
20 | # File character encoding
21 | # Possible values - latin1, utf-8, utf-16be, utf-16le
22 | charset = utf-8
23 |
24 | # Denotes whether to trim whitespace at the end of lines
25 | # Possible values - true, false
26 | trim_trailing_whitespace = true
27 |
28 | # Denotes whether file should end with a newline
29 | # Possible values - true, false
30 | insert_final_newline = true
31 |
--------------------------------------------------------------------------------
/src/controller/middleware/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import { connectRouter } from 'connected-react-router';
3 | import { createResponsiveStateReducer } from 'redux-responsive';
4 | import common from '../reducers';
5 | import history from '../history';
6 |
7 | const makeRootReducer = asyncReducers => {
8 | return combineReducers({
9 | ...asyncReducers,
10 | common,
11 | // routing
12 | router: connectRouter(history),
13 | browser: createResponsiveStateReducer({
14 | mobile: 600,
15 | tablet: 1000,
16 | desktop: 5000
17 | })
18 | });
19 | };
20 |
21 | export const injectReducer = (store, { key, reducer }) => {
22 | if (Object.hasOwnProperty.call(store.asyncReducers, key)) return;
23 | store.asyncReducers[key] = reducer;
24 |
25 | store.replaceReducer(makeRootReducer(store.asyncReducers));
26 | };
27 |
28 | export default makeRootReducer;
29 |
--------------------------------------------------------------------------------
/src/controller/store.js:
--------------------------------------------------------------------------------
1 | import { applyMiddleware, compose, createStore } from 'redux';
2 | import { routerMiddleware } from 'connected-react-router';
3 |
4 | import { logger } from './middleware';
5 | import makeRootReducer from './middleware/rootReducer';
6 | import initialState from './initialState';
7 | import history from './history';
8 |
9 | const rootStore = () => {
10 | const middleware = [routerMiddleware(history), logger];
11 | const enhancers = [];
12 |
13 | if (__DEV__ && window.__REDUX_DEVTOOLS_EXTENSION__) {
14 | enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__());
15 | }
16 |
17 | // ======================================================
18 | // Store Instantiation and HMR Setup
19 | // ======================================================
20 | const store = createStore(
21 | makeRootReducer(),
22 | initialState,
23 | compose(
24 | applyMiddleware(...middleware),
25 | ...enhancers
26 | )
27 | );
28 |
29 | store.asyncReducers = {};
30 |
31 | return store;
32 | };
33 |
34 | export default rootStore();
35 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 sviatoslav
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
1 | interface Window {
2 | __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
3 | __REDUX_DEVTOOLS_EXTENSION__: any;
4 | }
5 |
6 | declare const __DEV__: string;
7 | declare const __PROD__: string;
8 | declare const __TEST__: string;
9 |
10 | declare module '*.json' {
11 | interface IClassNames {
12 | [className: string]: string
13 | }
14 | const classNames: IClassNames;
15 | export = classNames;
16 | }
17 |
18 | declare module '*.css' {
19 | interface IClassNames {
20 | [className: string]: string
21 | }
22 | const classNames: IClassNames;
23 | export = classNames;
24 | }
25 |
26 | declare module '*.scss' {
27 | interface IClassNames {
28 | [className: string]: string
29 | }
30 | const classNames: IClassNames;
31 | export = classNames;
32 | }
33 |
34 | declare module '*.cssmodule.scss' {
35 | interface IClassNames {
36 | [className: string]: string
37 | }
38 | const classNames: IClassNames;
39 | export = classNames;
40 | }
41 |
42 | declare module '*.svg' {
43 | interface IClassNames {
44 | [className: string]: string
45 | }
46 | const classNames: IClassNames;
47 | export = classNames;
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/Body.js:
--------------------------------------------------------------------------------
1 | import { PropTypes } from 'prop-types';
2 | import React, { Fragment, PureComponent } from 'react';
3 |
4 | class Body extends PureComponent {
5 | _handleClick = () => {
6 | const { onclick } = this.props;
7 |
8 | onclick();
9 | }
10 |
11 | render() {
12 | const { buttonClass, descriptionClass, title, description, count } = this.props;
13 |
14 | return (
15 |
16 |
20 | {description}
21 |
22 | );
23 | }
24 | }
25 |
26 | Body.propTypes = {
27 | buttonClass: PropTypes.string,
28 | descriptionClass: PropTypes.string,
29 | onclick: PropTypes.func,
30 | title: PropTypes.string,
31 | description: PropTypes.string,
32 | count: PropTypes.number
33 | };
34 |
35 | Body.defaultProps = {
36 | buttonClass: '',
37 | descriptionClass: '',
38 | onclick: () => {},
39 | title: '',
40 | description: '',
41 | count: 0
42 | };
43 |
44 | export default Body;
45 |
--------------------------------------------------------------------------------
/src/layout/index.js:
--------------------------------------------------------------------------------
1 | import { PropTypes } from 'prop-types';
2 | import React, { Component } from 'react';
3 | import { connect } from 'react-redux';
4 | import { withRouter } from 'react-router-dom';
5 | import { Header, Footer } from '../components';
6 | import styles from '../styles/index.scss';
7 |
8 | class AppLayout extends Component {
9 | render() {
10 | const { countDoubl, children } = this.props;
11 | console.log(this.props.state.router)
12 |
13 | return (
14 |
15 |
16 | {children}
17 |
18 |
19 | );
20 | }
21 | }
22 |
23 | AppLayout.propTypes = {
24 | children: PropTypes.node.isRequired,
25 | count: PropTypes.number,
26 | countDoubl: PropTypes.number,
27 | startAddCount: PropTypes.func
28 | };
29 |
30 | AppLayout.defaultProps = {
31 | count: 0,
32 | countDoubl: 0,
33 | startAddCount: () => {}
34 | };
35 |
36 | const mapStateToProps = state => ({
37 | state,
38 | count: state.count,
39 | countDoubl: state.countDoubl
40 | });
41 |
42 | export default withRouter(
43 | connect(
44 | mapStateToProps,
45 | null
46 | )(AppLayout)
47 | );
48 |
--------------------------------------------------------------------------------
/src/container/index.js:
--------------------------------------------------------------------------------
1 | import { PropTypes } from 'prop-types';
2 | import React, { Suspense } from 'react';
3 | import { Provider } from 'react-redux';
4 | import { HashRouter, Switch, Route } from 'react-router-dom';
5 | import { ConnectedRouter } from 'connected-react-router';
6 |
7 | import AppLayout from '../layout';
8 | import AsyncComponent from '../routes';
9 | import { LoadingPlaceholder } from '../components';
10 |
11 | const AppContainer = ({ store, history }) => {
12 | return (
13 |
14 |
15 |
16 |
17 | }>
18 |
19 | } />
20 | } />
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 | };
29 |
30 | AppContainer.propTypes = {
31 | store: PropTypes.object.isRequired,
32 | history: PropTypes.object.isRequired
33 | };
34 |
35 | export default AppContainer;
36 |
--------------------------------------------------------------------------------
/server/compiler.js:
--------------------------------------------------------------------------------
1 | // import global vars for a whole app
2 | require('../globals');
3 |
4 | const debug = require('debug')('app:build:webpack-compiler');
5 | const webpack = require('webpack');
6 | const webpackConfig = require('../webpack.config.js');
7 |
8 | // -----------------------------
9 | // STARTING APP COMPILATION PROCESS
10 | // -----------------------------
11 | function webpackCompiler() {
12 | return new Promise((resolve, reject) => {
13 | const compiler = webpack(webpackConfig);
14 |
15 | compiler.run((err, stats) => {
16 | if (err) {
17 | debug('Webpack compiler encountered a fatal error.', err);
18 |
19 | return reject(err);
20 | }
21 |
22 | const jsonStats = stats.toJson();
23 |
24 | debug('Webpack compilation is completed.');
25 |
26 | resolve(jsonStats);
27 | });
28 | });
29 | }
30 |
31 | // -----------------------------
32 | // READING WEBPACK CONFIGURATION
33 | // -----------------------------
34 | const compile = () => {
35 | debug('Starting compiler.');
36 |
37 | return Promise.resolve()
38 | .then(() => webpackCompiler(webpackConfig))
39 | .then(() => {
40 | debug('Compilation completed successfully.');
41 | })
42 | .catch(err => {
43 | debug('Compiler encountered an error.', err);
44 |
45 | process.exit(1);
46 | });
47 | };
48 |
49 | compile();
50 |
--------------------------------------------------------------------------------
/src/routes/HelloWorld/index.js:
--------------------------------------------------------------------------------
1 | import { PropTypes } from 'prop-types';
2 | import React, { PureComponent } from 'react';
3 | import { connect } from 'react-redux';
4 | import { addCount } from './controller/action';
5 | import { Body } from '../../components';
6 | import styles from '../../styles/index.scss';
7 |
8 | class HelloWorld extends PureComponent {
9 | _addCount = () => {
10 | const { count, startAddCount } = this.props;
11 |
12 | startAddCount(count + 1);
13 | }
14 |
15 | render() {
16 | const { countDoubl } = this.props;
17 |
18 | return (
19 |
27 | );
28 | }
29 | }
30 |
31 | HelloWorld.propTypes = {
32 | count: PropTypes.number,
33 | countDoubl: PropTypes.number,
34 | startAddCount: PropTypes.func
35 | };
36 |
37 | HelloWorld.defaultProps = {
38 | count: 0,
39 | countDoubl: 0,
40 | startAddCount: () => {}
41 | };
42 |
43 | const mapStateToProps = state => ({
44 | count: state.HelloWorld.count,
45 | countDoubl: state.HelloWorld.countDoubl
46 | });
47 |
48 | const mapDispatchToProps = dispatch => ({
49 | startAddCount: value => dispatch(addCount(value))
50 | });
51 |
52 | export default connect(
53 | mapStateToProps,
54 | mapDispatchToProps
55 | )(HelloWorld);
56 |
--------------------------------------------------------------------------------
/src/routes/StartCoding/index.js:
--------------------------------------------------------------------------------
1 | import { PropTypes } from 'prop-types';
2 | import React, { PureComponent } from 'react';
3 | import { connect } from 'react-redux';
4 | import { addCount } from './controller/action';
5 | import { Body } from '../../components';
6 | import styles from '../../styles/index.scss';
7 |
8 | class StartCoding extends PureComponent {
9 | _addCount = () => {
10 | const { count, startAddCount } = this.props;
11 |
12 | startAddCount(count + 1);
13 | }
14 |
15 | render() {
16 | const { countDoubl } = this.props;
17 |
18 | return (
19 |