├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── LICENSE ├── Procfile ├── README.md ├── docs └── Introduction.md ├── fakeAPI.js ├── index.html ├── package.json ├── server.js ├── src ├── images │ └── GitHub-Mark-Light-120px-plus.png ├── javascript │ ├── Root.js │ ├── components │ │ ├── Footer.js │ │ └── Header.js │ ├── config │ │ └── urls.js │ ├── containers │ │ ├── AppBar.js │ │ └── DevTools.js │ ├── decorators │ │ └── withMaterialUI.js │ ├── hooks.js │ ├── index.js │ ├── redux │ │ ├── index.js │ │ ├── middleware │ │ │ ├── clientMiddleware.js │ │ │ ├── index.js │ │ │ ├── logger.js │ │ │ └── request.js │ │ └── modules │ │ │ ├── auth.js │ │ │ ├── blogposts.js │ │ │ ├── draft.js │ │ │ ├── reducer.js │ │ │ ├── users.js │ │ │ └── utils │ │ │ └── fetch.js │ └── views │ │ ├── Blog │ │ ├── Post.js │ │ └── index.js │ │ ├── Draft │ │ └── index.js │ │ └── Login │ │ └── index.js └── styles │ └── main.less ├── test ├── fixture │ └── data.js └── index.spec.js ├── webpack.config.js └── webpack.config.production.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 0 3 | } 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb", 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "mocha": true, 7 | "node": true 8 | }, 9 | "rules": { 10 | "eol-last": 2, 11 | "max-len": [2, 100, 4], 12 | "no-underscore-dangle": [0], 13 | "comma-dangle": [2, "never"], 14 | "no-var": 2, 15 | "react/display-name": 0, 16 | "react/jsx-boolean-value": 2, 17 | "react/jsx-quotes": "prefer-single", 18 | "react/jsx-no-undef": 2, 19 | "react/jsx-sort-props": 0, 20 | "react/jsx-uses-react": 2, 21 | "react/jsx-uses-vars": 2, 22 | "react/no-did-mount-set-state": 2, 23 | "react/no-did-update-set-state": 2, 24 | "react/no-multi-comp": 0, 25 | "react/no-unknown-property": 2, 26 | "react/prop-types": 2, 27 | "react/react-in-jsx-scope": 2, 28 | "react/self-closing-comp": 2, 29 | "react/wrap-multilines": 2, 30 | "space-before-function-paren": [2, { 31 | "anonymous": "always", 32 | "named": "never" 33 | }], 34 | "strict": [2, "global"], 35 | "react/react-in-jsx-scope": 2, 36 | 37 | //Temporarirly disabled due to a possible bug in babel-eslint (todomvc example) 38 | "block-scoped-var": 0, 39 | // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved 40 | "padded-blocks": 0 41 | }, 42 | "plugins": [ 43 | "react" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | dist 5 | static 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "iojs" 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. 4 | 5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. 6 | 7 | Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. 8 | 9 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. 10 | 11 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. 12 | 13 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Mateusz Zatorski 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. 22 | 23 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: npm run deploy 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Redux and React Router Example App 2 | === 3 | [![Build Status](https://travis-ci.org/knowbody/redux-react-router-example-app.svg)](https://travis-ci.org/knowbody/redux-react-router-example-app) 4 | 5 | **This project is a work in progress.** 6 | 7 | ![](http://g.recordit.co/8bMQFmKinz.gif) 8 | 9 | ### Why 10 | This project was started, because I found myself and many developers would like to get 11 | an insight on how Redux and React Router can be used in the bigger projects than a TODO app. 12 | 13 | Feel free to contribute to make it a great start point for others. 14 | 15 | #### Redux 16 | The redux structure follows the [ducks modular redux proposal](https://github.com/erikras/ducks-modular-redux) 17 | 18 | ### About 19 | Example blog app built with React, Redux and React Router. 20 | 21 | ### Get started 22 | 1. `npm install && npm start` 23 | 24 | ### License 25 | MIT ([http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php)) 26 | -------------------------------------------------------------------------------- /docs/Introduction.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | **Why?** This project was started, because I found myself and many developers would like to get 4 | an insight on how Redux and React Router can be used in the bigger projects than a TODO app. 5 | 6 | I also wanted to give a chance to people who want start contributing to open source. 7 | 8 | ### The Goal 9 | The goal is to build a "fully featured" blog-like application. At the moment the project 10 | is in the very early stage and I know that is still missing a lot of things. 11 | 12 | Please feel free to contribute to the project by sending an issue or a PR, 13 | so the others can benefit from this project. 14 | 15 | ### There is more 16 | I plan to document the things we build here so it will be easy for the beginners to understand 17 | how to start. 18 | -------------------------------------------------------------------------------- /fakeAPI.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | var jsonServer = require('json-server'); 4 | var data = require('./test/fixture/data'); 5 | 6 | var server = jsonServer.create(); 7 | var router = jsonServer.router(data); 8 | 9 | server.use(jsonServer.defaults()); 10 | server.use(router); 11 | 12 | server.listen(3010, 'localhost', function (err) { 13 | if (err) { 14 | console.log(err); 15 | } 16 | 17 | console.log('Fake API listening at localhost:3010'); 18 | }); 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | React Redux Boilerplate 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-blogapp", 3 | "version": "0.0.1", 4 | "description": "Redux and React Router Blogapp example", 5 | "author": "Mateusz Zatorski (https://github.com/knowbody)", 6 | "main": "server.js", 7 | "scripts": { 8 | "start": "node server.js", 9 | "lint": "`npm bin`/eslint src/javascript", 10 | "deploy": "export NODE_ENV=production && `npm bin`/webpack --config webpack.config.production.js && npm start", 11 | "test": "NODE_ENV=test mocha --compilers js:babel/register --recursive", 12 | "test:watch": "NODE_ENV=test mocha --compilers js:babel/register --recursive --watch", 13 | "test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive" 14 | }, 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/knowbody/redux-react-router-example-app/issues" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/knowbody/redux-react-router-example-app.git" 22 | }, 23 | "homepage": "https://github.com/knowbody/redux-react-router-example-app", 24 | "dependencies": { 25 | "classnames": "^2.2.0", 26 | "express": "^4.13.3", 27 | "history": "^1.13.1", 28 | "material-ui": "^0.13.0", 29 | "normalize.css": "^3.0.3", 30 | "react": "^0.14.3", 31 | "react-dom": "^0.14.3", 32 | "react-redux": "^4.0.0", 33 | "react-router": "^1.0.0", 34 | "react-tap-event-plugin": "^0.2.1", 35 | "redux": "^3.0.4", 36 | "redux-form": "^3.0.0-beta-2", 37 | "redux-thunk": "^1.0.0" 38 | }, 39 | "devDependencies": { 40 | "babel": "^5.8.29", 41 | "babel-core": "^5.8.30", 42 | "babel-eslint": "^4.1.3", 43 | "babel-loader": "^5.3.2", 44 | "babel-plugin-react-transform": "^1.1.1", 45 | "casual": "^1.4.7", 46 | "css-loader": "^0.15.6", 47 | "eslint": "^1.7.3", 48 | "eslint-config-airbnb": "0.1.0", 49 | "eslint-plugin-react": "^3.6.3", 50 | "expect": "^1.12.2", 51 | "file-loader": "^0.8.4", 52 | "isparta": "^3.1.0", 53 | "json-server": "^0.8.2", 54 | "less": "^2.5.3", 55 | "less-loader": "^2.2.1", 56 | "mocha": "^2.3.3", 57 | "node-libs-browser": "^0.5.3", 58 | "raw-loader": "^0.5.1", 59 | "react-transform-catch-errors": "^1.0.0", 60 | "react-transform-hmr": "^1.0.1", 61 | "redbox-react": "1.2.6", 62 | "redux-devtools": "^3.0.1", 63 | "redux-devtools-dock-monitor": "^1.0.1", 64 | "redux-devtools-log-monitor": "^1.0.2", 65 | "style-loader": "^0.13.0", 66 | "todomvc-app-css": "^2.0.1", 67 | "url-loader": "^0.5.6", 68 | "webpack": "^1.12.2", 69 | "webpack-dev-middleware": "^1.2.0", 70 | "webpack-hot-middleware": "^2.4.1" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var isDev = (process.env.NODE_ENV !== 'production'); 3 | var webpack = require('webpack'); 4 | var express = require('express'); 5 | var path = require('path'); 6 | var app = express(); 7 | 8 | if (!isDev) { 9 | var static_path = path.join(__dirname); 10 | 11 | app.use(express.static(static_path)) 12 | .get('/', function (req, res) { 13 | res.sendFile('./index.html', { 14 | root: static_path 15 | }); 16 | }).listen(process.env.PORT || 8080, function (err) { 17 | if (err) { console.log(err) }; 18 | console.log('Listening at localhost:8080'); 19 | }); 20 | } 21 | 22 | 23 | if (isDev) { 24 | var config = require('./webpack.config'); 25 | var compiler = webpack(config); 26 | 27 | require('./fakeAPI'); 28 | 29 | app.use(require('webpack-dev-middleware')(compiler, { 30 | noInfo: true, 31 | publicPath: config.output.publicPath 32 | })); 33 | 34 | app.use(require('webpack-hot-middleware')(compiler)); 35 | 36 | app.get('*', function(req, res) { 37 | res.sendFile(path.join(__dirname, 'index.html')); 38 | }); 39 | 40 | app.listen(3000, 'localhost', function(err) { 41 | if (err) { 42 | console.log(err); 43 | return; 44 | } 45 | console.log('Listening at localhost:3000'); 46 | }); 47 | } 48 | -------------------------------------------------------------------------------- /src/images/GitHub-Mark-Light-120px-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/knowbody/redux-react-router-example-app/e8ad0c361442d8c2aa0f5712cf280033556cfb41/src/images/GitHub-Mark-Light-120px-plus.png -------------------------------------------------------------------------------- /src/javascript/Root.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { Router, Route } from 'react-router'; 3 | import createBrowserHistory from 'history/lib/createBrowserHistory'; 4 | import { Provider } from 'react-redux'; 5 | import { store } from './redux'; 6 | import withMaterialUI from './decorators/withMaterialUI'; 7 | import * as hooks from './hooks'; 8 | // Redux DevTools 9 | import DevTools from './containers/DevTools'; 10 | 11 | import Blog from './views/Blog'; 12 | import Draft from './views/Draft'; 13 | import Login from './views/Login'; 14 | 15 | hooks.bootstrap(store)(); 16 | 17 | @withMaterialUI 18 | export default class Root extends Component { 19 | render() { 20 | return ( 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | ); 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /src/javascript/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | const styles = { 4 | layout: { 5 | height: '100px' 6 | }, 7 | 8 | footerText: { 9 | textAlign: 'right', 10 | padding: '40px 0', 11 | fontSize: '10px' 12 | } 13 | }; 14 | 15 | export default class Footer extends Component { 16 | render() { 17 | return ( 18 |
19 |
20 | Contribute to the 21 | project on GitHub. 24 |
25 |
26 | ); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/javascript/components/Header.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes, Component } from 'react'; 2 | import { AppBar, IconButton, Styles } from 'material-ui'; 3 | import IconMenu from 'material-ui/lib/menus/icon-menu'; 4 | import MenuItem from 'material-ui/lib/menus/menu-item'; 5 | import NavigationMoreVert from 'material-ui/lib/svg-icons/navigation/more-vert'; 6 | import ActionAccountCicle 7 | from 'material-ui/lib/svg-icons/action/account-circle'; 8 | import SocialGithub from '../../images/GitHub-Mark-Light-120px-plus.png'; 9 | 10 | 11 | export default class Header extends Component { 12 | static contextTypes = { 13 | history: PropTypes.object.isRequired 14 | } 15 | 16 | getStyles() { 17 | return { 18 | iconButton: { 19 | color: Styles.Colors.white 20 | }, 21 | link: { 22 | display: 'inline-block', 23 | height: 48, 24 | width: 48, 25 | textAlign: 'center' 26 | }, 27 | image: { 28 | height: 24, 29 | width: 24 30 | } 31 | }; 32 | } 33 | 34 | render() { 35 | const { history } = this.context; 36 | const styles = this.getStyles(); 37 | 38 | const iconElementRight = ( 39 |
40 | 43 | 44 | 45 | 48 | 49 | 50 | }> 51 | } primaryText='Login' 52 | onTouchTap={() => history.pushState(null, '/login')} /> 53 | 54 |
55 | ); 56 | 57 | return ( 58 | } 60 | iconElementRight={iconElementRight} /> 61 | 62 | ); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/javascript/config/urls.js: -------------------------------------------------------------------------------- 1 | export const api = 'http://localhost:3010'; 2 | -------------------------------------------------------------------------------- /src/javascript/containers/AppBar.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import Header from '../components/Header'; 4 | import Footer from '../components/Footer'; 5 | 6 | class AppBar extends Component { 7 | static propTypes = { 8 | dispatch: PropTypes.func.isRequired, 9 | children: PropTypes.oneOfType([ 10 | PropTypes.object, 11 | PropTypes.array 12 | ]) 13 | } 14 | 15 | getStyles() { 16 | return { 17 | main: { 18 | maxWidth: 950, 19 | margin: '0 auto', 20 | paddingTop: 10 21 | } 22 | }; 23 | } 24 | 25 | render() { 26 | const styles = this.getStyles(); 27 | 28 | return ( 29 |
30 |
31 |
32 | {this.props.children} 33 |
34 |
35 |
36 | ); 37 | } 38 | } 39 | 40 | export default connect()(AppBar); 41 | -------------------------------------------------------------------------------- /src/javascript/containers/DevTools.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // Exported from redux-devtools 4 | import { createDevTools } from 'redux-devtools'; 5 | 6 | // Monitors are separate packages, and you can make a custom one 7 | import LogMonitor from 'redux-devtools-log-monitor'; 8 | import DockMonitor from 'redux-devtools-dock-monitor'; 9 | 10 | // createDevTools takes a monitor and produces a DevTools component 11 | const DevTools = createDevTools( 12 | 14 | 15 | 16 | ); 17 | 18 | export default DevTools; -------------------------------------------------------------------------------- /src/javascript/decorators/withMaterialUI.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ThemeManager from 'material-ui/lib/styles/theme-manager'; 3 | import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme'; 4 | 5 | export default function withMaterialUI(ComposedComponent) { 6 | return class MaterialUI extends Component { 7 | /* 8 | For more details: https://github.com/callemall/material-ui#usage 9 | Pass material-ui theme through child context 10 | We are doing this here so we don't have to do it anywhere else. 11 | */ 12 | static childContextTypes = { 13 | muiTheme: React.PropTypes.object 14 | } 15 | 16 | getChildContext() { 17 | return { 18 | muiTheme: ThemeManager.getMuiTheme(LightRawTheme) 19 | }; 20 | } 21 | 22 | render() { 23 | const { context, ...other } = this.props; 24 | return ; 25 | } 26 | }; 27 | } 28 | -------------------------------------------------------------------------------- /src/javascript/hooks.js: -------------------------------------------------------------------------------- 1 | import { bindActionCreators } from 'redux'; 2 | import * as UserActions from './redux/modules/users'; 3 | import * as BlogActions from './redux/modules/blogposts'; 4 | 5 | export function bootstrap({ dispatch }) { 6 | const userActions = bindActionCreators(UserActions, dispatch); 7 | const blogActions = bindActionCreators(BlogActions, dispatch); 8 | 9 | return () => { 10 | blogActions.fetchPosts(0, 10); 11 | userActions.fetchUsers(); 12 | }; 13 | } 14 | 15 | export function editPost({ dispatch }) { 16 | const actions = bindActionCreators(BlogActions, dispatch); 17 | 18 | return ({ params }) => { 19 | actions.setDraft(parseInt(params.id, 10)); 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /src/javascript/index.js: -------------------------------------------------------------------------------- 1 | import 'babel/polyfill'; 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import injectTapEventPlugin from 'react-tap-event-plugin'; 5 | import createHashHistory from 'history/lib/createHashHistory'; 6 | import Root from './Root'; 7 | 8 | /* 9 | Needed for onTouchTap 10 | Can go away when react 1.0 release 11 | Check this repo: 12 | https://github.com/zilverline/react-tap-event-plugin 13 | */ 14 | injectTapEventPlugin(); 15 | 16 | render(, document.getElementById('root')); 17 | -------------------------------------------------------------------------------- /src/javascript/redux/index.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware, compose } from 'redux'; 2 | import { devTools, persistState } from 'redux-devtools'; 3 | import middleware from './middleware'; 4 | import reducer from './modules/reducer'; 5 | import DevTools from '../containers/DevTools'; 6 | 7 | let finalCreateStore; 8 | if (__DEVELOPMENT__ && __DEVTOOLS__) { 9 | finalCreateStore = compose( 10 | applyMiddleware.apply(this, middleware), 11 | // Provides support for DevTools: 12 | DevTools.instrument(), 13 | // Optional. Lets you write ?debug_session= in address bar to persist debug sessions 14 | persistState(getDebugSessionKey()) 15 | )(createStore); 16 | } else { 17 | finalCreateStore = compose( 18 | applyMiddleware.apply(this, middleware) 19 | )(createStore); 20 | } 21 | 22 | function getDebugSessionKey() { 23 | // You can write custom logic here! 24 | // By default we try to read the key from ?debug_session= in the address bar 25 | const matches = window.location.href.match(/[?&]debug_session=([^&]+)\b/); 26 | return (matches && matches.length > 0)? matches[1] : null; 27 | } 28 | 29 | export const store = finalCreateStore(reducer); 30 | -------------------------------------------------------------------------------- /src/javascript/redux/middleware/clientMiddleware.js: -------------------------------------------------------------------------------- 1 | export default function clientMiddleware(client) { 2 | return ({dispatch, getState}) => { 3 | return next => action => { 4 | if (typeof action === 'function') { 5 | return action(dispatch, getState); 6 | } 7 | 8 | const { promise, types, ...rest } = action; 9 | if (!promise) { 10 | return next(action); 11 | } 12 | 13 | const [REQUEST, SUCCESS, FAILURE] = types; 14 | next({...rest, type: REQUEST}); 15 | return promise(client).then( 16 | (result) => next({...rest, result, type: SUCCESS}), 17 | (error) => next({...rest, error, type: FAILURE}) 18 | ).catch((error)=> { 19 | console.error('MIDDLEWARE ERROR:', error); 20 | next({...rest, error, type: FAILURE}); 21 | }); 22 | }; 23 | }; 24 | } 25 | -------------------------------------------------------------------------------- /src/javascript/redux/middleware/index.js: -------------------------------------------------------------------------------- 1 | import thunk from 'redux-thunk'; 2 | import logger from './logger'; 3 | import request from './request'; 4 | 5 | export default [ 6 | thunk, 7 | request, 8 | logger 9 | ]; 10 | -------------------------------------------------------------------------------- /src/javascript/redux/middleware/logger.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Logs previous and current state for every action call 3 | * @param getState 4 | * @returns {Function} 5 | */ 6 | export default function logger({ getState }) { 7 | return (next) => (action) => { 8 | console.log('dispatching', action);// eslint-disable-line 9 | const result = next(action); 10 | 11 | console.log('next state', getState());// eslint-disable-line 12 | return result; 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /src/javascript/redux/middleware/request.js: -------------------------------------------------------------------------------- 1 | import * as urls from '../../config/urls'; 2 | import { defaultParams as defaultFetchParams } from '../modules/utils/fetch'; 3 | 4 | export default function request({ dispatch }) { 5 | return (next) => async (action) => { 6 | const { type, payload = null, meta = {} } = action; 7 | 8 | if (!type || type.constructor !== Array) return next(action); 9 | 10 | const [BEGIN, SUCCESS, FAILURE] = action.type; 11 | let [url, fetchParams] = meta.fetch; 12 | 13 | dispatch({ 14 | type: BEGIN, 15 | payload: payload 16 | }); 17 | 18 | fetchParams = { 19 | ...defaultFetchParams, 20 | ...fetchParams 21 | }; 22 | 23 | if (url.match(/^http/) === null) url = `${urls.api}${url}`; 24 | 25 | const response = await fetch(url, fetchParams); 26 | const json = await response.json(); 27 | 28 | if (response.status >= 200 && response.status < 300) { 29 | dispatch({ 30 | type: SUCCESS, 31 | payload: fetchParams.method === 'delete' ? payload : json 32 | }); 33 | } else { 34 | dispatch({ 35 | type: FAILURE, 36 | error: true, 37 | payload: fetchParams.method === 'delete' ? payload : json 38 | }); 39 | } 40 | }; 41 | } 42 | -------------------------------------------------------------------------------- /src/javascript/redux/modules/auth.js: -------------------------------------------------------------------------------- 1 | const LOGIN = 'auth/LOGIN'; 2 | const LOGIN_SUCCESS = 'auth/LOGIN_SUCCESS'; 3 | const LOGIN_FAILURE = 'auth/LOGIN_FAILURE'; 4 | 5 | const REGISTER = 'auth/REGISTER'; 6 | const REGISTER_SUCCESS = 'auth/REGISTER_SUCCESS'; 7 | const REGISTER_FAILURE = 'auth/REGISTER_FAILURE'; 8 | 9 | const initialState = { 10 | user: { 11 | id: 1, 12 | username: 'johndoe', 13 | email: 'john.doe@gmail.com', 14 | password: 'demo', 15 | avatar: 'https://randomuser.me/api/portraits/med/women/1.jpg', 16 | firstname: 'John', 17 | lastname: 'Doe' 18 | } 19 | }; 20 | 21 | export default function reducer(state = initialState, action = {}) { 22 | const { type } = action; 23 | 24 | switch (type) { 25 | default: 26 | return state; 27 | } 28 | } 29 | 30 | // export function login(username, password) { 31 | // return (dispatch, getState) => { 32 | // dispatch({ 33 | // type: LOGIN, 34 | // payload: { 35 | // username, 36 | // password 37 | // } 38 | // }); 39 | 40 | // // Do something async here then dispatch LOGIN_SUCCESS or LOGIN_FAILURE 41 | // setTimeout(() => { 42 | // dispatch({ 43 | // type: LOGIN_SUCCESS, 44 | // payload: { 45 | // username, 46 | // password 47 | // }, 48 | // meta: 'The optional meta property MAY be any type of value. It is \ 49 | // intended for any extra information that is not part of the payload.\ 50 | // It will still be accessible in the reduxer. You could use it for\ 51 | // some middleware to debug your code' 52 | // }); 53 | // }, 1000); 54 | // }; 55 | // } 56 | 57 | // export function register(username, email, password) { 58 | // return (dispatch, getState) => { 59 | // dispatch({ 60 | // type: REGISTER, 61 | // payload: { 62 | // username, 63 | // email, 64 | // password 65 | // } 66 | // }); 67 | 68 | // // Do something async here then dispatch LOGIN_SUCCESS or LOGIN_FAILURE 69 | // setTimeout(() => { 70 | // dispatch({ 71 | // type: REGISTER_FAILURE, 72 | // payload: new Error(), 73 | // error: true 74 | // }); 75 | // }, 1000); 76 | // } 77 | // } 78 | -------------------------------------------------------------------------------- /src/javascript/redux/modules/blogposts.js: -------------------------------------------------------------------------------- 1 | const FETCH_POSTS = 'blogposts/FETCH_POSTS'; 2 | const FETCH_POSTS_SUCCESS = 'blogposts/FETCH_POSTS_SUCCESS'; 3 | const FETCH_POSTS_FAILURE = 'blogposts/FETCH_POSTS_FAILURE'; 4 | 5 | const CREATE_POST = 'blogposts/CREATE_POST'; 6 | const CREATE_POST_SUCCESS = 'blogposts/CREATE_POST_SUCCESS'; 7 | const CREATE_POST_FAILURE = 'blogposts/CREATE_POST_FAILURE'; 8 | 9 | const READ_POST = 'blogposts/READ_POST'; 10 | const READ_POST_SUCCESS = 'blogposts/READ_POST_SUCCESS'; 11 | const READ_POST_FAILURE = 'blogposts/READ_POST_FAILURE'; 12 | 13 | const UPDATE_POST = 'blogposts/UPDATE_POST'; 14 | const UPDATE_POST_SUCCESS = 'blogposts/UPDATE_POST_SUCCESS'; 15 | const UPDATE_POST_FAILURE = 'blogposts/UPDATE_POST_FAILURE'; 16 | 17 | const REMOVE_POST = 'blogposts/REMOVE_POST'; 18 | const REMOVE_POST_SUCCESS = 'blogposts/REMOVE_POST_SUCCESS'; 19 | const REMOVE_POST_FAILURE = 'blogposts/REMOVE_POST_FAILURE'; 20 | 21 | export const SET_DRAFT = 'draft/SET_DRAFT'; 22 | export const UPDATE_DRAFT = 'draft/UPDATE_DRAFT'; 23 | 24 | const initialState = []; 25 | 26 | function indexOfObjectById(arr, obj) { 27 | for (let i = 0, length = arr.length; i < length; i++) { 28 | if (arr[i].id === obj.id) return i; 29 | } 30 | } 31 | 32 | export default function reducer(state = initialState, action = {}) { 33 | const { type, payload } = action; 34 | 35 | switch (type) { 36 | case FETCH_POSTS_SUCCESS: 37 | return [...payload]; 38 | 39 | case CREATE_POST_SUCCESS: 40 | return [{ 41 | id: (state.length === 0) 42 | ? 1 43 | : Math.max.apply(state.map(post => post.id)) + 1, 44 | title: payload.title, 45 | subtitle: payload.subtitle, 46 | poster: payload.poster, 47 | body: payload.body, 48 | user: payload.user 49 | }, ...state]; 50 | 51 | case UPDATE_POST_SUCCESS: 52 | const index = indexOfObjectById(state, payload); 53 | const oldPost = state[index]; 54 | const newState = [...state]; 55 | newState.splice(index, 1, {...oldPost, ...payload}); 56 | 57 | return newState; 58 | 59 | case REMOVE_POST_SUCCESS: 60 | return state.filter(blogpost => 61 | blogpost.id !== payload.id 62 | ); 63 | 64 | default: 65 | return state; 66 | } 67 | } 68 | 69 | 70 | export function fetchPosts(start = 0, limit = 10) { 71 | return async (dispatch) => { 72 | dispatch({ 73 | type: [FETCH_POSTS, FETCH_POSTS_SUCCESS, FETCH_POSTS_FAILURE], 74 | meta: { 75 | fetch: [`/post?_start=${start}&_limit=${limit}`, {method: 'get'}] 76 | } 77 | }); 78 | }; 79 | } 80 | 81 | export function createPost(post) { 82 | return async (dispatch, getState) => { 83 | const { auth } = getState(); 84 | 85 | post.user = auth.user.id; 86 | 87 | dispatch({ 88 | type: [CREATE_POST, CREATE_POST_SUCCESS, CREATE_POST_FAILURE], 89 | payload: post, 90 | meta: { 91 | fetch: ['/post', {method: 'post', body: JSON.stringify(post)}] 92 | } 93 | }); 94 | }; 95 | } 96 | 97 | export function readPost(id) { 98 | return async (dispatch) => { 99 | dispatch({ 100 | type: [READ_POST, READ_POST_SUCCESS, READ_POST_FAILURE], 101 | meta: { 102 | fetch: [`/post/${id}`, {method: 'get'}] 103 | } 104 | }); 105 | }; 106 | } 107 | 108 | export function updatePost(post) { 109 | return async (dispatch) => { 110 | dispatch({ 111 | type: [UPDATE_POST, UPDATE_POST_SUCCESS, UPDATE_POST_FAILURE], 112 | payload: post, 113 | meta: { 114 | fetch: [`/post/${post.id}`, {method: 'put', body: JSON.stringify(post)}] 115 | } 116 | }); 117 | }; 118 | } 119 | 120 | /** 121 | * Deletes a post 122 | * @param post 123 | * @returns {Function} 124 | */ 125 | export function removePost(post) { 126 | return async (dispatch) => { 127 | dispatch({ 128 | type: [REMOVE_POST, REMOVE_POST_SUCCESS, REMOVE_POST_FAILURE], 129 | payload: post, 130 | meta: { 131 | fetch: [`/post/${post.id}`, {method: 'delete'}] 132 | } 133 | }); 134 | }; 135 | } 136 | /** 137 | * Action is used to set post as draft 138 | * @param postId 139 | * @returns {Function} 140 | */ 141 | export function setDraft(postId) { 142 | return (dispatch, getState) => { 143 | const { blogposts } = getState(); 144 | 145 | const post = blogposts.filter(obj => obj.id === postId)[0]; 146 | 147 | if (!post) return; 148 | 149 | dispatch({ 150 | type: SET_DRAFT, 151 | payload: post 152 | }); 153 | }; 154 | } 155 | 156 | /** 157 | * Action to set current draft 158 | * @param {object} draft 159 | * @returns {{type: UPDATE_DRAFT, payload: {object}}} 160 | */ 161 | export function updateDraft(draft) { 162 | return { 163 | type: UPDATE_DRAFT, 164 | payload: draft 165 | }; 166 | } 167 | -------------------------------------------------------------------------------- /src/javascript/redux/modules/draft.js: -------------------------------------------------------------------------------- 1 | const CREATE_POST_SUCCESS = 'draft/CREATE_POST_SUCCESS'; 2 | const UPDATE_POST_SUCCESS = 'draft/UPDATE_POST_SUCCESS'; 3 | 4 | export const SET_DRAFT = 'draft/SET_DRAFT'; 5 | export const UPDATE_DRAFT = 'draft/UPDATE_DRAFT'; 6 | 7 | const initialState = { 8 | title: '', 9 | subtitle: '', 10 | poster: `http://thecatapi.com/api/images/get?type=jpg&r='${Math.random()}`, 11 | body: '' 12 | }; 13 | 14 | export default function reducer(state = initialState, action = {}) { 15 | const { type, payload } = action; 16 | 17 | switch (type) { 18 | case CREATE_POST_SUCCESS: 19 | return { 20 | ...initialState, 21 | poster: `http://thecatapi.com/api/images/get?type=jpg&r='${Math.random()}` 22 | }; 23 | 24 | case UPDATE_POST_SUCCESS: 25 | return { 26 | ...initialState, 27 | poster: `http://thecatapi.com/api/images/get?type=jpg&r='${Math.random()}` 28 | }; 29 | 30 | case SET_DRAFT: 31 | return { ...payload }; 32 | 33 | case UPDATE_DRAFT: 34 | return { ...state, ...payload }; 35 | 36 | default: 37 | return state; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/javascript/redux/modules/reducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { reducer as form } from 'redux-form'; 3 | 4 | import auth from './auth'; 5 | import users from './users'; 6 | import blogposts from './blogposts'; 7 | import draft from './draft'; 8 | 9 | export default combineReducers({ 10 | auth, 11 | users, 12 | blogposts, 13 | draft, 14 | form 15 | }); 16 | -------------------------------------------------------------------------------- /src/javascript/redux/modules/users.js: -------------------------------------------------------------------------------- 1 | const FETCH_USERS = 'users/FETCH_USERS'; 2 | 3 | const initialState = []; 4 | 5 | export default function reducer(state = initialState, action = {}) { 6 | const { type, payload } = action; 7 | 8 | switch (type) { 9 | case FETCH_USERS: 10 | return [...payload]; 11 | 12 | default: 13 | return state; 14 | } 15 | } 16 | 17 | import * as urls from '../../config/urls'; 18 | import {read} from './utils/fetch'; 19 | 20 | export function fetchUsers() { 21 | return async (dispatch) => { 22 | const response = await read(`${urls.api}/user`); 23 | const posts = await response.json(); 24 | 25 | dispatch({ 26 | type: FETCH_USERS, 27 | payload: posts 28 | }); 29 | }; 30 | } 31 | -------------------------------------------------------------------------------- /src/javascript/redux/modules/utils/fetch.js: -------------------------------------------------------------------------------- 1 | export const defaultParams = { 2 | mode: 'cors', 3 | credentials: 'include', 4 | headers: { 5 | Accept: 'application/json', 6 | 'Content-Type': 'application/json; charset=utf-8' 7 | } 8 | }; 9 | 10 | /** 11 | * HTTP GET 12 | * @param {string} url 13 | * @return {Promise} 14 | */ 15 | export function read(url) { 16 | return fetch(url, { 17 | ...defaultParams, 18 | method: 'get' 19 | }); 20 | } 21 | 22 | /** 23 | * HTTP POST 24 | * @param {string} url 25 | * @param {object} body 26 | * @return {Promise} 27 | */ 28 | export function create(url, body = {}) { 29 | return fetch(url, { 30 | ...defaultParams, 31 | method: 'post', 32 | body: JSON.stringify(body) 33 | }); 34 | } 35 | 36 | /** 37 | * HTTP PUT 38 | * @param {string} url 39 | * @param {object} body 40 | * @return {Promise} 41 | */ 42 | export function update(url, body = {}) { 43 | return fetch(url, { 44 | ...defaultParams, 45 | method: 'put', 46 | body: JSON.stringify(body) 47 | }); 48 | } 49 | 50 | 51 | /** 52 | * HTTP DELETE 53 | * @param {string} url 54 | * @return {Promise} 55 | */ 56 | export function destroy(url) { 57 | return fetch(url, { 58 | ...defaultParams, 59 | method: 'delete' 60 | }); 61 | } 62 | 63 | -------------------------------------------------------------------------------- /src/javascript/views/Blog/Post.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { 3 | Card, 4 | CardHeader, 5 | CardMedia, 6 | CardTitle, 7 | CardText, 8 | IconButton 9 | } from 'material-ui'; 10 | import IconMenu from 'material-ui/lib/menus/icon-menu'; 11 | import MenuItem from 'material-ui/lib/menus/menu-item'; 12 | import NavigationMoreVert from 'material-ui/lib/svg-icons/navigation/more-vert'; 13 | import EditorModeEdit from 'material-ui/lib/svg-icons/editor/mode-edit'; 14 | import ActionDelete from 'material-ui/lib/svg-icons/action/delete'; 15 | import SocialShare from 'material-ui/lib/svg-icons/social/share'; 16 | 17 | export default class Blogpost extends Component { 18 | static propTypes = { 19 | actions: PropTypes.shape({ 20 | editPost: PropTypes.func, 21 | removePost: PropTypes.func 22 | }).isRequired, 23 | post: PropTypes.object.isRequired, 24 | user: PropTypes.object.isRequired 25 | } 26 | 27 | static contextTypes = { 28 | history: PropTypes.object.isRequired, 29 | muiTheme: PropTypes.object 30 | } 31 | 32 | static defaultProps = { 33 | post: {}, 34 | user: {} 35 | } 36 | 37 | getStyles() { 38 | return { 39 | card: { 40 | position: 'relative', 41 | marginTop: 10, 42 | marginBottom: 20 43 | }, 44 | iconMenu: { 45 | position: 'absolute', 46 | top: 12, 47 | right: 16, 48 | zIndex: 5 49 | }, 50 | cardMedia: { 51 | marginTop: 20, 52 | background: 'black', 53 | minHeight: 100 54 | }, 55 | cardMediaStyle: { 56 | maxHeight: '500px', 57 | textAlign: 'center' 58 | }, 59 | cardMediaImage: { 60 | maxHeight: '500px', 61 | maxWidth: '100%' 62 | } 63 | }; 64 | } 65 | 66 | render() { 67 | const { history } = this.context; 68 | const { actions, post, user } = this.props; 69 | const styles = this.getStyles(); 70 | 71 | let title = ; 72 | 73 | if (post.poster) { 74 | title = ( 75 | 78 |
79 | 80 |
81 | 82 | ); 83 | } 84 | 85 | return ( 86 | 87 | 89 | 92 | }> 93 | } primaryText='Edit' 94 | onTouchTap={() => { 95 | history.pushState(null, `/post/${post.id}/edit`); 96 | }}/> 97 | } primaryText='Remove' 98 | onTouchTap={actions.removePost.bind(null, post)}/> 99 | } primaryText='Share'/> 100 | 101 | 102 | {title} 103 | { post.body ? {post.body} : '' } 104 | 105 | ); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/javascript/views/Blog/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { bindActionCreators } from 'redux'; 3 | import { connect } from 'react-redux'; 4 | import AppBar from '../../containers/AppBar'; 5 | import { FloatingActionButton } from 'material-ui'; 6 | import ContentAdd from 'material-ui/lib/svg-icons/content/add'; 7 | import Post from './Post'; 8 | import * as BlogActions from '../../redux/modules/blogposts'; 9 | 10 | class BlogApp extends Component { 11 | static propTypes = { 12 | blogposts: PropTypes.array.isRequired, 13 | users: PropTypes.array.isRequired, 14 | dispatch: PropTypes.func.isRequired 15 | } 16 | 17 | static contextTypes = { 18 | history: PropTypes.object.isRequired 19 | } 20 | 21 | getStyles() { 22 | return { 23 | addContent: { 24 | position: 'fixed', 25 | right: 20, 26 | bottom: 20, 27 | zIndex: 100 28 | } 29 | }; 30 | } 31 | 32 | render() { 33 | const { history } = this.context; 34 | const { blogposts, users, dispatch } = this.props; 35 | const actions = bindActionCreators(BlogActions, dispatch); 36 | const styles = this.getStyles(); 37 | 38 | return ( 39 | 40 | {blogposts.map((post, i) => 41 | user.id === post.user)[0]} 44 | actions={actions}/> 45 | )} 46 | { 48 | history.pushState(null, '/post/new'); 49 | }}> 50 | 51 | 52 | 53 | ); 54 | } 55 | } 56 | 57 | export default connect(state => ({ 58 | blogposts: state.blogposts, 59 | users: state.users 60 | }))(BlogApp); 61 | -------------------------------------------------------------------------------- /src/javascript/views/Draft/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { bindActionCreators } from 'redux'; 3 | import { connect } from 'react-redux'; 4 | import AppBar from '../../containers/AppBar'; 5 | import { Paper, TextField, RaisedButton } from 'material-ui'; 6 | import * as BlogActions from '../../redux/modules/blogposts'; 7 | 8 | class Draft extends Component { 9 | static propTypes = { 10 | params: PropTypes.object.isRequired, 11 | draft: PropTypes.object.isRequired, 12 | dispatch: PropTypes.func.isRequired 13 | } 14 | 15 | static contextTypes = { 16 | history: PropTypes.object.isRequired 17 | } 18 | 19 | onSubmit(actions, payload) { 20 | event.preventDefault(); 21 | 22 | const { history } = this.context; 23 | const { params } = this.props; 24 | const isEdit = history.isActive(`/post/${params.id}/edit`); 25 | 26 | isEdit ? actions.updatePost(payload) : actions.createPost(payload); 27 | 28 | history.pushState(null, '/'); 29 | } 30 | 31 | getStyles() { 32 | return { 33 | paper: { 34 | padding: 20 35 | }, 36 | form: { 37 | margin: 0 38 | }, 39 | textField: { 40 | width: '100%' 41 | }, 42 | submit: { 43 | float: 'right', 44 | marginTop: 10 45 | } 46 | }; 47 | } 48 | 49 | render() { 50 | const { history } = this.context; 51 | const { draft, dispatch, params } = this.props; 52 | const actions = bindActionCreators(BlogActions, dispatch); 53 | const { updateDraft } = actions; 54 | const styles = this.getStyles(); 55 | 56 | const isEdit = history.isActive(`/post/${params.id}/edit`); 57 | 58 | const form = ( 59 |
{ 61 | updateDraft({ [target.name]: target.value }); 62 | }} 63 | onSubmit={this.onSubmit.bind(this, actions, draft)}> 64 | 69 | 74 | 79 | 84 | 88 | 89 |
90 | 91 | ); 92 | 93 | return ( 94 | 95 | 96 | {form} 97 | 98 | 99 | ); 100 | } 101 | } 102 | 103 | export default connect(state => ({draft: state.draft}))(Draft); 104 | -------------------------------------------------------------------------------- /src/javascript/views/Login/index.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes, Component } from 'react'; 2 | import { bindActionCreators } from 'redux'; 3 | import { connect } from 'react-redux'; 4 | import { Paper, TextField, RaisedButton } from 'material-ui'; 5 | import ActionAccountCicle 6 | from 'material-ui/lib/svg-icons/action/account-circle'; 7 | import * as AuthActions from '../../redux/modules/auth'; 8 | 9 | class Login extends Component { 10 | static propTypes = { 11 | dispatch: PropTypes.func.isRequired 12 | } 13 | 14 | static contextTypes = { 15 | muiTheme: PropTypes.object.isRequired 16 | } 17 | 18 | getStyles() { 19 | return { 20 | center: { 21 | display: 'flex', 22 | alignItems: 'center', 23 | justifyContent: 'center', 24 | height: '100%', 25 | padding: 10 26 | }, 27 | paper: { 28 | maxHeight: 400, 29 | maxWidth: 400, 30 | textAlign: 'center', 31 | padding: '20px 40px' 32 | }, 33 | submit: { 34 | marginTop: 10, 35 | marginBottom: 20, 36 | width: '100%' 37 | } 38 | }; 39 | } 40 | 41 | render() { 42 | const styles = this.getStyles(); 43 | 44 | return ( 45 |
46 | 47 |
48 |
53 |
59 | 63 | 64 |
65 | ); 66 | } 67 | 68 | submit(event) { 69 | const { dispatch } = this.props; 70 | const actions = bindActionCreators(AuthActions, dispatch); 71 | 72 | const identity = this.refs.identity.state.hasValue; 73 | const password = this.refs.password.state.hasValue; 74 | 75 | if (event.type === 'keydown' && event.keyCode !== 13) return; 76 | 77 | actions.login(identity, password); 78 | } 79 | } 80 | 81 | export default connect(state => ({ user: state.user }))(Login); 82 | -------------------------------------------------------------------------------- /src/styles/main.less: -------------------------------------------------------------------------------- 1 | // Reset 2 | @import '~normalize.css/normalize.css'; 3 | 4 | 5 | // Correct some stuff in scaffolding.less 6 | svg { 7 | box-sizing: content-box; 8 | } -------------------------------------------------------------------------------- /test/fixture/data.js: -------------------------------------------------------------------------------- 1 | var casual = require('casual'); 2 | 3 | var arrayOf = function(times, type) { 4 | var result = []; 5 | 6 | for (var i = 0; i < times; ++i) { 7 | result.push(casual[type]); 8 | } 9 | 10 | return result; 11 | }; 12 | 13 | var data = {}; 14 | 15 | var randGender = ['men', 'women'][Math.floor(Math.random() * 2)]; 16 | var baseUrl = 'https://randomuser.me/api/portraits/med/'; 17 | 18 | var userId = 0; 19 | casual.define('user', function() { 20 | ++userId; 21 | return { 22 | id: userId, 23 | username: casual.username, 24 | email: casual.email, 25 | password: 'demo', 26 | avatar: baseUrl + randGender + '/' + userId + '.jpg', 27 | firstname: casual.first_name, 28 | lastname: casual.last_name 29 | }; 30 | }); 31 | 32 | var postId = 0; 33 | casual.define('post', function() { 34 | ++postId; 35 | return { 36 | id: postId, 37 | title: casual.title, 38 | subtitle: casual.title, 39 | poster: 'http://thecatapi.com/api/images/get?type=jpg&r=' + postId, 40 | body: casual.text, 41 | user: Math.floor(Math.random() * 99 + 1) 42 | }; 43 | }); 44 | 45 | data.user = arrayOf(100, 'user'); 46 | data.post = arrayOf(1000, 'post'); 47 | 48 | module.exports = data; -------------------------------------------------------------------------------- /test/index.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/knowbody/redux-react-router-example-app/e8ad0c361442d8c2aa0f5712cf280033556cfb41/test/index.spec.js -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var path = require('path'); 3 | var webpack = require('webpack'); 4 | 5 | module.exports = { 6 | devtool: 'source-map', 7 | entry: [ 8 | 'webpack-hot-middleware/client', 9 | './src/javascript/index' 10 | ], 11 | output: { 12 | filename: 'bundle.js', 13 | path: path.join(__dirname, 'dist'), 14 | publicPath: '/static/' 15 | }, 16 | plugins: [ 17 | new webpack.HotModuleReplacementPlugin(), 18 | new webpack.NoErrorsPlugin(), 19 | new webpack.DefinePlugin({ 20 | __DEVELOPMENT__: true, 21 | __DEVTOOLS__: true 22 | }) 23 | ], 24 | resolve: { 25 | alias: { 26 | 'redux': path.join(__dirname, 'node_modules/redux') 27 | }, 28 | extensions: ['', '.js'] 29 | }, 30 | module: { 31 | loaders: [{ 32 | test: /\.js$/, 33 | loader: 'babel', 34 | query: { 35 | plugins: ['react-transform'], 36 | extra: { 37 | 'react-transform': { 38 | transforms: [{ 39 | transform: 'react-transform-hmr', 40 | imports: ['react'], 41 | locals: ['module'] 42 | }, { 43 | transform: 'react-transform-catch-errors', 44 | imports: ['react', 'redbox-react'] 45 | }] 46 | } 47 | } 48 | }, 49 | exclude: /node_modules/, 50 | include: path.join(__dirname, 'src', 'javascript') 51 | }, { 52 | test: /\.css$/, 53 | loaders: ['style', 'raw'], 54 | include: __dirname 55 | }, { 56 | test: /\.less$/, 57 | loaders: ['style', 'css', 'less'], 58 | include: __dirname 59 | }, { 60 | test: /\.png$/, 61 | loader: "url-loader?mimetype=image/png", 62 | include: path.join(__dirname, 'src', 'images') 63 | }, { 64 | test: /\.woff|\.woff2$/, 65 | loader: "url?limit=10000&mimetype=application/font-woff" 66 | }, { 67 | test: /\.ttf$/, 68 | loader: "url?limit=10000&mimetype=application/octet-stream" 69 | }, { 70 | test: /\.eot$/, 71 | loader: "file" 72 | }, { 73 | test: /\.svg$/, 74 | loader: "url?limit=10000&mimetype=image/svg+xml" 75 | }] 76 | } 77 | }; 78 | -------------------------------------------------------------------------------- /webpack.config.production.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var path = require('path'); 3 | var webpack = require('webpack'); 4 | 5 | module.exports = { 6 | devtool: 'source-map', 7 | entry: './src/javascript/index', 8 | output: { 9 | path: path.join(__dirname, 'static'), 10 | filename: 'bundle.js' 11 | }, 12 | resolve: { 13 | alias: { 14 | 'redux': path.join(__dirname, 'node_modules/redux') 15 | }, 16 | extensions: [ '', '.js' ] 17 | }, 18 | plugins: [ 19 | new webpack.optimize.DedupePlugin(), 20 | new webpack.optimize.OccurenceOrderPlugin(), 21 | new webpack.optimize.UglifyJsPlugin({ 22 | compressor: { 23 | warnings: false 24 | } 25 | }), 26 | new webpack.DefinePlugin({ 27 | __DEVELOPMENT__: false, 28 | __DEVTOOLS__: false 29 | }) 30 | ], 31 | module: { 32 | loaders: [{ 33 | test: /\.js$/, 34 | loaders: ['babel'], 35 | exclude: /node_modules/, 36 | include: path.join(__dirname, 'src', 'javascript') 37 | }, { 38 | test: /\.css$/, 39 | loaders: ['style', 'raw'], 40 | include: __dirname 41 | }, { 42 | test: /\.less$/, 43 | loaders: ['style', 'css', 'less'], 44 | include: __dirname 45 | }, { 46 | test: /\.png$/, 47 | loader: "url-loader?mimetype=image/png", 48 | include: path.join(__dirname, 'src', 'images') 49 | }, { 50 | test: /\.woff|\.woff2$/, 51 | loader: "url?limit=10000&mimetype=application/font-woff" 52 | }, { 53 | test: /\.ttf$/, 54 | loader: "url?limit=10000&mimetype=application/octet-stream" 55 | }, { 56 | test: /\.eot$/, 57 | loader: "file" 58 | }, { 59 | test: /\.svg$/, 60 | loader: "url?limit=10000&mimetype=image/svg+xml" 61 | }] 62 | } 63 | }; 64 | --------------------------------------------------------------------------------