Ostettavissa olevien tuotteiden määrä

Kaupan toiminnallisuudesta puuttuu enää tieto ostettavissa olevien tuotteiden lukumäärästä. Käyttäjä näkee Store-sivulla ostettavien tuotteiden määrän menupalkin ikonin oikeasta yläkulmasta olevasta lukemasta. Näin käyttäjän ei tarvitse turhaan liikkua pääsivun ja Store-sivun väliä tarkistamassa, että joko hänellä riittää saldo tuotteen ostamiseen.

Muokkaa src-kansiossa olevaa App.jsx-tiedostoa seuraavasti:

• Lisää tiedoston alkuun seuraava import-lause:

  import getPurchasableItems from './utils/getPurchasableItems';
  

• Lisää App-funktion sisälle seuraava funktiomäärittely:

    // Laskee niiden tuotteiden lukumäärän, joiden ostamiseen on varaa.
    const countBuyableItems = (items, balance) => {
      let total = 0;
      getPurchasableItems(items).forEach(item => {
        if (item.price <= balance) total++;
      });
      return total;
    }
  

  Tämä funktio käy tuotelistan tuotteen lävitse ja tutkii, onko tuotteen hinta pienempi kuin saldo. Jos on, niin tuote on ostettavissa.

Olemme jo toteuttaneet aikaisemmin ostettavien tuotteiden lukumäärän tulostuksen. Nyt riittää, että tallennamme lukumäärän stats-tilamuuttujaan itemstobuy-avaimen arvoksi. Tämä päivitys täytyy tehdä sekä handleClick- että handlePurchase-funktioissa.

1. Lisää seuraavat ohjelmarivit handleClick-funktion loppupuolelle balance-arvon päivityksen ja setStats-funktiokutsun väliin.

     // Lasketaan ostettavissa olevien tuotteiden lukumäärä.
     newstats.itemstobuy = countBuyableItems(storeitems,newstats.balance);
   

2. Lisää seuraavat ohjelmarivit handlePurchase-funktion loppuosaan juuri ennen setStoreItems- ja setStats-funktiokutsuja.

         // Lasketaan ostettavissa olevien tuotteiden lukumäärä.
         newstats.itemstobuy = countBuyableItems(newstoreitems,newstats.balance);
   

   Huomaa, että tuotelistaa on muokattu aiemmin, joten tässä yhteydessä välitämme muokatun tuotelistan countBuyableItems-funktiolle.

Nyt menualueen Store-kuvakkeen päällä näkyy ostettavissa olevien tuotteiden lukumäärä. Tämä lukumäärä päivittyy jokaisella napautuksella ja tuoteostoksella.

Lisätietoa

Toteuttamamme tapa käy tuotetaulukon lävitse joka kerta, kun käyttäjä napauttaa sitruunan kuvaa tai ostaa tuotteen. Todellisuudessa tätä läpikäyntiä pystyy vähentämään merkittävästi sillä tavalla, että muuttujaan tallennetaan se arvo, jonka jälkeen lukumäärä on tarve laskea uudelleen.

Esimerkiksi kuvan esimerkkitilanteessa seuraava raja-arvo on 70 (seuraavaksi ostettavissa olevan tuotteen hinta). Niin kauan kun saldo on alle tuon raja-arvon, ostettavissa olevien tuotteiden lukumäärää ei tarvitse laskea uudelleen.

Jos käyttäjä ostaa tuotteen, niin silloin sekä raja-arvo että lukumäärä selvitetään.

Nyt ostotoiminnallisuus on kokonaisuudessaan toteutettu. Seuraavaksi siirrymme toteuttamaan Settings-sivun toiminnallisuuksia.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää ostettavien tuotteiden laskennan"

lisää ostettavien tuotteiden laskennan -commit