|
@@ -6,7 +6,8 @@ class Sort extends Component {
|
6
|
6
|
constructor(props){
|
7
|
7
|
super(props)
|
8
|
8
|
this.state = {
|
9
|
|
- unwound:false
|
|
9
|
+ unwound:false,
|
|
10
|
+ orderText: "a-z"
|
10
|
11
|
}
|
11
|
12
|
this.handleChangeSortType = this.handleChangeSortType.bind(this)
|
12
|
13
|
}
|
|
@@ -17,8 +18,7 @@ class Sort extends Component {
|
17
|
18
|
}
|
18
|
19
|
|
19
|
20
|
componentDidMount() {
|
20
|
|
- console.log("SORT MOUNTED")
|
21
|
|
- this.setState({sortType: "name"}, () => {
|
|
21
|
+ this.setState({sortType: "name", orderText: "a-z"}, () => {
|
22
|
22
|
this.setOrderText()
|
23
|
23
|
})
|
24
|
24
|
}
|
|
@@ -26,16 +26,26 @@ class Sort extends Component {
|
26
|
26
|
setOrderText() {
|
27
|
27
|
switch(this.state.sortType) {
|
28
|
28
|
case "name":
|
29
|
|
- this.setState({
|
30
|
|
- increasingText: "a->z",
|
31
|
|
- decreasingText: "z->a"
|
32
|
|
- })
|
|
29
|
+ if (this.props.lowToHigh) {
|
|
30
|
+ this.setState({
|
|
31
|
+ orderText: "a-z"
|
|
32
|
+ })
|
|
33
|
+ } else {
|
|
34
|
+ this.setState({
|
|
35
|
+ orderText: "z-a"
|
|
36
|
+ })
|
|
37
|
+ }
|
33
|
38
|
break;
|
34
|
39
|
case "price":
|
35
|
|
- this.setState({
|
36
|
|
- increasingText: "0->9",
|
37
|
|
- decreasingText: "9->0"
|
38
|
|
- })
|
|
40
|
+ if (this.props.lowToHigh) {
|
|
41
|
+ this.setState({
|
|
42
|
+ orderText: "0-9"
|
|
43
|
+ })
|
|
44
|
+ } else {
|
|
45
|
+ this.setState({
|
|
46
|
+ orderText: "9-0"
|
|
47
|
+ })
|
|
48
|
+ }
|
39
|
49
|
break;
|
40
|
50
|
default:
|
41
|
51
|
break;
|
|
@@ -52,6 +62,9 @@ class Sort extends Component {
|
52
|
62
|
}
|
53
|
63
|
|
54
|
64
|
render() {
|
|
65
|
+ console.log(this.state.orderText)
|
|
66
|
+ console.log(this.state.orderText.split(""))
|
|
67
|
+ console.log(document.getElementById("sortOrder"))
|
55
|
68
|
return (
|
56
|
69
|
<div id="sortBox">
|
57
|
70
|
<div id="sortTxt">
|
|
@@ -69,7 +82,9 @@ class Sort extends Component {
|
69
|
82
|
</div>
|
70
|
83
|
</div>
|
71
|
84
|
<p id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
|
72
|
|
- {this.props.lowToHigh ? this.state.increasingText : this.state.decreasingText}
|
|
85
|
+ {this.state.orderText.split("").map((l) =>
|
|
86
|
+ <span className="letter">{l}</span>
|
|
87
|
+ )}
|
73
|
88
|
</p>
|
74
|
89
|
</div>
|
75
|
90
|
</div>
|