merger key sort.js*

src/js/Components/ArticleDetails.js

@@ -52,96 +52,9 @@ class ArticleDetails extends React.Component {
         })
     }
 
-    updateArticle = () => {
-        axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.props.id}`,
-        {
-            'name':this.props.name,
-            'description':this.props.desc,
-            'quantity':this.state.quantity,
-            'price':this.props.price,
-            'code':this.props.code,
-            'category_id':this.props.category.id
-        }
-        )
-        .then(res => {
-            console.log(res.data)
-        })
-        .catch(error => {
-            console.log(error.response)
-        })
-    }
 
-    plusQuantity = (element) => {
-        this.setState({quantity:this.state.quantity+1},()=>{
-            this.updateArticle();
-            if (this.state.quantity > 0 ){
-                if (this.state.selected){
-                    this.props.colorArticle("white",element)
-                } else {
-                    this.props.colorArticle("grey",element)
-                }
-            }
-    })
-    }
 
-    minusQuantity = (element) => {
-        if(this.state.quantity > 0){
-            this.setState({quantity:this.state.quantity-1},()=>{
-                this.updateArticle();
-                if (this.state.quantity === 0){
-                    if (this.state.selected){
-                        this.props.colorArticle("red&white",element)
-                    } else {
-                        this.props.colorArticle("red",element)
-                    }
-                }
-        })
-        } 
-    }
   
-    // OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner 
-    // on va minus ou plus quantity et colorer en rouge
-
-    selectArticles = (e) => {
-        let currentElement = e.target;
-        let iconElement;
-        if (e.target.tagName === "path"){
-            currentElement = e.target.parentElement
-            iconElement = currentElement
-        }
-        if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){
-            iconElement = currentElement
-        }
-        while (currentElement.id !== "bulle"){
-            currentElement = currentElement.parentElement
-        }
-        
-        console.log(currentElement); 
-        if ((e.target.id !==  "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross")  && (e.target.id !== "no") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){
-        this.setState({selected:!this.state.selected},()=>{
-            console.log(this.state.selected)
-            if (this.state.selected){
-                this.props.select(this.props.id)
-                if (this.state.quantity === 0){
-                    this.props.colorArticle("red&white",currentElement)
-                } else {
-                    this.props.colorArticle("white",currentElement)
-                }
-            } else {
-                this.props.deselect(this.props.id)
-                if (this.state.quantity === 0){
-                    this.props.colorArticle("red",currentElement)
-                } else {
-                this.props.colorArticle("grey",currentElement)
-                }
-            }
-        })   
-        } else if (iconElement.id === "minusIcon"){
-            this.minusQuantity(currentElement)
-        } else if (iconElement.id === "plusIcon"){
-            this.plusQuantity(currentElement)
-        }
-    }   
 
     render(){
         if (this.state.redirect) {
@@ -152,7 +65,7 @@ class ArticleDetails extends React.Component {
 
             // SQUARE
 
-            <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
+            <div title={this.props.id} onClick={(e) => this.props.selectArticles(e,this.props.id)} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
                 {this.state.redcrossPressed ?
                 <div id="confirmation">
                     <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
@@ -189,7 +102,7 @@ class ArticleDetails extends React.Component {
                     <div id="count">
                             <Icon id="minusIcon" icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
                             <div id="countNumber">
-                                <p id="countNumberTxt">{this.state.quantity}</p>
+                                <p id="countNumberTxt">{this.props.quantity}</p>
                             </div>
                             <Icon id="plusIcon" icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
                         </div>
@@ -201,8 +114,6 @@ class ArticleDetails extends React.Component {
 
             // INLINE
                 
-                // NOT SELECTED
-                
                 <div id="line">
                     <div id="imgLine">
                         <img id="imageLine" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>

src/js/Components/Articles.js

@@ -15,28 +15,12 @@ class Articles extends React.Component {
         console.log(articles);
         for (let i = 0; i<articles.childElementCount; i++){
           if (this.props.articles[i].quantity === 0){
-            this.colorArticle("red",articles.children[i])
+            this.props.colorArticle("red",articles.children[i])
           }
         }
     } 
 
-    colorArticle = (color,element) => {
 
-      switch (color) {
-          case "white":
-              element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
-              break;
-          case "grey" :
-              element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
-              break;
-          case "red" :
-              element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
-              break;
-          case "red&white" :
-            element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
-            break;
-      }
-  }
 
   
 
@@ -46,7 +30,7 @@ class Articles extends React.Component {
             <div id="articles">
               {
                 this.props.articles.map((article) => 
-                <ArticleDetails colorArticle={this.colorArticle} squaredBubble={true} deselect={this.props.deselect} select={this.props.select} 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}/>    
+                <ArticleDetails selectArticles={this.props.selectArticles} colorArticle={this.props.colorArticle} plus={this.props.plus} minus={this.props.minus} squaredBubble={true} deselect={this.props.deselect} select={this.props.select} 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>

src/js/Components/ArticlesByCategory.js

@@ -6,51 +6,36 @@ class ArticlesByCategory extends React.Component {
     constructor(props){
         super(props)
         this.state = {
-            articles:this.props.articles
         }
     }
 
     componentDidMount(){
-      this.splitArticlesCategories()
+      let articles = document.getElementById("articles")
-    }
+        for (let i = 0; i<articles.childElementCount;i++){
-
+          for (let j = 0; j<articles.children[i].children[2].childElementCount; j++){
-    componentDidUpdate(){
+            console.log(articles.children[i].children[2].childElementCount);
-        console.log(this.state.articles);
+            if (this.props.articles[i][j].quantity === 0){
-        
+              this.props.colorArticle("red",articles.children[i].children[2].children[j])
-    }
+            }
-
-    splitArticlesCategories = () => {
-        let counterTab = 0;
-        let divided = [];
-        divided.push([this.state.articles[0]])
-        for (let i = 1; i<this.state.articles.length;i++){
-          if (this.state.articles[i].category_id === this.state.articles[i-1].category_id){
-            divided[counterTab].push(this.state.articles[i])
-          } else {
-           counterTab++
-           divided.push([this.state.articles[i]])
           }
         }
-        this.setState({articles:divided},()=>{
+    }
-          console.log(this.state.articles)
+
-        })
     
-      }
 
     
     render() {
-        console.log(this.state.articles)
       return (
           <div id="articleContainer">
             <div id="articles">
-                {this.state.articles[0][0] &&
+                {this.props.articles[0][0] &&
-                    this.state.articles.map((divided) => 
+                    this.props.articles.map((divided) => 
-                        <div id="categoryBlock">
+                        <div key={divided[0].id} id="categoryBlock">
                             <p id="categoryName">{divided[0].category.name}</p>
                             <div id="underlinment"></div>
                             <div id="bulles">
                                 {divided.map((article) =>
-                                <ArticleDetails squaredBubble={true} 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}/>
+                                <ArticleDetails selectArticles={this.props.selectArticles} squaredBubble={true} 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>

src/js/Components/Money.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
 import '../../css/Components/money.css'
 
 class Money extends Component {

src/js/Components/Selected.js

@@ -4,7 +4,6 @@ import { Icon} from '@iconify/react';
 import minusIcon from '@iconify/icons-fa-solid/minus';
 import plusIcon from '@iconify/icons-fa-solid/plus';
 import { Tooltip, Zoom } from '@material-ui/core';
-import axios from 'axios';
 
 class Selected extends Component {
 
@@ -16,52 +15,11 @@ class Selected extends Component {
     }
 
     minusQuantitySelected = () => {
-        this.updateArticle(-1)
+        this.props.updateArticles(-1)
     }
 
     plusQuantitySelected = () => {
-        this.updateArticle(1)
+        this.props.updateArticles(1)
-    }
-
-    updateArticle = (value) => {
-
-        for (let i = 0 ; i < this.props.selectedArticles.length ; i++) {
-
-            axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.props.selectedArticles[i].id}`,
-            {
-                'name':this.props.selectedArticles[i].name,
-                'description':this.props.selectedArticles[i].description,
-                'quantity':this.props.selectedArticles[i].quantity+value,
-                'price':this.props.selectedArticles[i].price,
-                'code':this.props.selectedArticles[i].code,
-                'category_id':this.props.selectedArticles[i].category.id
-            }
-            )
-            .then(res => {
-                console.log(res.data)
-            })
-            .catch(error => {
-                console.log(error.response)
-            })
-        
-        }
-        
-
-    }
-
-    deleteSelectedArticles = () => {
-
-        for (let i = 0 ; i < this.props.selectedArticles.length ; i++) {
-
-            axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.props.selectedArticles[i].id}`)
-            .then(res => {
-                    console.log(res.data)
-            })
-            .catch(error => {
-                console.log(error.response)
-            })
-
-        }
     }
 
 
@@ -84,7 +42,7 @@ class Selected extends Component {
                         </Tooltip>
                         <Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
                             <div>
-                            <Icon onClick={this.deleteSelectedArticles} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
+                            <Icon onClick={this.props.delete} icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
                             </div>
                         </Tooltip>
                     </div>

src/js/Components/Sort.js

@@ -88,7 +88,7 @@ class Sort extends Component {
                 <div id="selectAndOrder">
                     <div id="selectBlock">
                         <div id={this.state.unwound ? 'unwoundMenu' : 'selectBox'}  >
-                            <select id='sortSelect' onClick={this.changeArrowDirection} onChange={this.handleChangeSortType}>
+                            <select id='sortSelect' onBlur={this.changeArrowDirection} onClick={this.changeArrowDirection} onChange={this.handleChangeSortType}>
                                 <option className="optionSort" value="name">Ordre Alphabétique</option>
                                 <option className="optionSort" value="category_id">Catégorie</option>
                                 <option className="optionSort" value="quantity">Quantité</option>
@@ -98,7 +98,7 @@ class Sort extends Component {
                     </div>
                     <p id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
                         {this.state.orderText.split("").map((l) =>
-                            <div className="letter">{l}</div>
+                            <div key={l} className="letter">{l}</div>
                         )}
                     </p>
                 </div>

src/js/Views/Stock.js

@@ -38,7 +38,8 @@ export default class Stock extends React.Component {
       lowToHigh: true,
       selectedArticles:[],
       counter:0,
-      code:''
+      code:'',
+      dividedArticles:[]
     }
   }
 
@@ -47,11 +48,212 @@ export default class Stock extends React.Component {
   }
 
 
+
+
+  deleteSelectedArticles = () => {
+    for (let i = 0 ; i < this.state.selectedArticles.length ; i++) {
+
+            axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`)
+            .then(res => {
+                    console.log(res.data)
+                    if (i === this.state.selectedArticles.length-1){
+                      this.setState({counter:0,selectedArticles:[]},()=>{
+                        this.getArticles()
+                      })
+                    }
+            })
+            .catch(error => {
+                console.log(error.response)
+            })
+          }
+}
+
+      // OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner 
+    // on va minus ou plus quantity et colorer en rouge
+
+    selectArticles = (e,id) => {
+      let currentElement = e.target;
+      let iconElement;
+      if (e.target.tagName === "path"){
+          currentElement = e.target.parentElement
+          iconElement = currentElement
+      }
+      if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){
+          iconElement = currentElement
+      }
+      while (currentElement.id !== "bulle"){
+          currentElement = currentElement.parentElement
+      }
+      
+      if ((e.target.id !==  "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross")  && (e.target.id !== "no") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){
+        let index = this.getArticleById(id).i;
+        let articles = this.state.articles;
+        articles[index].selected = !this.state.articles[index].selected;
+        console.log(articles[index].selected);
+        this.setState({articles:articles},()=>{
+            if (this.state.articles[index].selected){
+              this.select(id)
+              if (this.state.articles[index].quantity === 0){
+                this.colorArticle("red&white",currentElement)
+              } else {
+                this.colorArticle("white",currentElement)
+              }
+            } else {
+              this.deselect(id)
+              if (this.state.articles[index].quantity === 0){
+                this.colorArticle("red",currentElement)
+              } else {
+                this.colorArticle("grey",currentElement)
+              }
+            }
+        })   
+        } else if (iconElement.id === "minusIcon"){
+            this.minusQuantity(currentElement,id)
+        } else if (iconElement.id === "plusIcon"){
+            this.plusQuantity(currentElement,id)
+        }
+  } 
+
+  colorArticle = (color,element) => {
+      
+    switch (color) {
+        case "white":
+            element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
+            break;
+        case "grey" :
+            element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
+            break;
+        case "red" :
+            element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
+            break;
+        case "red&white" :
+            element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
+            break;
+        default :
+            break;
+    }
+}
+
+  plusQuantity = (element,id) => {
+    let index = this.getArticleById(id).i;
+    let articles = this.state.articles;
+    articles[index].quantity++;
+    console.log(articles[index]);
+    this.setState({articles:articles},()=>{
+      this.updateArticle(index,id);
+        if (this.state.articles[index].quantity > 0 ){
+            if (this.state.articles[index].selected){
+                this.colorArticle("white",element)
+            } else {
+                this.colorArticle("grey",element)
+            }
+        }
+    })
+}
+
+minusQuantity = (element,id) => {
+  let index = this.getArticleById(id).i;
+
+  if (this.state.articles[index].quantity > 0){
+    let articles = this.state.articles;
+    articles[index].quantity--;
+    console.log(articles[index]);
+    this.setState({articles:articles},()=>{
+      this.updateArticle(index,id);
+        if (this.state.articles[index].quantity === 0 ){
+            if (this.state.articles[index].selected){
+                this.colorArticle("red&white",element)
+            } else {
+                this.colorArticle("red",element)
+            }
+        }
+    })
+  }
+}
+
+getBulleById = (id) => {
+  let element;
+  let articles = document.getElementById("articles")
+  for (let i = 0; i < articles.childElementCount ; i++){
+    if (id == articles.children[i].title){
+      element = articles.children[i]
+    }
+  }
+
+  return element
+}
+
+
+updateSelectedArticles = (value) => {
+
+
+  let articles = this.state.selectedArticles;
+
+  for (let i = 0 ; i < this.state.selectedArticles.length ; i++) {
+    
+      
+      if ((value !== -1) || articles[i].quantity !== 0){
+        articles[i].quantity+=value;
+      
+        
+      this.setState({selectedArticles:articles},() => {
+        axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`,
+        {
+            'name':this.state.selectedArticles[i].name,
+            'description':this.state.selectedArticles[i].description,
+            'quantity':this.state.selectedArticles[i].quantity,
+            'price':this.state.selectedArticles[i].price,
+            'code':this.state.selectedArticles[i].code,
+            'category_id':this.state.selectedArticles[i].category.id
+        }
+        )
+        
+        .then(res => {
+            let element = this.getBulleById(this.state.selectedArticles[i].id)
+            if (this.state.selectedArticles[i].quantity > 0){
+              this.colorArticle("white",element)
+            } else {
+              this.colorArticle("red&white",element)
+            }
+            
+        })
+        .catch(error => {
+            console.log(error.response)
+        })
+  
+
+      })
+    }
+      
+  }
+  
+
+}
+
+updateArticle = (index,id) => {
+  axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${id}`,
+  {
+      'name':this.state.articles[index].name,
+      'description':this.state.articles[index].description,
+      'quantity':this.state.articles[index].quantity,
+      'price':this.state.articles[index].price,
+      'code':this.state.articles[index].code,
+      'category_id':this.state.articles[index].category.id
+  }
+  )
+  .then(res => {
+      console.log(res.data)
+  })
+  .catch(error => {
+      console.log(error.response)
+  })
+}
+
   select = (id) => {
     console.log(id)
     this.setState({counter:this.state.counter+1},()=>{
       console.log(this.state.counter)
-      this.state.selectedArticles.push(this.getArticleById(id))
+      this.state.selectedArticles.push(this.getArticleById(id).current)
       console.log(this.state.selectedArticles)
     })
   }
@@ -68,14 +270,14 @@ export default class Stock extends React.Component {
           trouve = !trouve;
         }
       }
-      return(current);
+      return({current,i});
     }
 
   deselect = (id) => {
 
     this.setState({counter:this.state.counter-1},()=>{
       console.log(this.state.counter)
-      this.setState({selectedArticles: this.state.selectedArticles.filter((item) => item !== this.getArticleById(id))},()=>{
+      this.setState({selectedArticles: this.state.selectedArticles.filter((item) => item !== this.getArticleById(id).current)},()=>{
         console.log(this.state.selectedArticles)
       })
       
@@ -117,6 +319,7 @@ export default class Stock extends React.Component {
     //TRI PAR CATEGORIE
     if (sortType === 'category_id'){
       this.setState({articles:sorted},() => {
+        this.splitArticlesCategories()
         this.setState({onSortedCategories:true})
       })
     }else{
@@ -131,6 +334,9 @@ export default class Stock extends React.Component {
   getArticles = () => {
     axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
         .then(res => {
+            for (let i = 0; i<res.data.length;i++){
+              res.data[i].selected = false;
+            }
             this.setState({articles : res.data}, () => {
                 console.log(this.state.articles)
                 this.setState({sortType: "name"})
@@ -187,21 +393,7 @@ export default class Stock extends React.Component {
     this.setState({onEditCategory:false})
   }
 
-  // handleChangeSortType = (e) => {
-  //   console.log(e.target.value)
-  //   this.setState({sortType:e.target.value},()=>{
-  //     if (this.state.sortType === "Ordre Alphabétique"){
-  //       this.sortArticles("name")
-  //     } else if(this.state.sortType === "Catégorie"){
-  //       this.sortArticles("category_id")
-  //     } else if(this.state.sortType === "Quantité"){
-  //       this.sortArticles("quantity")
-  //     } else if(this.state.sortType === "Prix"){
-  //       this.sortArticles("price");
-  //     } 
 
-  //   })
-  // }
 
   //ATTENTION ça a changé, on passe directement le string en argument (j'avais besoin d'utiliser cette fonction autrement, voir dans Sort.js)
   handleChangeSortType = (type) => {
@@ -224,7 +416,9 @@ export default class Stock extends React.Component {
     axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/articles',bodyFormData)
             .then(res => {
                 this.setState({articles : res.data}, () => {
-                    console.log(this.state.articles)
+                  if (this.state.sortType === "category_id"){
+                    this.splitArticlesCategories()
+                  }
                 })
             })
             .catch(error => {
@@ -232,6 +426,35 @@ export default class Stock extends React.Component {
             })
   }
 
+  splitArticlesCategories = () => {
+    let counterTab = 0;
+    let divided = [];
+    divided.push([this.state.articles[0]])
+    for (let i = 1; i<this.state.articles.length;i++){
+      if (this.state.articles[i].category_id === this.state.articles[i-1].category_id){
+        divided[counterTab].push(this.state.articles[i])
+      } else {
+       counterTab++
+       divided.push([this.state.articles[i]])
+      }
+    }
+    this.setState({dividedArticles:divided},()=>{
+      this.getElementandColorSplit()
+    })
+    
+  }
+
+  getElementandColorSplit = () => {
+    let articles = document.getElementById("articles")
+        for (let i = 0; i<articles.childElementCount;i++){
+          for (let j = 0; j<articles.children[i].children[2].childElementCount; j++){
+            if (this.state.dividedArticles[i][j].quantity === 0){
+              this.colorArticle("red",articles.children[i].children[2].children[j])
+            }
+          }
+        }
+  }
+
   handleSearchChange = event => {
     this.setState({search : event.target.value},()=>
     {
@@ -277,13 +500,13 @@ export default class Stock extends React.Component {
                 <Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsHidden={this.state.orderIsHidden} lowToHigh={this.state.lowToHigh}/>
               </div>
               <div id="selectedBlock">
-                <Selected selectedArticles={this.state.selectedArticles} counter={this.state.counter}/>
+                <Selected delete={this.deleteSelectedArticles} updateArticles={this.updateSelectedArticles} counter={this.state.counter}/>
               </div>
               <div id="articleBlock">
               {this.state.articles && this.state.articles[0] ? 
                 this.state.onSortedCategories ?
-                  <ArticlesByCategory onSearch={this.state.onSearch} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
+                  <ArticlesByCategory selectArticles={this.selectArticles} colorArticle={this.colorArticle} handleCategories={this.handleCategories} articles={this.state.dividedArticles} editionArticle={this.handleArticleEdition}/>
-                : <Articles deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
+                : <Articles selectArticles={this.selectArticles} colorArticle={this.colorArticle} plus={this.plusQuantity} minus={this.minusQuantity} deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
               : <AppLoader/>
               }
               </div>

src/js/Views/Ticket.js

@@ -83,7 +83,9 @@ export default class Stock extends React.Component {
       }
       
       if (already){
-        this.state.articlesJamalette[j].quantity++;
+        let articles = this.state.articlesJamalette;
+        articles[j].quantity++;
+        this.setState({articlesJamalette:articles})
       } else {
         current.realQuantity = current.quantity;
         current.quantity = 1;
@@ -138,6 +140,8 @@ export default class Stock extends React.Component {
         case "red&white" :
           element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
           break;
+        default :
+          break;
     }
 }