Exercices
Créer une application React Permettant d'ajouter des items dans localStorage puis augmenter au diminuer le nombre d'occurence ainsi que selectionnée et désélectionner un item
import React from 'react'
import {useState, useEffect} from 'react'
function App() {
//permet d'ajouter ou supprimer un item
const [item , setItem]= useState({ itemName:"", quantite:1, itemStyle:{ textDecoration: "none"}})
//sauvegarer les items à gérés
const [items , setItems] = useState([])
//chager les items from localStorage
useEffect(() => {
console.log(items);
//si l'objet mydata n'exsite pas on le crée dans le LocalStorage
if (localStorage.getItem("mydata") === null) {
localStorage.setItem("mydata", "[]");
}else{
// si l'objet mydata exsite dans localStorage on le charge
let tb = JSON.parse(localStorage.getItem("mydata"))
setItems(tb)
}
}, []);
//pour le nombre d'occurences de toutes les items
let total = 0
//add new item
const handlChange = (e)=>{
setItem((oldValue) => ({
...oldValue,
//id sera automatiquement égale le nombre d'objet dans mydata
id: JSON.parse(localStorage.getItem("mydata")).length,
itemName: e.target.value,
}));
}
const addItems = (e)=>{
//eviter le charement du la page car on utilise <form ..submit
e.preventDefault()
//si le nom est rempli on l'ajoute dans la liste items et
//on le sauvegarde dans le LocalStorage
if(item.itemName !== ""){
let table = JSON.parse(localStorage.getItem("mydata"));
table.push(item);
localStorage.setItem("mydata", JSON.stringify(table));
setItems(table);
}
}
//incrémenter le nombre d'occurence d'un item donnée avec son id
const increasing = (id)=>{
let newTb = items.map((obj) => {
if (obj.id === id) {
//...obj=>old item
//puis on change l'attribut quantite
return { ...obj, quantite: obj.quantite + 1 };
}
return obj;
});
// save the new table
localStorage.setItem("mydata", JSON.stringify(newTb));
setItems(newTb);
}
const decreasing = (id)=>{
let newTb = items.map((obj) => {
if (obj.id === id) {
if(obj.quantite>0)
return { ...obj, quantite: obj.quantite - 1 };
}
return obj;
});
localStorage.setItem("mydata", JSON.stringify(newTb));
setItems(newTb);
console.log(newTb)
}
//lorsque un item is selected on ajoute un style
const selectionner= (id)=>{
let newTbl = items.map((obj) => {
//changer le style de l'objet sélectionné
if (obj.id === id) {
if(obj.itemStyle.textDecoration=='none')
{
return { ...obj, itemStyle:{ textDecoration: "line-through"} };
}
else
{
return { ...obj, itemStyle:{ textDecoration: "none"} };
}
}
return obj;
});
localStorage.setItem("mydata", JSON.stringify(newTbl));
setItems(newTbl)
}
return (
<div>
<form action="">
<table style={{width:'100%'}}>
<tr>
<td>
<input type="text" className="form-control" placeholder="item name... " onChange={handlChange} value={item.itemName} style={{width:'100%'}}/>
</td>
<td>
<button onClick={addItems}>Add </button>
</td>
</tr>
</table>
</form>
<div>
{
items.length ?(
<div>
{
items.map((elem)=>{
total += elem.quantite
return (
<div style={{float:'left',width:'100%',marginBottom:'7px',background:'#eee'}}>
<div style={{float:'left',width:'20%',cursor:'pointer'}}>
<div style={elem.itemStyle} onClick={()=>selectionner(elem.id)} >
{elem.itemName}
</div>
</div>
<div style={{float:'left',width:'20%'}}><button onClick={()=>decreasing(elem.id)}><</button>
</div>
<div style={{float:'left',width:'20%'}}>
<b> {elem.quantite}</b>
</div>
<div style={{float:'left',width:'20%'}}>
<button className='btn btn-light' onClick={()=>increasing(elem.id)}>></button>
</div>
</div>
)}
)}
<div style={{background:'#000',color:'red',float:'left',width:'100%'}}>
Total: {total}
</div>
</div>
):(
<div>Rien à affiché</div>
)
}
</div>
</div>
);
}
export default App
