Lukujen sieventäminen

Tuotelistan loppupäässä hinnat ovat isoja lukuja, joiden kokoluokkaa on aika vaikea hahmottaa. Lukujen lukemisen helpottamiseksi toteutamme seuraavaksi funktion, joka sieventää lukuja luettavampaan muotoon. Esimerkiksi luku 20800000000 tulostetaan muodossa 20.80 Billion.

1. Luo src-kansioon uusi kansio ja anna sen nimeksi utils. Tähän kansioon kootaan jatkossa erilaisia apufunktioita.

2. Luo src/utils-kansioon uusi tiedosto, anna sen nimeksi shortenNumber.js ja laita sen sisällöksi seuraavat ohjelmarivit:

   const numberMillion = Math.pow(10,6);
   const numberBillion = Math.pow(10,9);
   const numberTrillion = Math.pow(10,12);
   const numberQuadrillion = Math.pow(10,15);
   
   function shortenNumber(number) {
     if (number > numberQuadrillion) {
       return (number / numberQuadrillion).toFixed(2) + " Lemollion";
     } else if (number > numberTrillion) {
       return (number / numberTrillion).toFixed(2) + " Trillion";
     } else if (number > numberBillion) {
       return (number / numberBillion).toFixed(2) + " Billion";
     } else if (number > numberMillion) {
       return (number / numberMillion).toFixed(2) + " Million";
     } else {
       return number;
     }
   }
   
   export default shortenNumber;
   

   Funktion toiminta on suoraviivainen, se saa parametrinaan sievennättävän luvun. Ehtolauseella tutkitaan mitä kokoluokkaa luku on ja sen perusteella luku muutetaan miljooniksi, miljardeiksi ja niin edelleen. Samassa yhteydessä luku pyöristetään kahden desimaalin tarkkuuteen.

3. Avaa src/components-kansiossa oleva Item.jsx-tiedosto ja tee siihen seuraavat muutokset:

   • Lisää tiedoston alkuun seuraava import-rivi:

     import shortenNumber from '../utils/shortenNumber';
     

   • Muuta return-lauseessa {props.item.price}-tekstin sisältävä rivi muotoon:

             {shortenNumber(props.item.price)} <img src={iconLemon} alt="lemons" />
     

Näiden lisäysten jälkeen Store-sivun hinnat ovat luettavammassa muodossa.

Olemme tulostaneet sievennettäviä lukuja jo aiemmin, mutta niiden arvot ovat olleet toistaiseksi niin pieniä, että luettavuuden ongelma ei ole tullut vielä vastaan. Lisätään seuraavaksi sievennys myös balance-arvon tulostukseen Balance-, Booster- ja Header-komponentteihin.y

Harjoitus

Ennen kuin jatkat eteenpäin, niin käy lisäämässä luvun sievennys Balance-, Booster- ja Header-komponentteihin.

Jokaiseen kolmeen komponenttiin tehtävät muutokset ovat periaatteeltaan samat kuin edellä Item-komponenttiin tekemämme muutokset (kohta 3).

Kun olet tehnyt lisäyksesi, niin vertaa niitä alla olevaan vaiheisiin.

1. Avaa src/components-kansiossa oleva Balance.jsx-tiedosto ja muokkaa sitä seuraavasti:

   • Lisää tiedoston alkuun seuraava import-tuonti:

     import shortenNumber from '../utils/shortenNumber';
     

   • Muuta ennen return-lausetta oleva total-arvon poiminta seuraavaksi:

       const total = shortenNumber(props.total);
     

     Vaihtoehtoisesti shortenNumber-funktion kutsun voi sijoittaa myös return-lauseen sisällä total-arvon tulostuksen yhteyteen. Tällöin {total} muuttuisi muotoon {shortenNumber(total)}.

2. Avaa src/components-kansiossa oleva Booster.jsx-tiedosto ja muokkaa sitä seuraavasti:

   • Lisää tiedoston alkuun seuraava import-tuonti:

     import shortenNumber from '../utils/shortenNumber';
     

   • Muuta ennen return-lausetta oleva value-arvon poiminta seuraavaksi:

       const value = shortenNumber(props.value);
     

     Vaihtoehtoisesti shortenNumber-funktion kutsun voi sijoittaa myös return-lauseen sisällä value-arvon tulostuksen yhteyteen. Tällöin {value} muuttuisi muotoon {shortenNumber(value)}.

3. Avaa src/components-kansiossa oleva Header.jsx-tiedosto ja muokkaa sitä seuraavasti:

   • Lisää tiedoston alkuun seuraava import-tuonti:

     import shortenNumber from '../utils/shortenNumber';
     

   • Muuta ehtolauseen ensimmäisestä osasta balance-arvon tulostus muuttamalla {props.balance} muotoon {shortenNumber(props.balance)}.

Näiden muutosten jälkeen sovelluksen tähän mennessä tulostamat luvut sievennetään, vaikka muutosten vaikutus ei vielä tässä vaiheessa tule esille.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää lukujen sievennyksen"

lisää lukujen sievennyksen -commit