Set up a basic react router

Author: howardyclo

meetingapp/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "es2015",
+    "react",
+    "stage-0"
+  ]
+}

meetingapp/README.md

@@ -0,0 +1,82 @@
+# [TodoMVC](http://todomvc.parseapp.com/)
+
+It is easy and fast to learn how a design pattern works by implementing a todo list.
+<br>
+Here we implement a todo list using **Redux** architecture.
+<br>
+(Click the above title link to see demo)
+
+## Project structure
+```
+|-- todomvc
+    |-- .babelrc 		  # Babel configuration file, makes us able to write es6 syntax
+    |-- README.md		  # Ignore it
+    |-- package.json 	  # Node package configuration
+    |-- webpack.config.js # Webpack configuration file
+    |-- app               # App src code
+    |   |-- index.js      # Entry point of app, config in webpack.config.js
+    |   |-- __tests__     # Jest unit test
+    |   |-- actions       # Redux actions
+    |   |-- components    # React dumb component
+    |   |-- containers    # React smart component, composed by dumb component
+    |   |-- reducers      # Redux reducers
+    |   |-- store         # Redux store
+    |-- build             # Webpack build/deploy output folder
+        |-- bundle.js  	  # You can change output file name in webpack.config.js
+        |-- index.html 	  # After build or deploy, you can open this file to see demo
+        |-- style.css     # You can change output file name in webpack.config.js
+
+```
+
+## Setup workflow
+### Installation
+First open your command line, clone this project (suppose you have installed [git command line tool](https://git-scm.com/)) or simply download the ZIP to your prefered directory .
+
+```
+git clone https://github.com/HowardLoTW/react-redux-sample.git
+cd react-redux-sample/todomvc
+```
+Suppose you have installed [nodejs](https://nodejs.org/en/) (required node version 4.x or upper. I'm using node v5.3.0 & npm v3.3.12).
+<br>Type 'npm install' in your command line to install dependencies.
+```
+npm install
+```
+
+### Development
+```
+npm run dev
+```
+Open your browser and navigate to http://localhost:8080/webpack-dev-server/
+
+### Testing
+```
+npm run test
+```
+
+### Build
+```
+npm run build
+```
+
+### Deploy
+```
+npm run deploy
+```
+
+## About CSS with React
+In this project, I use the following css tools and it works well with React. And of course you can use another css tools to write css in your project.
+1. [Css Modules](https://github.com/css-modules/css-modules)
+2. [classnames](https://github.com/JedWatson/classnames)
+
+You can checkout the following talks for more information:
+1. [The case for CSS modules - Mark Dalgleish](https://www.youtube.com/watch?v=zR1lOuyQEt8)
+2. [Michael Chan - Inline Styles: themes, media queries, contexts, & when it's best to use CSS](https://www.youtube.com/watch?v=ERB1TJBn32c)
+3. [CSS with React.js](https://www.youtube.com/watch?v=FXlWWhKevaw)
+
+## Reference
+1. More setup workflow information, please refer to [react-webpack-cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
+2. [Learn to implement Redux architecture in React app](http://rackt.org/redux/index.html)
+3. [More Redux example](https://github.com/rackt/redux)
+
+
+

meetingapp/app/__tests__/actions/todo-test.js

@@ -0,0 +1,40 @@
+jest.dontMock('../../actions/todo');
+
+const Todo = require('../../actions/todo');
+
+describe('todo actions', () => {
+
+	it('addTodo should create a ADD_TODO action', () => {
+		expect(Todo.addTodo('This is a new todo')).toEqual({
+			type: Todo.Action.ADD_TODO,
+			payload: { text: 'This is a new todo' }
+		})
+	})
+
+	it('editTodo should creat a EDIT_TODO action', () => {
+		expect(Todo.editTodo(1, 'This is a edited todo')).toEqual({
+			type: Todo.Action.EDIT_TODO,
+			payload: { todoID: 1, text: 'This is a edited todo' }
+		})
+	})
+
+	it('toggleTodo should creat a TOGGLE_TODO action', () => {
+		expect(Todo.toggleTodo(1)).toEqual({
+			type: Todo.Action.TOGGLE_TODO,
+			payload: { todoID: 1 }
+		})
+	})
+
+	it('deleteTodo should creat a DELETE_TODO action', () => {
+		expect(Todo.deleteTodo(1)).toEqual({
+			type: Todo.Action.DELETE_TODO,
+			payload: { todoID: 1 }
+		})
+	})
+
+	it('deleteCompletedTodos should creat a DELETE_COMPELETED_TODOS action', () => {
+		expect(Todo.deleteCompletedTodos()).toEqual({
+			type: Todo.Action.DELETE_COMPELETED_TODOS
+		})
+	})
+})

meetingapp/app/__tests__/actions/visibility-filter-test.js

@@ -0,0 +1,13 @@
+jest.dontMock('../../actions/visibility-filter');
+
+const Filter = require('../../actions/visibility-filter');
+
+describe('visibility filter actions', () => {
+
+	it('setVisibilityFilter should create a SET_VISIBILITY_FILTER action', () => {
+		expect(Filter.setVisibilityFilter(Filter.VisibilityFilter.SHOW_ALL_TODOS)).toEqual({
+			type: Filter.Action.SET_VISIBILITY_FILTER,
+			payload: { filter: Filter.VisibilityFilter.SHOW_ALL_TODOS }
+		})
+	})
+})

meetingapp/app/__tests__/reducers/todo-test.js

@@ -0,0 +1,91 @@
+jest.dontMock('../../actions/todo');
+jest.dontMock('../../reducers/todo');
+
+const _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
+const TodoAction = require('../../actions/todo');
+const todo = _interopRequire(require('../../reducers/todo'));
+
+describe('todo reducers', () => {
+
+	it('should handle initial state', () => {
+
+		expect(todo(undefined, {})).toEqual([]);
+	})
+
+	it('should handle ADD_TODO', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: false }
+		]
+
+		expect(todo(prevState, TodoAction.addTodo('todo 2'))).toEqual(newState);
+	})
+
+	it('should handle EDIT_TODO', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: false }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo edited', completed: false }
+		]
+
+		expect(todo(prevState, TodoAction.editTodo(2, 'todo edited'))).toEqual(newState);
+	})
+
+	it('should handle TOGGLE_TODO', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: false }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: true }
+		]
+
+		expect(todo(prevState, TodoAction.toggleTodo(2))).toEqual(newState);
+	})
+
+	it('should handle DELETE_TODO', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: false }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false }
+		]
+
+		expect(todo(prevState, TodoAction.deleteTodo(2))).toEqual(newState);
+	})
+
+	it('should handle DELETE_COMPELETED_TODOS', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: true },
+			{ id: 3, text: 'todo 3', completed: false },
+			{ id: 4, text: 'todo 4', completed: true }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 3, text: 'todo 3', completed: false }
+		]
+
+		expect(todo(prevState, TodoAction.deleteCompletedTodos())).toEqual(newState);
+	})
+})
+
+

meetingapp/app/__tests__/reducers/visibility-filter-test.js

@@ -0,0 +1,23 @@
+jest.dontMock('../../actions/visibility-filter');
+jest.dontMock('../../reducers/visibility-filter');
+
+const _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
+const Filter = require('../../actions/visibility-filter');
+const visibilityFilter = _interopRequire(require('../../reducers/visibility-filter'));
+
+describe('visibility filter reducers', () => {
+
+	it('should handle initial state', () => {
+		expect(visibilityFilter(undefined, {})).toEqual(Filter.VisibilityFilter.SHOW_ALL_TODOS);
+	})
+
+	it('should set handle SET_VISIBILITY_FILTER', () => {
+
+		const prevState = Filter.VisibilityFilter.SHOW_ALL_TODOS;
+		const newState =  Filter.VisibilityFilter.SHOW_COMPLETED_TODOS;
+
+		expect(visibilityFilter(prevState, Filter.setVisibilityFilter(Filter.VisibilityFilter.SHOW_COMPLETED_TODOS))).toEqual(newState);
+	})
+})
+
+

meetingapp/app/actions/todo.js

@@ -0,0 +1,52 @@
+/**
+ * Defines actions related to todo list data.
+ */
+
+/* Action types */
+export const Action = {
+	ADD_TODO: 'ADD_TODO', 
+	EDIT_TODO: 'EDIT_TODO',
+	TOGGLE_TODO: 'TOGGLE_TODO',
+	DELETE_TODO: 'DELETE_TODO',
+	DELETE_COMPELETED_TODOS: 'DELETE_COMPELETED_TODOS'
+}
+
+/**
+ * Action Creators
+ * Create actions that contains action types and payloads of information that send data to the store.
+ * Interface follows the 'Flux Action Standard' (https://github.com/acdlite/flux-standard-action).
+ */
+
+export function addTodo(text) {
+	return { 
+		type: Action.ADD_TODO, 
+		payload: { text } 
+	}
+}
+
+export function editTodo(todoID, text) {
+	return { 
+		type: Action.EDIT_TODO, 
+		payload: { todoID, text }
+	}
+}
+
+export function toggleTodo(todoID) {
+	return { 
+		type: Action.TOGGLE_TODO,
+		payload: { todoID }
+	}
+}
+
+export function deleteTodo(todoID) {
+	return { 
+		type: Action.DELETE_TODO,
+		payload: { todoID }
+	}
+}
+
+export function deleteCompletedTodos() {
+	return {
+		type: Action.DELETE_COMPELETED_TODOS
+	}
+}

meetingapp/app/actions/visibility-filter.js

@@ -0,0 +1,28 @@
+/**
+ * Defines actions related to todo list visibility.
+ */
+
+/* Action types */
+export const Action = {
+	SET_VISIBILITY_FILTER: 'SET_VISIBILITY_FILTER',
+}
+
+/* Constants */
+export const VisibilityFilter = {
+	SHOW_ALL_TODOS: 'SHOW_ALL_TODOS',
+	SHOW_COMPLETED_TODOS: 'SHOW_COMPLETED_TODOS',
+	SHOW_UNCOMPLETED_TODOS: 'SHOW_UNCOMPLETED_TODOS'
+}
+
+/**
+ * Action Creators :
+ * Create actions that contains action types and payloads of information that send data to the store.
+ * Interface follows the 'Flux Action Standard' (https://github.com/acdlite/flux-standard-action).
+ */
+
+export function setVisibilityFilter(filter) {
+	return {
+		type: Action.SET_VISIBILITY_FILTER,
+		payload: { filter }
+	}
+}

meetingapp/app/components/Footer/Footer.css

@@ -0,0 +1,26 @@
+.container {
+	padding: 15px 25px 15px 25px;
+	border-top: 1px solid rgba(0,0,0,0.1);
+	color: rgba(0,0,0,0.3);
+	font-size: 0.9rem;
+}
+
+.active {
+	color: #fc6c85;
+}
+
+.itemleft {
+	margin-right: 60px;
+}
+
+.col {
+	display: inline-block;
+}
+
+.spacing {
+	margin-right: 10px;
+}
+
+.alignright {
+	float: right;
+}