From a7464eca23ed6c0f21ae6b8f404d228c6b3f7cc5 Mon Sep 17 00:00:00 2001
From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com>
Date: Tue, 9 Feb 2021 13:48:02 +0100
Subject: [PATCH] Premiers essais animation sortOrder

---
 src/css/Components/sort.css | 13 +++++++++++++
 src/js/Components/Sort.js   | 39 +++++++++++++++++++++++++------------
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/css/Components/sort.css b/src/css/Components/sort.css
index 49ce3c8..18700cd 100644
--- a/src/css/Components/sort.css
+++ b/src/css/Components/sort.css
@@ -24,6 +24,19 @@
             font-size: 1.2vw;
             cursor: pointer;
         }
+        
+        #sortOrder:hover {
+            animation: rotate180 2s forwards
+        }
+        
+        .letter {
+            animation: rotate180 2s forwards;
+        }
+
+        @keyframes rotate180 {
+            0% {}
+            100% { transform: rotate3d(0,1,0, 180deg)}
+        }
 
         #selectBlock{
             background:#057B26;
diff --git a/src/js/Components/Sort.js b/src/js/Components/Sort.js
index 91a2d1c..e95a344 100644
--- a/src/js/Components/Sort.js
+++ b/src/js/Components/Sort.js
@@ -6,7 +6,8 @@ class Sort extends Component {
     constructor(props){
         super(props)
         this.state = {
-            unwound:false
+            unwound:false,
+            orderText: "a-z"
         }
         this.handleChangeSortType = this.handleChangeSortType.bind(this)
     }
@@ -17,8 +18,7 @@ class Sort extends Component {
     }
 
     componentDidMount() {
-        console.log("SORT MOUNTED")
-        this.setState({sortType: "name"}, () => {
+        this.setState({sortType: "name", orderText: "a-z"}, () => {
             this.setOrderText()
         })
     }
@@ -26,16 +26,26 @@ class Sort extends Component {
     setOrderText() {
         switch(this.state.sortType) {
             case "name":
-                this.setState({
-                    increasingText: "a->z",
-                    decreasingText: "z->a"
-                })
+                if (this.props.lowToHigh) {
+                    this.setState({
+                        orderText: "a-z"
+                    })
+                } else {
+                    this.setState({
+                        orderText: "z-a"
+                    })
+                }
                 break;
             case "price":
-                this.setState({
-                    increasingText: "0->9",
-                    decreasingText: "9->0"
-                })
+                if (this.props.lowToHigh) {
+                    this.setState({
+                        orderText: "0-9"
+                    })
+                } else {
+                    this.setState({
+                        orderText: "9-0"
+                    })
+                }
                 break;
             default:
                 break;
@@ -52,6 +62,9 @@ class Sort extends Component {
     }
 
     render() {
+        console.log(this.state.orderText)
+        console.log(this.state.orderText.split(""))
+        console.log(document.getElementById("sortOrder"))
         return (
             <div id="sortBox">
                 <div id="sortTxt">
@@ -69,7 +82,9 @@ class Sort extends Component {
                         </div>
                     </div>
                     <p id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
-                       {this.props.lowToHigh ? this.state.increasingText : this.state.decreasingText}
+                        {this.state.orderText.split("").map((l) =>
+                            <span className="letter">{l}</span>
+                        )}
                     </p>
                 </div>
             </div>