Repository: sadams/todo-redux-react-webpack
Branch: master
Commit: 761eedea980e
Files: 12
Total size: 8.5 KB
Directory structure:
gitextract_90589lj7/
├── .gitignore
├── README.md
├── app/
│ ├── index.html
│ └── js/
│ ├── actions/
│ │ └── index.js
│ ├── app.js
│ ├── components/
│ │ ├── AddTodo.jsx
│ │ ├── AppRoot.jsx
│ │ ├── Footer.jsx
│ │ └── TodoList.jsx
│ └── store/
│ └── index.js
├── package.json
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
dist
/*.example.*
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
node_modules
### JetBrains template
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
*.iml
## Directory-based project format:
.idea/
# if you remove the above rule, at least ignore the following:
# User-specific stuff:
# .idea/workspace.xml
# .idea/tasks.xml
# .idea/dictionaries
# Sensitive or high-churn files:
# .idea/dataSources.ids
# .idea/dataSources.xml
# .idea/sqlDataSources.xml
# .idea/dynamic.xml
# .idea/uiDesigner.xml
# Gradle:
# .idea/gradle.xml
# .idea/libraries
# Mongo Explorer plugin:
# .idea/mongoSettings.xml
## File-based project format:
*.ipr
*.iws
## Plugin-specific files:
# IntelliJ
/out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
================================================
FILE: README.md
================================================
# Todo App using React Redux Webpack
Yet another Todo app using React Redux and Webpack.
The content is based on the example in the
[great Redux tutorial by Dan Abramov](https://egghead.io/series/getting-started-with-redux).
The aim here was to keep it *really* simple to get started with these technologies.
## Deps
npm install
This repository is meant to be used with npm 3. For version 2 also install:
npm install --save-dev babel-plugin-transform-object-rest-spread
npm install --save-dev babel-plugin-transform-class-properties
## Build
node_modules/.bin/webpack
## Dev
node_modules/.bin/webpack-dev-server --hot --inline
================================================
FILE: app/index.html
================================================
todo
todo
================================================
FILE: app/js/actions/index.js
================================================
let nextTodoId = 0;
export const addTodo = (text) => {
return {
type: 'ADD_TODO',
id: nextTodoId++,
text
};
};
export const toggleTodo = (id) => {
return {
type: 'TOGGLE_TODO',
id
};
};
export const setVisibilityFilter = (filter) => {
return {
type: 'SET_VISIBILITY_FILTER',
filter
};
};
================================================
FILE: app/js/app.js
================================================
import ReactDOM from 'react-dom';
import AppRoot from './components/AppRoot.jsx';
ReactDOM.render(
AppRoot,
document.getElementById('app-root')
);
================================================
FILE: app/js/components/AddTodo.jsx
================================================
import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions';
let AddTodo = ({ dispatch }) => {
let input;
return (
{
input = node;
}} />
);
};
export default connect()(AddTodo);
================================================
FILE: app/js/components/AppRoot.jsx
================================================
import React from 'react';
import { Provider } from 'react-redux';
import AddTodo from './AddTodo.jsx';
import TodoList from './TodoList.jsx';
import Footer from './Footer.jsx';
import store from '../store';
const TodoApp = () => (
);
export default (
)
================================================
FILE: app/js/components/Footer.jsx
================================================
import React from 'react';
import { connect } from 'react-redux';
import { setVisibilityFilter } from '../actions';
const Link = ({
active,
children,
onClick
}) => {
if (active) {
return {children};
}
return (
{
e.preventDefault();
onClick();
}}
>
{children}
);
};
const mapStateProps = (
state,
ownProps
) => {
return {
active:
ownProps.filter ===
state.visibilityFilter
};
};
const mapDispatchProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch(
setVisibilityFilter(ownProps.filter)
);
}
};
};
const FilterLink = connect(
mapStateProps,
mapDispatchProps
)(Link);
export default () => (
Show:
{' '}
All
{', '}
Active
{', '}
Completed
);
================================================
FILE: app/js/components/TodoList.jsx
================================================
import React from 'react';
import { connect } from 'react-redux';
import { toggleTodo } from '../actions';
const Todo = ({
onClick,
completed,
text
}) => (
{text}
);
const TodoList = ({
todos,
onTodoClick
}) => (
{todos.map(todo =>
onTodoClick(todo.id)}
/>
)}
);
const getVisibleTodos = (
todos,
filter
) => {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(
t => t.completed
);
case 'SHOW_ACTIVE':
return todos.filter(
t => !t.completed
);
}
}
const mapStateToProps = (
state
) => {
return {
todos: getVisibleTodos(
state.todos,
state.visibilityFilter
)
};
};
const mapDispatchToProps = (
dispatch
) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id));
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(TodoList);
================================================
FILE: app/js/store/index.js
================================================
import { createStore, combineReducers } from 'redux';
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
}
return {
...state,
completed: !state.completed
};
default:
return state;
}
};
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t =>
todo(t, action)
);
default:
return state;
}
};
const visibilityFilter = (
state = 'SHOW_ALL',
action
) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
};
const todoApp = combineReducers({
todos,
visibilityFilter
});
export default createStore(todoApp)
================================================
FILE: package.json
================================================
{
"name": "Todo",
"version": "0.0.0",
"description": "Todo app using React, Redux and Webpack. Based on the example from Dan Abramov's excellent tutorial (https://egghead.io/series/getting-started-with-redux)",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --hot --inline"
},
"keywords": [
"todo"
],
"author": "",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-syntax-class-properties": "^6.3.13",
"babel-plugin-syntax-decorators": "^6.3.13",
"babel-plugin-syntax-object-rest-spread": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"file-loader": "^0.8.5",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"react": "^0.14.5",
"react-dom": "^0.14.5",
"react-redux": "^4.0.6",
"redux": "^3.0.5"
}
}
================================================
FILE: webpack.config.js
================================================
module.exports = {
entry: {
javascript: "./app/js/app.js",
html: "./app/index.html"
},
output: {
path: __dirname + "/dist",
filename: "./js/app.js"
},
module: {
loaders: [
{
test: /\.html$/,
loader: "file?name=[name].[ext]"
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ["react-hot", 'babel?'+JSON.stringify(
{
presets: ['react', 'es2015'],
"plugins": [
"syntax-class-properties",
"syntax-decorators",
"syntax-object-rest-spread",
"transform-class-properties",
"transform-object-rest-spread"
]
}
)]
}
]
}
};