Skip to content

Commit 629d1b0

Browse files
jcouyangjcouyang
committed
update todomvc
1 parent 85cada2 commit 629d1b0

File tree

9 files changed

+91
-84
lines changed

9 files changed

+91
-84
lines changed

‎examples/counter/src/app.jsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,36 @@ import { render } from 'react-dom';
33
import Most, { connect } from '../../../lib/react-most'
44

55
const CounterView = props => (
6-
<div>
7-
<button onClick={props.actions.dec}>-</button>
8-
<span>{props.count}</span>
9-
<button onClick={props.actions.inc}>+</button>
10-
</div>
6+
<div>
7+
<button onClick={props.actions.dec}>-</button>
8+
<span>{props.count}</span>
9+
<button onClick={props.actions.inc}>+</button>
10+
</div>
1111
)
1212

1313
CounterView.defaultProps = { count: 0 };
1414

1515
const counterable = connect((intent$) => {
16-
return {
17-
sink$: intent$.map(intent => {
18-
switch (intent.type) {
19-
case 'inc':
20-
return state => ({ count: state.count + 1 });
21-
case 'dec':
22-
return state => ({ count: state.count - 1 });
23-
default:
24-
return _ => _;
25-
}
26-
}),
27-
inc: () => ({ type: 'inc' }),
28-
dec: () => ({ type: 'dec' }),
29-
}
16+
return {
17+
sink$: intent$.map(intent => {
18+
switch (intent.type) {
19+
case 'inc':
20+
return state => ({ count: state.count + 1 });
21+
case 'dec':
22+
return state => ({ count: state.count - 1 });
23+
default:
24+
return _ => _;
25+
}
26+
}),
27+
inc: () => ({ type: 'inc' }),
28+
dec: () => ({ type: 'dec' }),
29+
}
3030
})
3131

3232
const Counter = counterable(CounterView)
3333

3434
render(
35-
<Most>
36-
<Counter />
37-
</Most>
38-
, document.getElementById('app'));
35+
<Most>
36+
<Counter />
37+
</Most>
38+
, document.getElementById('app'));

‎examples/todomvc/package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "mostux-todomvc",
2+
"name": "react-most-todomvc",
33
"version": "0.0.1",
44
"description": "",
55
"browserify": {
@@ -34,24 +34,25 @@
3434
"classnames": "^2.2.0",
3535
"lodash": "^4.0.0",
3636
"most": "^1.0.5",
37+
"ramda": "^0.22.1",
3738
"react": "^15.3.2",
3839
"react-dom": "^15.3.2",
39-
"react-most": "^0.4.4",
40+
"react-most": "0.6.4",
4041
"rest": "^1.3.1",
4142
"union-type": "^0.3.3"
4243
},
4344
"devDependencies": {
4445
"babel": "^6.5.2",
4546
"babel-jest": "^16.0.0",
4647
"babel-plugin-lodash": "^2.0.1",
48+
"babel-plugin-ramda": "^1.1.6",
4749
"babel-plugin-transform-react-jsx": "^6.1.18",
4850
"babel-preset-es2015": "^6.1.18",
4951
"babelify": "^7.2.0",
5052
"browserify": "^12.0.1",
5153
"ecstatic": "^1.3.1",
5254
"envify": "^3.4.1",
5355
"jest-cli": "^0.7.0",
54-
"ramda": "^0.22.1",
5556
"react-addons-test-utils": "^15.3.2",
5657
"uglify-js": "^2.6.1",
5758
"watchify": "^3.6.1"
@@ -64,7 +65,8 @@
6465
],
6566
"plugins": [
6667
"transform-react-jsx",
67-
"lodash"
68+
"lodash",
69+
"ramda"
6870
]
6971
}
7072
}

‎examples/todomvc/src/app.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React, { Component, PropTypes } from 'react';
22
import Header from './components/Header';
33
import MainSection from './components/MainSection';
44
import {render} from 'react-dom';
5-
import Most from '../../../lib/react-most'
5+
import Most from 'react-most'
66

7-
const App = (props) => {
7+
const App = () => {
88
return (
99
<div>
1010
<Header />

‎examples/todomvc/src/components/Header.jsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import React, { PropTypes, Component } from 'react'
2-
import {connect} from '../../../../lib/react-most'
2+
import {connect} from 'react-most'
33
import TodoTextInput from './TodoTextInput'
4+
45
const id = _=>_;
56
let Header = (props) =>{
67
return (
78
<header className="header">
89
<h1>todos</h1>
910
<TodoTextInput newTodo={true}
1011
placeholder="What needs to be done?"
11-
search={props.actions.search}
1212
/>
1313
</header>
1414
)
1515
}
1616

17-
export default connect(()=>{
18-
return {
19-
search: (text)=>({type:'search', text}),
20-
}
21-
})(Header)
17+
export default Header

‎examples/todomvc/src/components/MainSection.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import TodoItem from './TodoItem'
33
import Footer from './Footer'
4-
import {connect} from '../../../../lib/react-most'
4+
import {connect} from 'react-most'
55
import rest from 'rest'
66
const remote = 'todos.json';
77
import * as most from 'most'
@@ -36,7 +36,11 @@ export default connect((intent$)=>{
3636
let lensComplete = r.lensProp('done')
3737
let lensTodo = index => r.compose(lensTodos, r.lensIndex(index))
3838
let lensTodoComplete = index => r.compose(lensTodo(index), lensComplete)
39+
let nextId = r.compose(r.inc, r.prop('id'), r.last, r.sortBy(r.prop('id')))
3940
let sinks$ = intent$.map(Intent.case({
41+
Add: (todo) => state=>{
42+
return r.over(lensTodos, r.append(r.assoc('id', nextId(state.todos), todo)), state)
43+
},
4044
Edit: (todo,index) => r.set(lensTodo(index), todo),
4145
Clear: () => r.over(lensTodos, r.filter(todo=>!todo.done)),
4246
Delete: id => r.over(lensTodos, r.filter(todo=>todo.id!=id)),
@@ -67,7 +71,7 @@ export default connect((intent$)=>{
6771

6872
return {
6973
sinks$,
70-
searchSink$,
74+
/* searchSink$,*/
7175
data$,
7276
}
7377
})(MainSection)

‎examples/todomvc/src/components/TodoItem.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const TodoItemView = ({todo, actions, index}) => {
88
return <div className="view">
99
<input className="toggle"
1010
type="checkbox"
11-
checked={todo.done}
11+
defaultChecked={todo.done}
1212
onChange={()=>actions.done(index)} />
1313
<label onDoubleClick={()=>actions.editing(todo.id)}>
1414
{todo.text}
@@ -24,7 +24,6 @@ const TodoItem = props => {
2424
let element = editing === todo.id ? <TodoTextInput text={todo.text}
2525
itemid={todo.id}
2626
editing={editing === todo.id}
27-
actions={actions}
2827
index={index}
2928
/>: <TodoItemView index={index} todo={todo} actions={actions}/>
3029

@@ -42,6 +41,7 @@ const intentWrapper = connect(intent$ => {
4241
return {
4342
reduceEditing$,
4443
editing: Intent.Editing,
44+
add: Intent.Add,
4545
edit: Intent.Edit,
4646
done: Intent.Done,
4747
remove: Intent.Delete,

‎examples/todomvc/src/components/TodoTextInput.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import classnames from 'classnames'
33
import MainSection from './MainSection'
44
import {connect} from 'react-most'
55
import TodoItem from './TodoItem'
6-
6+
import Intent from '../todo.action'
77
let TodoTextInput = React.createClass({
88
getInitialState(){
99
return {
@@ -17,15 +17,15 @@ let TodoTextInput = React.createClass({
1717
if (e.which === 13) {
1818
if (this.props.newTodo) {
1919
this.props.actions.add(msg);
20-
this.props.search('')
20+
this.props.actions.search('')
2121
this.setState({ text: '' })
2222
}
2323
}
2424
},
2525

2626
handleChange(e) {
2727
if (this.props.newTodo)
28-
this.props.search(e.target.value)
28+
this.props.actions.search(e.target.value)
2929
this.setState({ text: e.target.value })
3030
},
3131

@@ -54,4 +54,9 @@ let TodoTextInput = React.createClass({
5454
},
5555
});
5656

57-
export default TodoTextInput
57+
export default connect(intent$=>{
58+
return {
59+
add: Intent.Add,
60+
search: Intent.Search,
61+
}
62+
})(TodoTextInput)

‎examples/todomvc/src/todo.action.js‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import _ from 'lodash'
21
import Type from 'union-type'
2+
33
export default Type({
44
Add: [Object],
55
Delete: [Number],
@@ -11,23 +11,3 @@ export default Type({
1111
Complete: [Number],
1212
Search: [String],
1313
})
14-
15-
export function addTodo(intent$){
16-
return intent$.filter(x=>x.type=='add')
17-
.map(
18-
todo=>state=>({
19-
todos: _.concat(state.todos,_.assign(todo,{
20-
id: _.map(state.todos,'id').sort().pop()+1
21-
})),
22-
filter: _.identity,
23-
})
24-
);
25-
};
26-
export function deleteTodo(intent$){
27-
return intent$.filter(x=>x.type=='remove')
28-
.map(intent=>(
29-
state=>({
30-
todos:state.todos.filter(todo=>todo.id!=intent.id)
31-
})
32-
))
33-
}

‎examples/todomvc/yarn.lock‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
22
# yarn lockfile v1
3-
"@most/multicast@^1.1.1", "@most/multicast@^1.2.3":
3+
"@most/multicast@^1.2.3", "@most/multicast@^1.2.4":
44
version "1.2.4"
55
resolved "https://registry.yarnpkg.com/@most/multicast/-/multicast-1.2.4.tgz#38bba50b4f9da80e3c2bfb4d3a9f1c90d12ab29e"
66
dependencies:
77
"@most/prelude" "^1.4.0"
88

9-
"@most/prelude@^1.2.0", "@most/prelude@^1.4.0":
9+
"@most/prelude@^1.4.0", "@most/prelude@^1.4.1":
1010
version "1.4.1"
1111
resolved "https://registry.yarnpkg.com/@most/prelude/-/prelude-1.4.1.tgz#b940b5563096f27637401618a5351f42466ea8f3"
1212

@@ -375,6 +375,12 @@ babel-plugin-lodash@^2.0.1:
375375
dependencies:
376376
lodash "^4.0.0"
377377

378+
babel-plugin-ramda:
379+
version "1.1.6"
380+
resolved "https://registry.yarnpkg.com/babel-plugin-ramda/-/babel-plugin-ramda-1.1.6.tgz#15a508c8b4a9db3b3c856a53a2008d024f68e792"
381+
dependencies:
382+
ramda "^0.19.1"
383+
378384
babel-plugin-syntax-jsx@^6.8.0:
379385
version "6.18.0"
380386
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -2535,13 +2541,21 @@ most:
25352541
"@most/prelude" "^1.4.0"
25362542
symbol-observable "^1.0.2"
25372543

2538-
most@^0.19.7:
2539-
version "0.19.7"
2540-
resolved "https://registry.yarnpkg.com/most/-/most-0.19.7.tgz#4f80b6868c2e6b0ce2fd30eb5a98cc2e021ff497"
2544+
most-subject@^5.2.0:
2545+
version "5.2.0"
2546+
resolved "https://registry.yarnpkg.com/most-subject/-/most-subject-5.2.0.tgz#4976c169589ceaca08be77d49b95885238bc8373"
25412547
dependencies:
2542-
"@most/multicast" "^1.1.1"
2543-
"@most/prelude" "^1.2.0"
2544-
symbol-observable "^0.2.4"
2548+
"@most/multicast" "^1.2.4"
2549+
"@most/prelude" "^1.4.1"
2550+
most "^1.1.0"
2551+
2552+
most@^1.0.5, most@^1.1.0:
2553+
version "1.1.0"
2554+
resolved "https://registry.yarnpkg.com/most/-/most-1.1.0.tgz#b0c8ab5ceab45989c1c0229d6501313f2a3275bf"
2555+
dependencies:
2556+
"@most/multicast" "^1.2.3"
2557+
"@most/prelude" "^1.4.0"
2558+
symbol-observable "^1.0.2"
25452559

25462560
ms@0.7.1:
25472561
version "0.7.1"
@@ -2877,7 +2891,7 @@ querystring@0.2.0:
28772891
version "0.2.0"
28782892
resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
28792893

2880-
ramda:
2894+
ramda, ramda@^0.22.1:
28812895
version "0.22.1"
28822896
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.22.1.tgz#031da0c3df417c5b33c96234757eb37033f36a0e"
28832897

@@ -2905,7 +2919,7 @@ rc@~1.1.6:
29052919
minimist "^1.2.0"
29062920
strip-json-comments "~1.0.4"
29072921

2908-
react, react@^15.2.0:
2922+
react:
29092923
version "15.3.2"
29102924
resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"
29112925
dependencies:
@@ -2921,14 +2935,24 @@ react-dom:
29212935
version "15.3.2"
29222936
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
29232937

2924-
react-most:
2925-
version "0.4.4"
2926-
resolved "https://registry.yarnpkg.com/react-most/-/react-most-0.4.4.tgz#52b6ffc0eeb2c3c079f696436c3fc73119a51fdc"
2938+
react-most@0.6.4:
2939+
version "0.6.4"
2940+
resolved "https://registry.yarnpkg.com/react-most/-/react-most-0.6.4.tgz#a9fb1c3e77f3b97f56de9e333499e040a9193967"
29272941
dependencies:
2928-
most "^0.19.7"
2929-
react "^15.2.0"
2942+
most "^1.0.5"
2943+
most-subject "^5.2.0"
2944+
ramda "^0.22.1"
2945+
react "^15.3.2"
29302946
rx "^4.1.0"
29312947

2948+
react@^15.3.2:
2949+
version "15.4.1"
2950+
resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6"
2951+
dependencies:
2952+
fbjs "^0.8.4"
2953+
loose-envify "^1.1.0"
2954+
object-assign "^4.1.0"
2955+
29322956
read-only-stream@^2.0.0:
29332957
version "2.0.0"
29342958
resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
@@ -3312,10 +3336,6 @@ supports-color@^3.1.0, supports-color@^3.1.2:
33123336
dependencies:
33133337
has-flag "^1.0.0"
33143338

3315-
symbol-observable@^0.2.4:
3316-
version "0.2.4"
3317-
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"
3318-
33193339
symbol-observable@^1.0.2:
33203340
version "1.0.4"
33213341
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"

0 commit comments

Comments
 (0)