Handle Selected Colors

src/js/Components/ArticleDetails.js

@@ -65,7 +65,7 @@ class ArticleDetails extends React.Component {
 
             // SQUARE
 
-            <div onClick={(e) => this.props.selectArticles(e,this.props.id)} 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>

src/js/Components/Articles.js

@@ -30,7 +30,7 @@ class Articles extends React.Component {
             <div id="articles">
               {
                 this.props.articles.map((article) => 
-                <ArticleDetails selectArticles={this.props.selectArticles} colorArticle={this.props.colorArticle} plus={this.props.plus} minus={this.props.minus} 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

@@ -30,7 +30,7 @@ class ArticlesByCategory extends React.Component {
             <div id="articles">
                 {this.props.articles[0][0] &&
                     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">

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 {
 

src/js/Components/Sort.js

@@ -103,7 +103,7 @@ class Sort extends Component {
                     </div>
                     <p id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
                         {this.state.orderText.split("").map((l) =>
-                            <span className="letter">{l}</span>
+                            <span key={l} className="letter">{l}</span>
                         )}
                     </p>
                 </div>

src/js/Views/Stock.js

@@ -15,7 +15,7 @@ import AppLoader from '../Components/AppLoader';
 import Categories from '../Components/Categories';
 import EditCategory from '../Components/EditCategory';
 import Sort from '../Components/Sort';
-import { Link, Redirect } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Selected from '../Components/Selected';
 
 export default class Stock extends React.Component {
@@ -129,6 +129,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;
     }
 }
 
@@ -169,17 +171,30 @@ minusQuantity = (element,id) => {
   }
 }
 
+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 (articles[i].quantity >= 0){
+      if ((value !== -1) || articles[i].quantity !== 0){
         articles[i].quantity+=value;
-      } 
-        // implémenter une fonction pour récupérer l'élément correspondant à l'id
+      
         
       this.setState({selectedArticles:articles},() => {
         axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`,
@@ -194,7 +209,13 @@ updateSelectedArticles = (value) => {
         )
         
         .then(res => {
-            console.log(res.data)
+            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)
@@ -202,6 +223,7 @@ updateSelectedArticles = (value) => {
   
 
       })
+    }
       
   }
   
@@ -417,12 +439,12 @@ updateArticle = (index,id) => {
       }
     }
     this.setState({dividedArticles:divided},()=>{
-      this.getElementandColor()
+      this.getElementandColorSplit()
     })
     
   }
 
-  getElementandColor () {
+  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++){

src/js/Views/Ticket.js

@@ -140,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;
     }
 }