Skip to content

Commit 1271796

Browse files
committed
redux apps added
1 parent 22decdf commit 1271796

File tree

112 files changed

+2539
-11
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+2539
-11
lines changed

Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/gulpfile.js

-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ var DEST = 'dist/js';
1111

1212
gulp.task('build', function(){
1313
gulp.src(SRC)
14-
1514
.pipe(browserify({transform: 'reactify'})) // bundeling & transforming
1615
.pipe(concat(OUT))
1716
.pipe(gulp.dest(DEST));

Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/src/js/actions/GithubActions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var GithubUtils = require('../utils/GithubUtils');
44

55
var GithubActions = {
66
getUserBio: function(username){
7-
GithubUtils.getBio(username)
7+
GithubUtils.getBio(username) // promise obj
88
.then(function(response){
99
AppDispatcher.handleAction({
1010
actionType: AppConstants.GITHUB_USER_BIO,

Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/src/js/components/SearchGithub.js

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ var SearchGithub = React.createClass({
1313
var username = this.state.username;
1414
this.setState({username: ''});
1515
this.transitionTo('profile', {username: username});
16+
// ptofile
1617
},
1718
render: function(){
1819
return (

Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/src/js/utils/GithubUtils.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var AppConstants = require('../constants/AppConstants');
22
var axios = require('axios');
3-
3+
// axios => firing call nad returning promise
44
var GithubUtils = {
55
getBio: function(username){
66
var url = "https://api.github.com/users/" + username;
@@ -12,4 +12,5 @@ var GithubUtils = {
1212
}
1313
};
1414

15+
// p = call() p.then(function(){} , function(){})
1516
module.exports = GithubUtils;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": [ "es2015", "stage-2", "react" ]
3+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
build
2+
node_modules
3+
webpack.config.js
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{ "extends": "eslint-config-airbnb",
2+
"env": {
3+
"browser": true,
4+
"node": true,
5+
"mocha": true
6+
},
7+
"ecmaFeatures": {
8+
"experimentalObjectRestSpread": true
9+
},
10+
"rules": {
11+
"react/no-multi-comp": 0,
12+
"import/default": 0,
13+
"import/no-duplicates": 0,
14+
"import/named": 0,
15+
"import/namespace": 0,
16+
"import/no-unresolved": 0,
17+
"import/no-named-as-default": 0, //
18+
// Temporarirly disabled due to a possible bug in babel-eslint (todomvc example)
19+
"block-scoped-var": 0,
20+
// Temporarily disabled for test/* until babel/babel-eslint#33 is resolved
21+
"padded-blocks": 0,
22+
"comma-dangle": 0, // not sure why airbnb turned this on. gross!
23+
"indent": [2, 2, {"SwitchCase": 1}],
24+
"no-console": 0,
25+
"no-alert": 0
26+
},
27+
"plugins": [
28+
"react", "import"
29+
],
30+
"settings": {
31+
"import/parser": "babel-eslint",
32+
"import/resolve": {
33+
moduleDirectory: ["node_modules", "src"]
34+
}
35+
},
36+
"globals": {
37+
"__DEVELOPMENT__": true,
38+
"__CLIENT__": true,
39+
"__SERVER__": true,
40+
"__DISABLE_SSR__": true,
41+
"__DEVTOOLS__": true,
42+
"socket": true,
43+
"webpackIsomorphicTools": true
44+
}
45+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/node_modules/
2+
*/node_modules/
3+
/bower_components/
4+
*/bower_components/
5+
.settings
6+
.project
7+
.project
8+
.metadata
9+
.classpath
10+
.settings/
11+
logfile.txt
12+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
This repository contains the todo app code written by Dan Abramov in
2+
https://egghead.io/series/getting-started-with-redux.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JS Bin</title>
6+
<link rel="stylesheet" href="build/app.css">
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script src="build/bundle.js"></script>
11+
</body>
12+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "prep",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "bundle.js",
6+
"scripts": {
7+
"start": "webpack-dev-server",
8+
"test": "./node_modules/mocha/bin/mocha $(find src -name '*-test.js') --compilers js:babel-core/register",
9+
"test-old": "NODE_ENV=test mocha --compilers js:babel-core/register --recursive",
10+
"test-old:watch": "NODE_ENV=test mocha --compilers js:babel-core/register --recursive --watch",
11+
"test-old:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive"
12+
},
13+
"author": "Tryggvi <[email protected]>",
14+
"license": "ISC",
15+
"devDependencies": {
16+
"babel": "^6.3.13",
17+
"babel-core": "^6.3.17",
18+
"babel-loader": "^6.2.0",
19+
"babel-preset-es2015": "^6.3.13",
20+
"babel-preset-react": "^6.3.13",
21+
"babel-preset-stage-2": "^6.3.13",
22+
"babel-register": "^6.3.13",
23+
"css-loader": "^0.23.0",
24+
"deep-freeze": "0.0.1",
25+
"eslint": "^1.10.3",
26+
"eslint-config-airbnb": "^2.1.1",
27+
"eslint-config-brigade": "^1.10.0",
28+
"eslint-plugin-import": "^0.12.1",
29+
"eslint-plugin-react": "^3.11.3",
30+
"expect": "^1.13.4",
31+
"extract-text-webpack-plugin": "^0.9.1",
32+
"isparta": "^4.0.0",
33+
"mocha": "^2.3.4",
34+
"node-sass": "^3.4.2",
35+
"sass-loader": "^3.1.2",
36+
"style-loader": "^0.13.0",
37+
"webpack": "^1.12.9"
38+
},
39+
"dependencies": {
40+
"file-loader": "^0.8.5",
41+
"jquery": "^2.1.4",
42+
"react": "^0.14.3",
43+
"react-dom": "^0.14.3",
44+
"react-redux": "^4.0.1",
45+
"redux": "^3.0.5",
46+
"redux-thunk": "^1.0.3",
47+
"url-loader": "^0.5.7"
48+
}
49+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ADD_TODO } from './';
2+
3+
// Action creator
4+
let nextTodoId = 0;
5+
const addTodo = (text) => {
6+
return {
7+
type: ADD_TODO,
8+
id: nextTodoId++,
9+
text
10+
};
11+
};
12+
13+
export default addTodo;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const ADD_TODO = 'ADD_TODO';
2+
export const TOGGLE_TODO = 'TOGGLE_TODO';
3+
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
4+
5+
export const SHOW_ALL = 'SHOW_ALL';
6+
export const SHOW_COMPLETED = 'SHOW_COMPLETED';
7+
export const SHOW_ACTIVE = 'SHOW_ACTIVE';
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { SET_VISIBILITY_FILTER } from './';
2+
3+
const setVisibilityFilter = (filter) => {
4+
return {
5+
type: SET_VISIBILITY_FILTER,
6+
filter
7+
};
8+
};
9+
10+
export default setVisibilityFilter;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { TOGGLE_TODO } from './';
2+
3+
const toggleTodo = (id) => {
4+
return {
5+
type: TOGGLE_TODO,
6+
id
7+
};
8+
};
9+
10+
export default toggleTodo;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
4+
import addTodo from '../../actions/addTodo';
5+
6+
require('./AddTodo.scss');
7+
8+
let AddTodo = ({ dispatch }) => {
9+
let input;
10+
return (
11+
<div className="AddTodo">
12+
<input
13+
ref={node => {
14+
input = node;
15+
}}
16+
/>
17+
<button
18+
className="AddTodo__btn"
19+
onClick={() => {
20+
dispatch(addTodo(input.value));
21+
input.value = '';
22+
}}
23+
>
24+
Add Todo
25+
</button>
26+
</div>
27+
);
28+
};
29+
AddTodo = connect()(AddTodo);
30+
31+
export default AddTodo;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.AddTodo {
2+
3+
}
4+
.AddTodo__btn {
5+
margin-left: 20px;
6+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED } from '../actions/';
3+
4+
import FilterLink from '../containers/FilterLink';
5+
6+
const Footer = () => (
7+
<p>
8+
Show:
9+
{' '}
10+
<FilterLink
11+
filter={SHOW_ALL}
12+
>
13+
All
14+
</FilterLink>
15+
{', '}
16+
<FilterLink
17+
filter={SHOW_ACTIVE}
18+
>
19+
Active
20+
</FilterLink>
21+
{', '}
22+
<FilterLink
23+
filter={SHOW_COMPLETED}
24+
>
25+
Completed
26+
</FilterLink>
27+
</p>
28+
);
29+
30+
export default Footer;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
require('./Link.scss');
3+
4+
const Link = ({
5+
active,
6+
children,
7+
onClick
8+
}) => {
9+
if (active) {
10+
return <span>{children}</span>;
11+
}
12+
13+
return (
14+
<a href="#"
15+
className="Link"
16+
onClick={e => {
17+
e.preventDefault();
18+
onClick();
19+
}}
20+
>
21+
{children}
22+
</a>
23+
);
24+
};
25+
26+
export default Link;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.Link {
2+
color: white;
3+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
3+
const Todo = ({
4+
onClick,
5+
completed,
6+
text
7+
}) => (
8+
<li
9+
onClick={onClick}
10+
style={{
11+
textDecoration:
12+
completed ?
13+
'line-through' :
14+
'none'
15+
}}
16+
>
17+
{text}
18+
</li>
19+
);
20+
21+
export default Todo;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
3+
import AddTodo from '../AddTodo/AddTodo';
4+
import VisibleTodoList from '../../containers/VisibleTodoList';
5+
import Footer from '../../components/Footer';
6+
7+
require('./TodoApp.scss');
8+
9+
const TodoApp = () => (
10+
<div className="TodoApp">
11+
<AddTodo />
12+
<VisibleTodoList />
13+
<Footer />
14+
</div>
15+
);
16+
17+
export default TodoApp;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.TodoApp {
2+
margin: 20px;
3+
text-align: center
4+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import Todo from './Todo';
3+
4+
const TodoList = ({
5+
todos,
6+
onTodoClick
7+
}) => (
8+
<ul>
9+
{todos.map(todo =>
10+
<Todo
11+
key={todo.id}
12+
{...todo}
13+
onClick={() => onTodoClick(todo.id)}
14+
/>
15+
)}
16+
</ul>
17+
);
18+
19+
export default TodoList;

0 commit comments

Comments
 (0)