src/css/Components/sort.css

@@ -19,14 +19,23 @@
     }
         
         #sortOrder{
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
             color: white;
             font-family:'Wellfleet',cursive;
-            font-size: 1.4vw;
+            font-size: 1.2vw;
             cursor: pointer;
         }
+        
+        /* #sortOrder:hover {
+            animation: rotate180 2s forwards
+        }
+        
+        .letter {
+            animation: rotate180 2s forwards;
+        } */
+
+        #sortOrder>span {
+            animation : rotate180 2s forwards
+        }
 
         @keyframes rotate180 {
             0% {}

src/js/Components/Sort.js

@@ -27,14 +27,26 @@ class Sort extends Component {
     setOrderText() {
         switch(this.state.sortType) {
             case "name":
-                this.setState({
+                if (this.props.lowToHigh) {
-                    orderText: "A-Z"
+                    this.setState({
-                })
+                        orderText: "a-z"
+                    })
+                } else {
+                    this.setState({
+                        orderText: "z-a"
+                    })
+                }
                 break;
             case "price":
-                this.setState({
+                if (this.props.lowToHigh) {
-                    orderText: "0-9"
+                    this.setState({
-                })
+                        orderText: "0-9"
+                    })
+                } else {
+                    this.setState({
+                        orderText: "9-0"
+                    })
+                }
                 break;
             default:
                 break;
@@ -51,32 +63,25 @@ class Sort extends Component {
     }
 
     handleChangeSortOrder() {
-        let letters = document.querySelectorAll('.letter');
+        let letters = document.getElementsByClassName("letter")
-        let sortText = document.getElementById("sortOrder");
+        let sortText = document.getElementById("sortOrder")
-
         //animation du texte entier
         if (this.state.flipped) {
             sortText.style.cssText = "animation: reverse180 1s forwards"
-            letters.forEach((l) => {
-                l.style.animation = "reverse180 0.5s forwards"
-            });
         } else {
             sortText.style.cssText = "animation: rotate180 1s forwards"
-            letters.forEach((l) => {
-                l.style.animation = "rotate180 0.5s forwards"
-            });
         }
-        
+        //animation de chaque lettre
+        for (let i = 0 ; i<letters.length ; i++) {
+            letters[i].style.animation = "rotate180 1s forwards"
+        }
         this.setState({flipped : !this.state.flipped})
-
-        //actualisation de l'ordre d'affichage des produits
         setTimeout(() => {
             this.props.handleChangeSortOrder();
         }, 500)
     }
 
     render() {
-        console.log(document.getElementById("sortOrder"))
         // console.log(this.state.orderText)
         // console.log(this.state.orderText.split(""))
         // console.log(document.getElementById("sortOrder"))
@@ -98,7 +103,7 @@ class Sort extends Component {
                     </div>
                     <p id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
                         {this.state.orderText.split("").map((l) =>
-                            <div key={l} className="letter">{l}</div>
+                            <span key={l} className="letter">{l}</span>
                         )}
                     </p>
                 </div>