first commit

Author: vinsproduction

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true,
+        "es6": true,
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "plugins": [
+        "react"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "rules": {
+        "no-console": 0,
+        "no-unused-vars": 0,
+        "indent": 0,
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

.gitignore

@@ -0,0 +1 @@
+node_modules

app/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+
+import store from './store/store';
+import Layout from './main/layout/Layout';
+
+render(
+	<Provider store={store}>
+		<BrowserRouter>
+			<Layout />
+		</BrowserRouter>
+	</Provider>
+	,document.getElementById('app')
+);

app/index.pug

@@ -0,0 +1 @@
+#app

app/main/footer/Footer.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class Footer extends React.Component {
+	render() {
+		return (
+			<footer>
+				<h3>Footer</h3>
+			</footer>
+		);
+	}
+}
+
+export default Footer;

app/main/header/Header.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+class Header extends React.Component {
+	
+	render() {
+
+		const { a, b } = this.props;
+
+		return (
+			<header>
+				<h3>Header A:{a} B:{b}</h3>
+				<nav>
+					<ul>
+						<li><Link to='/'>Home</Link></li>
+						<li><Link to='/about'>About</Link></li>
+					</ul>
+				</nav>
+			</header>
+		);
+	}
+}
+
+Header.propTypes = {
+	a: PropTypes.number,
+	b: PropTypes.number
+};
+
+const putStateToProps = (state) => {
+	return {
+		a: state.test.a,
+		b: state.rest.b
+	};
+};
+
+const putActionsToProps = (dispatch) => {
+	return {};
+};
+
+export default connect(putStateToProps, putActionsToProps)(Header);

app/main/layout/Layout.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Header from 'app/main/header/Header';
+import Footer from 'app/main/footer/Footer';
+import Pages from 'app/pages/Pages';
+
+
+class Layout extends React.Component {
+	render() {
+		return (
+			<React.Fragment>
+				<Header />
+				<Pages />
+				<Footer />
+			</React.Fragment>
+		);
+	}
+}
+
+export default Layout;

app/pages/AsyncComponent.jsx

@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+export default class AsyncComponent extends PureComponent {
+	
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			Component: null
+		};
+	}
+
+	unCamelCase(s) {
+		return s.split(/(?=[A-Z])/).join('-').toLowerCase();
+	}
+
+	componentWillMount() {
+		if (!this.state.Component) {
+			this.props.moduleProvider().then(( component ) => {
+				document.body.setAttribute('page', this.unCamelCase(component.default.name));
+				this.setState({ component: component.default });
+			});
+		}
+	}
+
+	componentWillUnmount() {
+		document.body.removeAttribute('page');
+	}
+
+	render() {
+		const Component = this.state.component;
+		return (
+			<React.Fragment>
+				{/* {Component ? <Component {...this.props} /> : null} */}
+				{Component ? <Component /> : null}
+			</React.Fragment>
+		);
+	}
+}
+
+AsyncComponent.propTypes = {
+	moduleProvider: PropTypes.func
+};

app/pages/Pages.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import AsyncComponent from './AsyncComponent';
+
+const Home = () => import('./home/Home');
+const About = () => import('./about/About');
+
+class Pages extends React.Component {
+	render() {
+		return (
+			<main>
+				<Switch>
+					<Route exact path='/' component={() => <AsyncComponent moduleProvider={Home} />} />
+					<Route path='/about' component={() => <AsyncComponent moduleProvider={About} />} />
+				</Switch>
+			</main>
+		);
+	}
+}
+
+export default Pages;

app/pages/about/About.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+
+class About extends React.Component {
+	render() {
+
+		const { a, b } = this.props;
+
+		return (
+			<h1>About A:{a} B:{b}</h1>
+		);
+	}
+}
+
+About.propTypes = {
+	a: PropTypes.number,
+	b: PropTypes.number
+};
+
+const putStateToProps = (state) => {
+	return {
+		a: state.test.a,
+		b: state.rest.b
+	};
+};
+
+const putActionsToProps = (dispatch) => {
+	return {
+	};
+};
+
+export default connect(putStateToProps, putActionsToProps)(About);

app/pages/about/about.styl

@@ -0,0 +1,2 @@
+[page*="about"]
+	// background: #CCC

app/pages/home/Home.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { changeA } from 'store/actions/test';
+import { changeB } from 'store/actions/rest';
+
+class Home extends React.Component {
+	
+	constructor(props) {
+		super(props);
+	}
+
+	clickA(i,e) {
+		e.preventDefault();
+		const { changeA } = this.props;
+		changeA(i);
+	}
+
+	clickB(i, e) {
+		e.preventDefault();
+		const { changeB } = this.props;
+		changeB(i);
+	}
+	
+
+	render() {
+
+		const { a, b } = this.props;
+
+		return (
+			<React.Fragment>
+				<h1>Home A:{a} B:{b}</h1>
+				<p><a href="" onClick={(e) => this.clickA(1,e) }>Change A to 1</a></p>
+				<p><a href="" onClick={(e) => this.clickA(2, e)}>Change A to 2</a></p>
+				<p><a href="" onClick={(e) => this.clickB(1, e)}>Change B to 1</a></p>
+				<p><a href="" onClick={(e) => this.clickB(2, e)}>Change B to 2</a></p>
+			</React.Fragment>
+		);
+	}
+}
+
+Home.propTypes = {
+	a: PropTypes.number,
+	b: PropTypes.number,
+	changeA: PropTypes.func,
+	changeB: PropTypes.func,
+};
+
+const putStateToProps = (state) => {
+	return {
+		a: state.test.a,
+		b: state.rest.b
+	};
+};
+
+const putActionsToProps = (dispatch) => {
+	return {
+		changeA: bindActionCreators(changeA, dispatch),
+		changeB: bindActionCreators(changeB, dispatch)
+	};
+};
+
+export default connect(putStateToProps, putActionsToProps)(Home);

app/pages/home/home.styl

@@ -0,0 +1,2 @@
+[page*="home"]
+	// background: red

app/store/actions/rest.js

@@ -0,0 +1,10 @@
+
+import { B } from '../constants/actionTypes';
+
+export const changeB = (newTest) => {
+
+	return {
+		type: B,
+		payload: newTest
+	};
+};

app/store/actions/test.js

@@ -0,0 +1,10 @@
+
+import { A } from '../constants/actionTypes';
+
+
+export const changeA = (newTest) => {
+	return {
+		type: A,
+		payload: newTest
+	};
+};

app/store/constants/actionTypes.js

@@ -0,0 +1,3 @@
+
+export const A = 'A';
+export const B = 'B';

app/store/reducers/rest.js

@@ -0,0 +1,35 @@
+
+
+const initialState = {
+	b: 1
+};
+
+const rest = (state = initialState, action) => {
+	
+	const TYPE = action.type || '';
+	const PAYLOAD = action.payload || null;
+	
+	const log = false;
+	let newState;
+
+	if (log){
+		console.log(`[old state] TYPE: ${TYPE} | PAYLOAD:`, PAYLOAD, '| STATE', state);
+	}
+
+	switch (TYPE) {
+		case 'B':
+			newState = { ...state, b: PAYLOAD };
+			break;
+		default:
+			newState = state;
+			break;
+	}
+
+	if (log) {
+		console.log(`[new state] TYPE: ${TYPE} | PAYLOAD:`, PAYLOAD, '| STATE', newState);
+	}
+
+	return newState;
+};
+
+export default rest;