diff --git a/.eslintrc b/.eslintrc index 4e40d3813c59d..6ecc7c48c5e5e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -62,6 +62,12 @@ "exports": "always-multiline", "functions": "ignore" } + ], + "react/prop-types": [ + "error", + { + "ignore": ["children"] + } ] } } diff --git a/examples/redux/README.md b/examples/redux/README.md new file mode 100644 index 0000000000000..afbb6291b9a64 --- /dev/null +++ b/examples/redux/README.md @@ -0,0 +1,5 @@ +# Redux + +https://redux.gatsbyjs.org + +Gatsby example site that shows use of redux. diff --git a/examples/redux/gatsby-browser.js b/examples/redux/gatsby-browser.js new file mode 100644 index 0000000000000..34d5816c955a7 --- /dev/null +++ b/examples/redux/gatsby-browser.js @@ -0,0 +1,17 @@ +import React from 'react' +import { BrowserRouter as Router } from 'react-router-dom' +import { Provider } from 'react-redux' + +import createStore from './src/state/createStore' + +exports.replaceRouterComponent = ({ history }) => { + const store = createStore() + + const ConnectedRouterWrapper = ({ children }) => ( + + {children} + + ) + + return ConnectedRouterWrapper +} diff --git a/examples/redux/gatsby-config.js b/examples/redux/gatsby-config.js new file mode 100644 index 0000000000000..db95be0680182 --- /dev/null +++ b/examples/redux/gatsby-config.js @@ -0,0 +1,5 @@ +module.exports = { + siteMetadata: { + title: `Gatsby Redux`, + }, +} diff --git a/examples/redux/gatsby-ssr.js b/examples/redux/gatsby-ssr.js new file mode 100644 index 0000000000000..a5359e93d162b --- /dev/null +++ b/examples/redux/gatsby-ssr.js @@ -0,0 +1,20 @@ +import React from 'react' +import { renderToString } from 'react-dom/server' +import { Provider } from 'react-redux' + +import createStore from './src/state/createStore' + +exports.replaceServerBodyRender = ({ component: body }) => { + + const store = createStore() + + const ConnectedBody = () => ( + + {body} + + ) + + return { + body: renderToString(), + } +} diff --git a/examples/redux/package.json b/examples/redux/package.json new file mode 100644 index 0000000000000..c74f11b29798b --- /dev/null +++ b/examples/redux/package.json @@ -0,0 +1,25 @@ +{ + "name": "gatsby-example-redux", + "private": true, + "description": "Gatsby example site that shows use of redux.", + "version": "1.0.0", + "author": "Scotty Eckenthal ", + "dependencies": { + "gatsby": "1.0.0-alpha15-alpha.330d917d", + "gatsby-link": "1.0.0-alpha15-alpha.330d917d", + "lodash": "^4.16.4", + "react-redux": "5.0.5", + "react-router-redux": "4.0.8", + "redux": "3.6.0", + "slash": "^1.0.0" + }, + "keywords": [ + "gatsby" + ], + "license": "MIT", + "main": "n/a", + "scripts": { + "develop": "gatsby develop", + "build": "gatsby build" + } +} diff --git a/examples/redux/src/html.js b/examples/redux/src/html.js new file mode 100644 index 0000000000000..d6bf7a400c1c0 --- /dev/null +++ b/examples/redux/src/html.js @@ -0,0 +1,33 @@ +import React from "react" + +module.exports = React.createClass({ + render() { + return ( + + + {this.props.headComponents} + + + + + + + Gatsby - Redux + + +
+ {this.props.postBodyComponents} + + + ) + }, +}) diff --git a/examples/redux/src/layouts/index.js b/examples/redux/src/layouts/index.js new file mode 100644 index 0000000000000..a45ae17a84711 --- /dev/null +++ b/examples/redux/src/layouts/index.js @@ -0,0 +1,49 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Link from 'gatsby-link' +import { connect } from 'react-redux' + +const Counter = ({ count, increment }) => ( +
+

Count: {count}

+ +
+) + +Counter.propTypes = { + count: PropTypes.number.isRequired, + increment: PropTypes.func.isRequired, +} + +const mapStateToProps = ({ count }) => { + return { count } +} + +const mapDispatchToProps = (dispatch) => { + return { increment: () => dispatch({ type: `INCREMENT` }) } +} + +const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter) + +class DefaultLayout extends React.Component { + render() { + return ( +
+ +

+ Redux example +

+ + +
    +
  • a
    • +
  • b
    • +
  • c
    • +
+ {this.props.children()} +
+ ) + } +} + +export default DefaultLayout diff --git a/examples/redux/src/pages/a.js b/examples/redux/src/pages/a.js new file mode 100644 index 0000000000000..bafb75f9991ac --- /dev/null +++ b/examples/redux/src/pages/a.js @@ -0,0 +1,5 @@ +import React from "react" + +const A = () =>

A

+ +export default A diff --git a/examples/redux/src/pages/b.js b/examples/redux/src/pages/b.js new file mode 100644 index 0000000000000..6b15e3bd526e5 --- /dev/null +++ b/examples/redux/src/pages/b.js @@ -0,0 +1,5 @@ +import React from "react" + +const B = () =>

B

+ +export default B diff --git a/examples/redux/src/pages/c.js b/examples/redux/src/pages/c.js new file mode 100644 index 0000000000000..7e39f24fd0915 --- /dev/null +++ b/examples/redux/src/pages/c.js @@ -0,0 +1,5 @@ +import React from "react" + +const C = () =>

C

+ +export default C diff --git a/examples/redux/src/pages/index.js b/examples/redux/src/pages/index.js new file mode 100644 index 0000000000000..1a61860fb9334 --- /dev/null +++ b/examples/redux/src/pages/index.js @@ -0,0 +1,5 @@ +import React from "react" + +const Home = () =>

Home

+ +export default Home diff --git a/examples/redux/src/state/createStore.js b/examples/redux/src/state/createStore.js new file mode 100644 index 0000000000000..88b506d8892c1 --- /dev/null +++ b/examples/redux/src/state/createStore.js @@ -0,0 +1,15 @@ +import { createStore as reduxCreateStore } from 'redux' + +const reducer = (state, action) => { + if (action.type === `INCREMENT`) { + return Object.assign({}, state, { + count: state.count + 1, + }) + } + return state +} + +const initialState = { count: 0 } + +const createStore = () => reduxCreateStore(reducer, initialState) +export default createStore