-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex-react.html
108 lines (102 loc) · 4.61 KB
/
index-react.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="pokedex.js"></script>
</head>
<body>
<script>
</script>
<div id="reactOutput"></div>
<script type="text/babel">
var Result = React.createClass({
propTypes: {
filterPokemon: React.PropTypes.array,
},
render: function() {
return (<div>
<div>--- Total Filter Pokemon: {this.props.filterPokemon.length} ---</div>
<ul>
{this.props.filterPokemon.map(function (item, i) {
return <li key={i}>{item.name} (Atk: {item.attack}, Def: {item.defense})</li>
})}
</ul>
</div>);
}
});
var Filter = React.createClass({
propTypes: { // 1) assign expected parameter type
onFilterPokemonAtkChange: React.PropTypes.func,
onFilterPokemonTypeChange: React.PropTypes.func,
},
render: function() {
return (<div id="filterBar">
<label>Select Pokemon Type: </label>
<select name="type" id="pokemonTypeFilter" onChange={this.props.onFilterPokemonTypeChange}> {/* 2) assign event listener function for pokemon filter */}
<option value="">- ALL -</option>
<option value="grass">grass</option>
<option value="fire">fire</option>
<option value="water">water</option>
<option value="bug">bug</option>
<option value="normal">normal</option>
<option value="poison">poison</option>
<option value="electric">electric</option>
<option value="ground">ground</option>
<option value="psychic">psychic</option>
<option value="rock">rock</option>
<option value="ghost">ghost</option>
<option value="ice">ice</option>
<option value="dragon">dragon</option>
</select>
<label>Input Minimum Attack: </label><input type="text" id="pokemonAtkFilter" onChange={this.props.onFilterPokemonAtkChange} /> {/* 2) assign event listener function for pokemon atk */}
</div>);
},
});
var Pokedex = React.createClass({
getInitialState: function() {
// 1) Setup initial state
return {
filterPokemonType: null,
filterPokemonAtk: null,
};
},
filterPokemonByTypeAndMinAtk: function (allPokemons, filterPokemonType, filterPokemonAtk) {
var filterPokemon = [];
Object.keys(allPokemons).forEach(function (key) {
var curPokemon = allPokemons[key];
if ((!filterPokemonType || curPokemon.type == filterPokemonType)
&& (!filterPokemonAtk || curPokemon.attack >= filterPokemonAtk)) {
filterPokemon.push(curPokemon);
}
});
return filterPokemon;
},
onFilterPokemonTypeChange: function(e) {
// 2) function for setting new state value of filterPokemonType
this.setState({ filterPokemonType: e.target.value })
},
onFilterPokemonAtkChange: function(e) {
// 2) function for setting new state value of filterPokemonAtk
this.setState({ filterPokemonAtk: e.target.value })
},
render: function() {
// 3) Before re-render, it should recalculate filterPokemon from new state value
var filterPokemon = this.filterPokemonByTypeAndMinAtk(allPokemons, this.state.filterPokemonType, this.state.filterPokemonAtk);
return (<div>
<Filter
onFilterPokemonAtkChange={this.onFilterPokemonAtkChange} {/* 4) Pass onChange function via property */}
onFilterPokemonTypeChange={this.onFilterPokemonTypeChange}
/>
<Result filterPokemon={filterPokemon} /> {/* 5) Pass filtered pokemon via property */}
</div>);
}
});
ReactDOM.render(<Pokedex />, document.getElementById('reactOutput'));
</script>
</body>
</html>