Ostotapahtuman käsittely

Sovellus listaa nyt kaikki tuotteet. Seuraavaksi toteutamme toiminnallisuuden, joka käsittelee tuotteen oston. Ensin toteutetaan otsotapahtuman käsittelevä koodi, sen jälkeen funktio välitetään komponenttipuuta pitkin Item-komponentille.

Muokkaa src-kansion App.jsx-tiedostoa seuraavasti:

Lisää ennen return-lausetta seuraava handlePurchase-funktion esittelevä ohjelmakoodi:

  const handlePurchase = (id) => {
    // Etsitään tunnistetta vastaavan tuotteen indeksi taulukosta.
    const index = storeitems.findIndex(storeitem => storeitem.id == id);
    // Varmistetaan, että käyttäjällä on varaa ostaa tuote.
    if (stats.balance >= storeitems[index].price) {
      // Tehdään kopiot tilamuuttujista.
      let newstoreitems = [...storeitems];
      let newstats = {...stats};
      // Kasvatetaan tuotteiden määrää yhdellä.
      newstoreitems[index].qty++;
      // Vähännetään varoista tuotteen hinta.
      newstats.balance = newstats.balance - newstoreitems[index].price;
      // TODO Uusi tuotehinta
      // Tallennetaan uudet tilamuuttujien arviot.
      setStoreitems(newstoreitems);
      setStats(newstats);
    }
  }

Funktion toiminta on aika suoraviivainen. Funktio saa kutsun yhteydessä tuotteen id-tunnisteen, jonka perusteella etsitään oikea alkio taulukosta. Ennen ostotapahtuman suorittamista tarkistetaan, että käyttäjällä on riittävästi saldoa tuotteen ostoon. Jos saldoa on riittävästi, niin sitten suoritetaan itse ostotapahtuma. Ensin kummastakin tilafunktiosta tehdään kopio, sillä kummankin sisältöön tehdään muutoksia. Seuraavaksi kasvatetaan käyttäjän omistamien tuotteiden lukumäärää yhdellä ja vähennetään käyttäjän saldosta tuotteen hinta. Lopuksi tallennetaan päivitetyt tilamuuttujien arvot talteen.

Välitä handlePurchase-funktio AppRouter-komponentille muuttamalla AppRouter-kutsu seuraavanlaiseksi:

    <AppRouter stats={stats} 
               storeitems={storeitems} 
               handleClick={handleClick} 
               handlePurchase={handlePurchase} />

Muokkaa src/components-kansion AppRouter.jsx-tiedostoa seuraavasti:
- Muuta reititystaulukon store-polun määritys seuraavanlaiseksi:
```
{ path: "store", element: <Store stats={props.stats}
                                 storeitems={props.storeitems}
                                 handlePurchase={props.handlePurchase} />},
```
  Tämä muutos välittää App-komponentilta tulleen funktion eteenpäin Store-komponentille.
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} />
  ));
```
Tämä välittää handlePurchase-funktion eteenpäin jokaiselle Item-komponentikutsulle.
Muokkaa src/components-kansion Item.jsx-tiedoston return-lauseen ensimmäinen div-aloitustagi seuraavanlaiseksi:
```
    <div className="item"
         onClick={()=>{props.handlePurchase(props.item.id)}}>
```
Tämä lisää koko tuotteen sisältävään laatikkoelementtiin käsittelijän, joka käynnistyy laatikkoa klikattaessa. Klikattaessa kutsutaan pääkomponentilta välitettyä handlePurchase-funktiota, jolla annetaan klikatun tuotteen id kutsun yhteydessä parametrina.

Huomaa, että onClick-määritteen arvo tulee olla funktio, joka suoritetaan klikattaessa. Koska kutsun yhteydessä annetaan myös tuotteen id parametrina, on funktiokutsu käärittävä nimettömäksi funktioksi, jotta handlePurchase-funktiota ei kutsuta renderöinnin yhteydessä.

Näiden lisäysten jälkeen voit ostaa tuotteen, jos sinulla on siihen varallisuutta.

Tuotteen hinta ei vielä kasva, kun tuotetta ostetaan. Myöskään yhdellä napautuksella saatavien sitruunoiden määrä ei muutu, vaikka ostaisit kuinka monta tuotetta. Nämä toiminnallisuudet toteutetaan seuraavaksi.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää tuotteen ostokäsittelijän"

lisää tuotteen ostokäsittelijän -commit

React 101

Ostotapahtuman käsittely

Muutosten vienti versiohallintaan