Hankittavissa olevat tuotteet

Tuotelista sisältää kaikki tuotteet, vaikka loppupään tuotteita ei ole mahdollista hankkia vielä pitkään aikaan. Tuotelista olisi toimivampi, jos listalla näkyisi aina seuraava uusi hankittava tuote, kun käyttäjä on ostanut edellisestä vähintään yhden kappaleen. Toteutetaan seuraavaksi tämä toiminnallisuus.

Luo src/utils-kansioon uusi tiedosto, anna sen nimeksi getPurchasableItems.js ja sijoita sen sisällöksi seuraava ohjelmakoodi:

const getPurchasableItems = (items) => {
  // Taulukko, johon ostettavissa olevat tuotteet kootaan.
  let purchasableitems = [];
  // Lähtökohtaisesti kaikkia ostettvia tuotteita ei ole listattu.
  let allItemsListed = false;
  // Käydään tuotteet yksitellen lävitse.
  items.forEach(item => {
    // Tarkista, onko ostettavat tuotteet listattu.
    if (!allItemsListed) {
      // Ei ole, lisätään tuote listaan.  
      purchasableitems.push(item);
      // Jos tuotteen määrä on nolla, niin ei listata enempää tuotteita. 
      if (item.qty == 0) {
        allItemsListed = true;
      }
    }
  });
  // Palautetaan koostettu taulukko.
  return purchasableitems;
}

export default getPurchasableItems;

Tämä funktio käy tuotelistan lävitse ja poimii palautettavaan listaan mukaan ne tuotteet, jotka käyttäjä on ostanut ja niiden lisäksi seuraava, jota ei ole vielä hankittu.

Huomaa, että voimme olettaa, että listan välissä ei ole ostamattomia tuotteita, koska käyttäjälle tarjotaan seuraavaa tuotetta vasta, kun hän on ostanut edellisen.

Hyödynnetään seuraavaksi tätä funktiota. Muokkaa src/pages-kansiossa olevaa Store.jsx-tiedostoa seuraavasti:

• Lisää tiedoston alkuun seuraava import-tuonti:

  import getPurchasableItems from '../utils/getPurchasableItems';
  

• Muuta ennen return-lausetta sijaitseva map-funktiokutsu seuraavanlaiseksi:

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

  Koodirivi muuttui niin, että kutsun yhteydessä tullut storeitems-lista ajetaan getPurchasableItems-funktion kautta, jolloin tuotelistalle renderöidään ainoastaan ne tuotteet, jotka on hankittavissa.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää hankittavien tuotteiden suodatuksen"

lisää hankittavien tuotteiden suodatuksen -commit