tri-click sorts

Author: Ryan

src/components/browse.js

@@ -57,11 +57,10 @@ class Browse extends Component {
 	}
 
 	handleSortButtonChange(name, sortStatus) {
-		console.log(name, sortStatus);
-		if (name === this.state.sortValue) {
-			this.setState({sortValue: null})
-		} else this.setState({
-			sortStatus: sortStatus
+		if (sortStatus === false) {name = null}
+		this.setState({
+			sortStatus: sortStatus,
+			sortValue: name
 		})
 	}
 

src/components/sortValueButton.js

@@ -29,9 +29,9 @@ class SortValueButton extends Component {
     this.setState({sortStatus: sortStatus}, () => this.pushStateUp(name))
   }
 
-  pushStateUp() {
-    console.log(name);
-    // this.props.onSortButtonChange(name, sortStatus)
+  pushStateUp(name) {
+    // console.log(name);
+    this.props.onSortButtonChange(name, this.state.sortStatus)
   }
 
   flipArrow(sortStatus) {
@@ -50,13 +50,20 @@ class SortValueButton extends Component {
     const buttonName = this.props.name;
     const buttonValue = this.props.buttonValue;
 
+    const button = (sortValue === buttonName) ? (
+      <b><button name={buttonName} className="sortButton" onClick={this.handleSortButtonChange}>
+        {buttonValue} {this.flipArrow(this.state.sortStatus)}
+      </button></b>
+    ) : (
+      <button name={buttonName} className="sortButton" onClick={this.handleSortButtonChange}>
+        {buttonValue}
+      </button>
+    )
 
     return (
       <div className="row sort-row">
         <div className="col">
-          <button name={buttonName} className="sortButton" onClick={this.handleSortButtonChange}>
-            {buttonValue} {this.flipArrow(this.state.sortStatus)}
-          </button>
+          {button}
         </div>
       </div>
     )