From 142af24050b180ec7ac7e2ca757af924cf134e60 Mon Sep 17 00:00:00 2001 From: David Zukowski Date: Sun, 16 Aug 2015 10:26:20 -0400 Subject: [PATCH 1/2] refactor(example): removes unnecessary example components that polluted the starter kit --- server/scripts/test.js | 10 ++-- src/actions/todo/index.js | 26 ---------- src/components/todo-item/index.jsx | 34 ------------- src/components/todo-item/todo-item.scss | 10 ---- src/components/todo-list/index.jsx | 44 ----------------- src/constants/todo.js | 7 --- src/layouts/core/core-layout.scss | 8 ++-- src/layouts/core/core-layout.spec.js | 9 ---- src/reducers/index.js | 2 +- src/reducers/sample/index.js | 13 +++++ src/reducers/todos/index.js | 33 ------------- src/reducers/todos/index.spec.js | 24 ---------- src/routes/index.jsx | 2 - src/views/about/index.jsx | 16 ------- src/views/home/index.jsx | 63 ++----------------------- src/views/home/index.spec.js | 9 ++++ 16 files changed, 35 insertions(+), 275 deletions(-) delete mode 100644 src/actions/todo/index.js delete mode 100644 src/components/todo-item/index.jsx delete mode 100644 src/components/todo-item/todo-item.scss delete mode 100644 src/components/todo-list/index.jsx delete mode 100644 src/constants/todo.js delete mode 100644 src/layouts/core/core-layout.spec.js create mode 100644 src/reducers/sample/index.js delete mode 100644 src/reducers/todos/index.js delete mode 100644 src/reducers/todos/index.spec.js delete mode 100644 src/views/about/index.jsx create mode 100644 src/views/home/index.spec.js diff --git a/server/scripts/test.js b/server/scripts/test.js index f43f6fcd8..b366b7bbf 100644 --- a/server/scripts/test.js +++ b/server/scripts/test.js @@ -6,15 +6,13 @@ describe('Koa Server', function () { it('Should respond with a 200.', function (done) { request .get('/') - .expect(200, done) + .expect(200, done); }); - }); - describe('GET /about', function () { - it('Should respond with a 200.', function (done) { + it('Should respond with sample welcome text.', function (done) { request - .get('/about') - .expect(200, done) + .get('/') + .expect(/Welcome to the React Redux Starter Kit/, done); }); }); }); diff --git a/src/actions/todo/index.js b/src/actions/todo/index.js deleted file mode 100644 index c8900319a..000000000 --- a/src/actions/todo/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import { - TODO_CREATE, - TODO_DESTROY, - TODO_TOGGLE_COMPLETE -} from 'constants/todo'; - -export function createTodo (copy) { - return { - type : TODO_CREATE, - payload : { copy } - }; -} - -export function toggleCompleteTodo (copy) { - return { - type : TODO_TOGGLE_COMPLETE, - payload : { copy } - }; -} - -export function destroyTodo (copy) { - return { - type : TODO_DESTROY, - payload : { copy } - }; -} diff --git a/src/components/todo-item/index.jsx b/src/components/todo-item/index.jsx deleted file mode 100644 index 0ab79e189..000000000 --- a/src/components/todo-item/index.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import './todo-item.scss'; - -export default class TodoItem extends React.Component { - static propTypes = { - todo : React.PropTypes.object.isRequired, - toggle : React.PropTypes.func.isRequired, - destroy : React.PropTypes.func.isRequired - } - - constructor () { - super(); - } - - renderNotification () { - if (this.props.todo.complete) { - return ( - - - ); - } - } - - render () { - const { todo, toggle } = this.props; - - return ( -
toggle()}> - {this.renderNotification()} - {todo.copy} -
- ); - } -} diff --git a/src/components/todo-item/todo-item.scss b/src/components/todo-item/todo-item.scss deleted file mode 100644 index 4bd7bcf67..000000000 --- a/src/components/todo-item/todo-item.scss +++ /dev/null @@ -1,10 +0,0 @@ -.todo-item { - - &:hover { - cursor: pointer; - } - - &__notification { - margin-right: 1rem; - } -} diff --git a/src/components/todo-list/index.jsx b/src/components/todo-list/index.jsx deleted file mode 100644 index d0d966057..000000000 --- a/src/components/todo-list/index.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import TodoItem from 'components/todo-item'; - -export default class TodoList extends React.Component { - static propTypes = { - todos : React.PropTypes.array - } - - constructor () { - super(); - } - - renderTodos (todos) { - if (!todos || !todos.length) { - return

I'm sure you have something you need to do!

; - } - - const { destroyTodo, toggleCompleteTodo } = this.props; - - // TODO: better way to do these bindings? - return todos.map(todo => -
  • - -
    • - ); - } - - render () { - return ( -
    -
    -

    - Stuff that you should do. Maybe, I guess. -

    -
    - -
    - ); - } -} diff --git a/src/constants/todo.js b/src/constants/todo.js deleted file mode 100644 index 509270325..000000000 --- a/src/constants/todo.js +++ /dev/null @@ -1,7 +0,0 @@ -import { createConstants } from 'utils'; - -export default createConstants( - 'TODO_CREATE', - 'TODO_DESTROY', - 'TODO_TOGGLE_COMPLETE' -); diff --git a/src/layouts/core/core-layout.scss b/src/layouts/core/core-layout.scss index 6fa9bf145..140422cdc 100644 --- a/src/layouts/core/core-layout.scss +++ b/src/layouts/core/core-layout.scss @@ -1,6 +1,4 @@ +// This imports /styles/core.scss which includes normalize.css +// All application-wide styles should reside in the /styles, whereas component- +// specific can live in their component-level .scss file. @import 'core'; - -.view-container { - max-width: 1000px; - margin: 0 auto; -} diff --git a/src/layouts/core/core-layout.spec.js b/src/layouts/core/core-layout.spec.js deleted file mode 100644 index fc2714fe0..000000000 --- a/src/layouts/core/core-layout.spec.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import CoreLayout from './index.jsx'; - -describe('(Layout) Core', function () { - - it('Should have a working test.', function () { - expect(true).to.be.true; - }); -}); diff --git a/src/reducers/index.js b/src/reducers/index.js index b340db273..3833026ba 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1 +1 @@ -export { default as todos } from './todos'; +export { default as sample } from './sample'; diff --git a/src/reducers/sample/index.js b/src/reducers/sample/index.js new file mode 100644 index 000000000..57b8a7d90 --- /dev/null +++ b/src/reducers/sample/index.js @@ -0,0 +1,13 @@ +import { createReducer } from 'utils'; + +// normally this would be imported from /constants, but in trying to keep +// this starter kit as easy to customize as possibility we'll just define +// the constant here. +const SAMPLE_ACTION = 'SAMPLE_ACTION'; +const initialState = { + message : 'Welcome to the React Redux Starter Kit!' +}; + +export default createReducer(initialState, { + [SAMPLE_ACTION] : (state, payload) => state // aka noop +}); diff --git a/src/reducers/todos/index.js b/src/reducers/todos/index.js deleted file mode 100644 index 8753ca317..000000000 --- a/src/reducers/todos/index.js +++ /dev/null @@ -1,33 +0,0 @@ - -import Immutable from 'immutable'; -import { createReducer } from 'utils'; -import { - TODO_CREATE, - TODO_DESTROY, - TODO_TOGGLE_COMPLETE -} from 'constants/todo'; - - -const createTodoItem = (copy) => Immutable.Map({ - copy : copy, - complete : false -}); - -const initialState = Immutable.List([ - 'Read the docs', - 'Build something cool' -].map(createTodoItem)); - -export default createReducer(initialState, { - [TODO_CREATE] : (state, { copy }) => state.push(createTodoItem(copy)), - [TODO_DESTROY] : (state, { copy }) => { - return state.filter(todo => todo.get('copy') !== copy); - }, - [TODO_TOGGLE_COMPLETE] : (state, { copy }) => { - return state.map(todo => { - return todo.get('copy') === copy - ? todo.set('complete', !todo.get('complete')) - : todo; - }); - } -}); diff --git a/src/reducers/todos/index.spec.js b/src/reducers/todos/index.spec.js deleted file mode 100644 index 5b1c9a74e..000000000 --- a/src/reducers/todos/index.spec.js +++ /dev/null @@ -1,24 +0,0 @@ -import todos from './index'; - -const reducer = ((_state) => ({ - reset : () => _state = todos(undefined, {}), - run : (action) => _state = todos(_state, action), - getState : () => _state -}))(); - -describe('(Reducer) Todos', function () { - - beforeEach(function () { - reducer.reset(); - }); - - describe('Initial State', function () { - - it('Should initialize with 2 sample TODO items.', function () { - expect(reducer.getState().size).to.equal(2); - }); - - }); - - // more tests here... -}); diff --git a/src/routes/index.jsx b/src/routes/index.jsx index bc395a54a..f10272f45 100644 --- a/src/routes/index.jsx +++ b/src/routes/index.jsx @@ -2,11 +2,9 @@ import { Route } from 'react-router'; import React from 'react'; import CoreLayout from 'layouts/core'; import HomeView from 'views/home'; -import AboutView from 'views/about'; export default ( - ); diff --git a/src/views/about/index.jsx b/src/views/about/index.jsx deleted file mode 100644 index d44b35c72..000000000 --- a/src/views/about/index.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -export default class AboutView extends React.Component { - constructor () { - super(); - } - - render () { - return ( -
    -

    This is the about view

    -

    It's just here to test whether the router works on the server!

    -
    - ); - } -} diff --git a/src/views/home/index.jsx b/src/views/home/index.jsx index e76190806..749b6233b 100644 --- a/src/views/home/index.jsx +++ b/src/views/home/index.jsx @@ -1,71 +1,18 @@ import React from 'react'; -import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import * as TodoActionCreators from 'actions/todo'; -import TodoList from 'components/todo-list'; -// TODO: make the create-todo form a component so that a bound action -// can be provided rather than manually using this.props.dispatch(action) -@connect(state => ({ todos : state.todos })) +@connect(state => ({ + sampleStore : state.sample +})) export default class HomeView extends React.Component { constructor () { super(); - this.state = { - todo : '' - }; - } - - componentWillMount () { - this._todoActions = bindActionCreators( - TodoActionCreators, this.props.dispatch - ); - } - - _bindTo (prop) { - return (e) => this.setState({ - [prop] : e.target.value - }); - } - - _createTodo (e) { - e.preventDefault(); - this.props.dispatch(TodoActionCreators.createTodo(this.state.todo)); - this.setState({ - todo : '' - }); - } - - renderNewTodoForm () { - return ( -
    -
    -
    - -
    -
    - -
    -
    -
    - ); } render () { - const todos = this.props.todos.toJS(); - return ( -
    -
    -
    - - {this.renderNewTodoForm()} -
    -
    +
    +

    {this.props.sampleStore.message}

    ); } diff --git a/src/views/home/index.spec.js b/src/views/home/index.spec.js new file mode 100644 index 000000000..0718a078d --- /dev/null +++ b/src/views/home/index.spec.js @@ -0,0 +1,9 @@ +import React from 'react'; +import HomeView from './index'; + +describe('(View) Home', function () { + + it('Should have a test that works with Chai expectations.', function () { + expect(true).to.be.true; + }); +}); From 90e0e23e7337bd2740abed1bc84e18926050e430 Mon Sep 17 00:00:00 2001 From: David Zukowski Date: Sun, 16 Aug 2015 11:12:09 -0400 Subject: [PATCH 2/2] docs(readme): adds "Examples" section to showcase the todo application that no longer comes packaged with the starter kit --- README.md | 8 ++++++++ docs/todo.md | 1 + 2 files changed, 9 insertions(+) diff --git a/README.md b/README.md index 4b4b87c36..2808f5dac 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ Table of Contents 1. [Testing](#testing) 1. [Utilities](#utilities) 1. [Deployment](#deployment) +1. [Examples](#examples) 1. [Troubleshooting](#troubleshooting) Requirements @@ -229,6 +230,13 @@ Deployment * Add io.js as a buildpack: - In `~/ENV` append: `export BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-nodejs` +Examples +-------- + +Have an application you'd like to showcase that uses this starter kit? Feel free to list it here! + +1. [Example TODO Application](https://github.com/davezuko/react-redux-starter-kit/tree/example/todo-application) - This is the example that originally came packaged with the starter-kit; it's since been separated so that you can spend less time clearing out sample code and more time developing something new! + Troubleshooting --------------- diff --git a/docs/todo.md b/docs/todo.md index d45882802..08d79008b 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -5,6 +5,7 @@ Documentation Improvements ------------ +* [ ] Move example application to separate repo. * [ ] Move bootstrap dependency to core styles file. Redux