Skip to content

Commit fb695b5

Browse files
solkimicrebsolkimicreb
committed
refactor (examples): refactor the todoMVC example
1 parent d739866 commit fb695b5

File tree

6 files changed

+81
-93
lines changed

6 files changed

+81
-93
lines changed

‎__tests__/TodoMVC.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ describe('TodoMVC App', () => {
5656
test('should filter todos', async () => {
5757
const completedFilter = app.find('button[value="completed"]')
5858
const activeFilter = app.find('button[value="active"]')
59-
const allFilter = app.find('button[value="todos"]')
59+
const allFilter = app.find('button[value="all"]')
6060

6161
completedFilter.simulate('click')
6262
await Promise.resolve()

‎__tests__/__snapshots__/TodoMVC.test.js.snap‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ exports[`02. Add Test Todo 1`] = `
111111
<button
112112
className="selected"
113113
onClick={[Function]}
114-
value="todos"
114+
value="all"
115115
>
116116
All
117117
</button>
@@ -177,7 +177,7 @@ exports[`02. Add Test Todo 1`] = `
177177
<div class="filters">
178178
<button
179179
class="selected"
180-
value="todos"
180+
value="all"
181181
>
182182
All
183183
</button>
@@ -295,7 +295,7 @@ exports[`03. Add Other Todo 1`] = `
295295
<button
296296
className="selected"
297297
onClick={[Function]}
298-
value="todos"
298+
value="all"
299299
>
300300
All
301301
</button>
@@ -373,7 +373,7 @@ exports[`03. Add Other Todo 1`] = `
373373
<div class="filters">
374374
<button
375375
class="selected"
376-
value="todos"
376+
value="all"
377377
>
378378
All
379379
</button>
@@ -513,7 +513,7 @@ exports[`04. Add Final Todo 1`] = `
513513
<button
514514
className="selected"
515515
onClick={[Function]}
516-
value="todos"
516+
value="all"
517517
>
518518
All
519519
</button>
@@ -603,7 +603,7 @@ exports[`04. Add Final Todo 1`] = `
603603
<div class="filters">
604604
<button
605605
class="selected"
606-
value="todos"
606+
value="all"
607607
>
608608
All
609609
</button>
@@ -744,7 +744,7 @@ exports[`05. Toggle Test Todo to completed 1`] = `
744744
<button
745745
className="selected"
746746
onClick={[Function]}
747-
value="todos"
747+
value="all"
748748
>
749749
All
750750
</button>
@@ -844,7 +844,7 @@ exports[`05. Toggle Test Todo to completed 1`] = `
844844
<div class="filters">
845845
<button
846846
class="selected"
847-
value="todos"
847+
value="all"
848848
>
849849
All
850850
</button>
@@ -989,7 +989,7 @@ exports[`06. Toggle Other Todo to completed 1`] = `
989989
<button
990990
className="selected"
991991
onClick={[Function]}
992-
value="todos"
992+
value="all"
993993
>
994994
All
995995
</button>
@@ -1093,7 +1093,7 @@ exports[`06. Toggle Other Todo to completed 1`] = `
10931093
<div class="filters">
10941094
<button
10951095
class="selected"
1096-
value="todos"
1096+
value="all"
10971097
>
10981098
All
10991099
</button>
@@ -1238,7 +1238,7 @@ exports[`07. Toggle Test Todo to active 1`] = `
12381238
<button
12391239
className="selected"
12401240
onClick={[Function]}
1241-
value="todos"
1241+
value="all"
12421242
>
12431243
All
12441244
</button>
@@ -1338,7 +1338,7 @@ exports[`07. Toggle Test Todo to active 1`] = `
13381338
<div class="filters">
13391339
<button
13401340
class="selected"
1341-
value="todos"
1341+
value="all"
13421342
>
13431343
All
13441344
</button>
@@ -1438,7 +1438,7 @@ exports[`08. Filter completed 1`] = `
14381438
<button
14391439
className=""
14401440
onClick={[Function]}
1441-
value="todos"
1441+
value="all"
14421442
>
14431443
All
14441444
</button>
@@ -1514,7 +1514,7 @@ exports[`08. Filter completed 1`] = `
15141514
<div class="filters">
15151515
<button
15161516
class=""
1517-
value="todos"
1517+
value="all"
15181518
>
15191519
All
15201520
</button>
@@ -1636,7 +1636,7 @@ exports[`09. Filter active 1`] = `
16361636
<button
16371637
className=""
16381638
onClick={[Function]}
1639-
value="todos"
1639+
value="all"
16401640
>
16411641
All
16421642
</button>
@@ -1720,7 +1720,7 @@ exports[`09. Filter active 1`] = `
17201720
<div class="filters">
17211721
<button
17221722
class=""
1723-
value="todos"
1723+
value="all"
17241724
>
17251725
All
17261726
</button>
@@ -1865,7 +1865,7 @@ exports[`10. Filter all 1`] = `
18651865
<button
18661866
className="selected"
18671867
onClick={[Function]}
1868-
value="todos"
1868+
value="all"
18691869
>
18701870
All
18711871
</button>
@@ -1965,7 +1965,7 @@ exports[`10. Filter all 1`] = `
19651965
<div class="filters">
19661966
<button
19671967
class="selected"
1968-
value="todos"
1968+
value="all"
19691969
>
19701970
All
19711971
</button>
@@ -2087,7 +2087,7 @@ exports[`11. Clear completed 1`] = `
20872087
<button
20882088
className="selected"
20892089
onClick={[Function]}
2090-
value="todos"
2090+
value="all"
20912091
>
20922092
All
20932093
</button>
@@ -2165,7 +2165,7 @@ exports[`11. Clear completed 1`] = `
21652165
<div class="filters">
21662166
<button
21672167
class="selected"
2168-
value="todos"
2168+
value="all"
21692169
>
21702170
All
21712171
</button>
@@ -2285,7 +2285,7 @@ exports[`12. Toggle all to completed 1`] = `
22852285
<button
22862286
className="selected"
22872287
onClick={[Function]}
2288-
value="todos"
2288+
value="all"
22892289
>
22902290
All
22912291
</button>
@@ -2378,7 +2378,7 @@ exports[`12. Toggle all to completed 1`] = `
23782378
<div class="filters">
23792379
<button
23802380
class="selected"
2381-
value="todos"
2381+
value="all"
23822382
>
23832383
All
23842384
</button>
@@ -2501,7 +2501,7 @@ exports[`13. Toggle all to active 1`] = `
25012501
<button
25022502
className="selected"
25032503
onClick={[Function]}
2504-
value="todos"
2504+
value="all"
25052505
>
25062506
All
25072507
</button>
@@ -2579,7 +2579,7 @@ exports[`13. Toggle all to active 1`] = `
25792579
<div class="filters">
25802580
<button
25812581
class="selected"
2582-
value="todos"
2582+
value="all"
25832583
>
25842584
All
25852585
</button>
@@ -2676,7 +2676,7 @@ exports[`14. Delete Test Todo 1`] = `
26762676
<button
26772677
className="selected"
26782678
onClick={[Function]}
2679-
value="todos"
2679+
value="all"
26802680
>
26812681
All
26822682
</button>
@@ -2742,7 +2742,7 @@ exports[`14. Delete Test Todo 1`] = `
27422742
<div class="filters">
27432743
<button
27442744
class="selected"
2745-
value="todos"
2745+
value="all"
27462746
>
27472747
All
27482748
</button>

‎examples/todoMVC/App.jsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import React from 'react'
22
import classNames from 'classnames'
33
import { easyComp } from 'react-easy-state'
44
import TodoItem from './TodoItem'
5-
import store from './store'
5+
import todos from './store'
66

7-
// render is triggered whenever the relevant parts of the global store change
7+
// render is triggered whenever the relevant parts of the global todos store change
88
function App () {
9-
const { hasTodos, hasCompleted, allCompleted, active, filter,
10-
create, changeFilter, toggleAll, clearCompleted } = store
9+
const { isEmpty, hasCompleted, allCompleted, active, filter,
10+
create, changeFilter, toggleAll, clearCompleted } = todos
1111

12-
const todosClass = classNames({ selected: filter === 'todos' })
12+
const todosClass = classNames({ selected: filter === 'all' })
1313
const completedClass = classNames({ selected: filter === 'completed' })
1414
const activeClass = classNames({ selected: filter === 'active' })
1515

@@ -20,18 +20,18 @@ function App () {
2020
<input onKeyUp={create} className='new-todo' placeholder='What needs to be done?' autoFocus />
2121
</header>
2222

23-
{hasTodos && <section className='main'>
23+
{!isEmpty && <section className='main'>
2424
<input className='toggle-all' type='checkbox' checked={allCompleted} onChange={toggleAll} />
2525
<label htmlFor='toggle-all'>Mark all as complete</label>
2626
<ul className='todo-list'>
27-
{store[filter].map((todo, idx) => <TodoItem {...todo} id={idx} key={idx} />)}
27+
{todos[filter].map((todo, idx) => <TodoItem {...todo} id={idx} key={idx} />)}
2828
</ul>
2929
</section>}
3030

31-
{hasTodos && <footer className='footer'>
31+
{!isEmpty && <footer className='footer'>
3232
<span className='todo-count'>{active.length} items left</span>
3333
<div className='filters'>
34-
<button className={todosClass} value='todos' onClick={changeFilter}>All</button>
34+
<button className={todosClass} value='all' onClick={changeFilter}>All</button>
3535
<button className={activeClass} value='active' onClick={changeFilter}>Active</button>
3636
<button className={completedClass} value='completed' onClick={changeFilter}>Completed</button>
3737
</div>

‎examples/todoMVC/TodoItem.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React, { Component } from 'react'
22
import classNames from 'classnames'
33
import { easyComp } from 'react-easy-state'
4-
import store from './store'
4+
import todos from './store'
55

66
class TodoItem extends Component {
77
remove () {
8-
store.remove(this.props.id)
8+
todos.remove(this.props.id)
99
}
1010

1111
toggle () {
12-
store.toggle(this.props.id)
12+
todos.toggle(this.props.id)
1313
}
1414

15-
// render is triggered whenever the relevant parts of the component props or global store change
15+
// render is triggered whenever the relevant parts of the component props or global todos store change
1616
render () {
1717
const { toggle, remove } = this
1818
const { title, completed = false } = this.props

0 commit comments

Comments
 (0)