Tuotteen ostettavuuden ilmaiseminen

Tuotelistassa ei tällä hetkellä näy se, että onko käyttäjällä varaa ostaa tuotetta vai ei. Ainoa tapa tietää se, on verrata tuotteen hintaa ja saldoa keskenään. Seuraavaksi lisäämme toiminnallisuuden, joka häivyttää ne tuotteet, joita käyttäjällä ei ole varaa ostaa.

1. Tämä toiminnallisuus toteutetaan ensin Item-komponentille. Muokkaa src/components-kansion Item.jsx-tiedoston return-lauseen ensimmäinen div-aloitustagi seuraavanlaiseksi:

       <div className={ props.disabled ? "item item-disabled" : "item" }
            onClick={()=>{props.handlePurchase(props.item.id)}}>
   

   Tämä lisää div-elementin luokkamääritteeseen ehdollisena item-disabled-luokan, jos komponentin kutsun yhteydessä on määritelty disabled -määritteelle arvo (eli se tulkitaan todeksi).

2. Muokkaa src/pages-kansion Store.jsx-tiedostoa muuttamalla ennen return-lausetta sijaitseva map-funktiokutsu seuraavanlaiseksi:

     // Muodostetaan renderöitävä tuotelista.
     const items = props.storeitems.map(item => (
       <Item key={item.id}
             item={item}
             handlePurchase={props.handlePurchase} 
             disabled={props.stats.balance < item.price} />
     ));
   

   Tämä määrittelee Item-komponentin disabled-arvon todeksi, jos saldo on pienempi kuin tuotteen hinta.

Nyt tuotelistalla on häivytettynä ne tuotteet, joita käyttäjällä ei ole varaa ostaa.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää tuotteen ostettavuuden ilmaisemisun"

lisää tuotteen ostettavuuden ilmaisun -commit