Mise en forme tri categorie

src/css/Components/articlesbycategory.css

@@ -0,0 +1,21 @@
+#categoryName{
+    color : white;
+    text-align: left;
+    font-family: 'Wellfleet', cursive;
+    font-size:max(2.5vw,30px);
+}
+
+#categoryBlock{
+    width:60vw;
+    margin-bottom:5vh;
+}
+
+#bulles{
+    display:flex;
+}
+
+#underlinment{
+    background-color: white;
+    width:30%;
+    height:0.3vh;
+}

src/js/Components/ArticlesByCategory.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../css/Components/articles.css'
+import '../../css/Components/articlesbycategory.css'
 import ArticleDetails from './ArticleDetails'
 
 class ArticlesByCategory extends React.Component {
@@ -12,10 +12,16 @@ class ArticlesByCategory extends React.Component {
     }
 
     componentDidMount(){
-      console.log(this.props.articles)
       this.splitArticlesCategories()
     }
 
+    componentDidUpdate(){
+        
+        if (this.props.onSearch){
+        // implémenter une fonction de recherche en React sur articles
+        }
+    }
+
     splitArticlesCategories = () => {
         let counterTab = 0;
         let divided = [];
@@ -36,17 +42,21 @@ class ArticlesByCategory extends React.Component {
 
     
     render() {
+        console.log(this.state.articles)
       return (
           <div id="articleContainer">
             <div id="articles">
                 {this.state.articles[0][0] &&
                     this.state.articles.map((divided) => 
-                        <>
-                        <p>{divided[0].category.name}</p>
+                        <div id="categoryBlock">
+                            <p id="categoryName">{divided[0].category.name}</p>
+                            <div id="underlinment"></div>
+                            <div id="bulles">
                                 {divided.map((article) =>
                                 <ArticleDetails handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
                                 )}
-                        </>
+                            </div>
+                        </div>
                     )
                 }
             </div>

src/js/Components/Sort.js

@@ -19,7 +19,6 @@ class Sort extends Component {
                 <div id="selectBlock">
                     <div id="selectBox">
                         <select id="sortSelect" onChange={this.props.handleChangeSortType}>
-                            <option className="optionSort" value="Id"></option>
                             <option className="optionSort" value="Ordre Alphabétique">Ordre Alphabétique</option>
                             <option className="optionSort" value="Catégorie">Catégorie</option>
                             <option className="optionSort" value="Quantité">Quantité</option>

src/js/Views/Stock.js

@@ -33,12 +33,14 @@ export default class Stock extends React.Component {
       categoryToModify:'',
       categorySorted:false,
       dividedArticles:[],
-      onSortedCategories:false
+      onSortedCategories:false,
+      onSearch:false
     }
   }
 
   componentDidMount() {
     this.getArticles()
+    
 }
 
 // Implémenter la fonction sortArticles :
@@ -58,7 +60,7 @@ export default class Stock extends React.Component {
     }else{
       this.setState({articles:sorted},() => {
         console.log(this.state.articles)
-        
+        this.setState({onSortedCategories:false})
       })
     }
 
@@ -71,6 +73,7 @@ export default class Stock extends React.Component {
         .then(res => {
             this.setState({articles : res.data}, () => {
                 console.log(this.state.articles)
+                this.sortArticles("name")
             })
         })
         .catch(error => {
@@ -138,6 +141,7 @@ export default class Stock extends React.Component {
   }
 
   searchArticles = () => {
+    this.setState({onSearch:true})
     let bodyFormData = new FormData()
     bodyFormData.set('search',this.state.search)
     axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/articles',bodyFormData)
@@ -185,7 +189,7 @@ export default class Stock extends React.Component {
               <div id="articleBlock">
               {this.state.articles && this.state.articles[0] ? 
                 this.state.onSortedCategories ?
-                  <ArticlesByCategory handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
+                  <ArticlesByCategory onSearch={this.state.onSearch} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
                 : <Articles handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
               : <AppLoader/>
               }