Tuotekomponentin toteuttaminen

Seuraavaksi toteutamme komponentin, joka huolehtii yksittäisen tuotteen renderöinnistä. Tämä komponentti näyttää toteutettuna seuraavanlaiselta:

Tuotelistan kuvat on sijoitettu erikseen omaan kansioonsa. Valitettavasti emme pysty viittaamaan niihin samalla tavalla kuin aikaisemmin eli tuomalla kuvan import-lauseella ja sitten sijoittamaan kuvan img-elementin src-määritteen arvoksi. Emme myöskään voi käyttää suhteellista polkua, koska polun sijainti poikkeaa kehitysversion ja käännetyn version sisällä.

Kuvapolun selvittämisessä käytämme hyödyksi Vite-dokumentaatiossa olevaa funktiota.

Item-komponentti

Luo src/components-kansioon uusi tiedosto, anna sen nimeksi Item.jsx ja liitä sen sisällöksi seuraava ohjelmakoodi:

import iconLemon from '../assets/lemon.svg';

// Funktio, joka selvittää kuvan polun suoritusaikana.
function getImageUrl(name) {  
  return new URL(`../assets/items/${name}`, import.meta.url).href;
}

function Item(props) {

  // Selvitetään kuvan url.
  const url = getImageUrl(props.item.image);

  return (
    <div className="item">
      <div className="item_icon"><img src={url} alt=""/></div>
      <div className="item_desc">
        {props.item.name}<br/>
        {props.item.price} <img src={iconLemon} alt="lemons" />
      </div>
      <div className="item_qty">{props.item.qty}</div>
    </div>
  );

}

export default Item;

Tuotelistan välitys Store-komponentille

Seuraavaksi tuomme tuotelistan sovellukseen ja välitämme sen komponenttipuuta pitkin Store-komponentille. Muokkaamme seuraavaksi tiedostoja siinä järjestyksessä, missä tuotelista kuljetetaan pääkomponentilta alemmille komponenteille.

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

   • Lisää tiedoston alkuun seuraava rivi, jolla tuomme tuotelistan sovelluksen käyttöön.

     import items from './config/items.js';
     

   • Lisää App-funktion alkuun seuraava ohjelmarivi:

       // Luodaan tilamuuttuja, johon tallennetaan tuotelista.
       const [storeitems,setStoreitems] = useState(items);
     

     Tuotelista tallennetaan myös tilamuuttujaan. Tässä vaiheessa emme vielä hyödynnä tilamuuttujaa, mutta tarvitsemme sitä heti, kun käsittelemme käyttäjän tekemän ostoksen.

   • Välitä tuotelista AppRouter-komponentille muuttamalla render-lause seuraavanlaiseksi:

       return (
         <AppRouter stats={stats} 
                    storeitems={storeitems} 
                    handleClick={handleClick} />
       )
     

     Komponenttikutsuun lisättiin storeitems-määrite, muuten se pysyi samanlaisena.

2. Muokkaa src/components-kansiossa olevaa AppRouter.jsx-tiedostoa seuraavasti:

   • Muokkaa reitittimen määrityksistä Store-komponentin kutsu seuraavanlaiseksi:

             { path: "store", element: <Store stats={props.stats} storeitems={props.storeitems} />},
     

Tuotelistan renderöinti

Nyt tuotelista on kuljetettu App-komponentilta Store-komponentille. Seuraavaksi voimme toteuttaa ohjelmakoodin, joka tulostaan tuotelistan sovellusikkunaan.

Muokkaa src/pages-kansiossa olevaa Store.jsx-tiedostoa seuraavasti:

• Lisää tiedoston alkuun seuraava import-lause:

  import Item from '../components/Item';
  

• Lisää funktion sisälle, ennen return-lausetta seuraava koodirivi:

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

  Tämä koodirivi hyödyntää JavaScriptin taulukoihin sisäänrakennettua map-funktiota, joka käy taulukon alkiot yksi kerrallaan lävitse, suorittaa sille toimenpiteen ja koostaa tuloksen uudeksi taulukoksi. Tässä tilanteessa tuotelistan listan tuotteista muodostetaan yksittäisiä Item-komponentin renderöintejä ja koostetaan ne taulukkoon.

• Muuta return-lausessa TODO items -rivin paikalle seuraava rivi:

          {items}
  

  Tämä sijoittaa edellä map-funktiossa koostetun taulukon div-elementin sisälle.

Näiden muutosten jälkeen Store-sivulle ilmestyi tuotelista.

Tuotelistan tuotteita ei pysty vielä ostamaan, sen toiminnallisuuden toteutamme myöhemmin. Ennen ostotoiminnallisuuden toteuttamista muutamme sovelluksen tulostamia lukuja luettavampaan muotoon.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää tuotelistan"

lisää tuotelistan -commit