Premiere version du tri alphabétique ordre croissant/décroissant

src/css/Components/sort.css

@@ -2,7 +2,7 @@
     display:flex;
     flex:1;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
 }
 
     #sortTxt{
@@ -12,6 +12,19 @@
         margin-right:1vw;
     }
 
+    #selectAndOrder{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+        
+        #sortOrder{
+            color: white;
+            font-family:'Wellfleet',cursive;
+            font-size: 1.2vw;
+            cursor: pointer;
+        }
+
         #selectBlock{
             background:#057B26;
             margin-left:1vw;

src/js/Components/Sort.js

@@ -16,6 +16,7 @@ class Sort extends Component {
                 <div id="sortTxt">
                     Trier par 
                 </div>
+                <div id="selectAndOrder">
                     <div id="selectBlock">
                         <div id="selectBox">
                             <select id="sortSelect" onChange={this.props.handleChangeSortType}>
@@ -25,6 +26,10 @@ class Sort extends Component {
                             </select>
                         </div>
                     </div>
+                    <div id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsVisible}>
+                            A-Z
+                    </div>
+                </div>
             </div>
         );
     }

src/js/Views/Stock.js

@@ -34,7 +34,8 @@ export default class Stock extends React.Component {
       categorySorted:false,
       dividedArticles:[],
       onSortedCategories:false,
-      onSearch:false
+      onSearch:false,
+      sortOrder: 0
     }
   }
 
@@ -45,11 +46,19 @@ export default class Stock extends React.Component {
 
 // Implémenter la fonction sortArticles :
   sortArticles = (sortType) => {
-    
     let sorted;
     if (sortType === "name"){
+      this.setState({orderIsVisible: false})
+      if (this.state.sortOrder === 0) {
+        //ordre alphabétique croissant
         sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name))
       } else {
+        //ordre alphabétique décroissant
+        sorted = [...this.state.articles].sort((a, b) => b.name.localeCompare(a.name))
+      }
+    } else {
+      this.setState({orderIsVisible: true})
+      this.setState({sortOrder: 0})
       sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
     }
 
@@ -127,7 +136,7 @@ export default class Stock extends React.Component {
     this.setState({onEditCategory:false})
   }
 
-  handleChangeSortType = e => {
+  handleChangeSortType = (e) => {
     this.setState({sortType:e.target.value},()=>{
       if (this.state.sortType === "Ordre Alphabétique"){
         this.sortArticles("name")
@@ -140,6 +149,18 @@ export default class Stock extends React.Component {
     })
   }
 
+  //Gère le choix de tri par ordre croissant ou décroissant quand c'est possible avec le tri actuel
+  handleChangeSortOrder = (e) => {
+    this.setState({sortOrder: (this.state.sortOrder + 1) % 2});
+    console.log(this.state.sortOrder)
+    if (this.state.sortOrder === 1) {
+      e.target.innerHTML = "Z-A"
+    } else {
+      e.target.innerHTML = "A-Z"
+    }
+    this.sortArticles("name");
+  }
+
   searchArticles = () => {
     this.setState({onSearch:true})
     let bodyFormData = new FormData()
@@ -184,7 +205,7 @@ export default class Stock extends React.Component {
               : null}
               <SearchBar handleSubmit={this.handleSubmit} handleSearchChange={this.handleSearchChange}/>
               <div id="sortBlock">
-                <Sort handleChangeSortType={this.handleChangeSortType}/>
+                <Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsVisible={this.state.orderIsVisible}/>
               </div>
               <div id="articleBlock">
               {this.state.articles && this.state.articles[0] ?