Žingsnis 08

Šiame žingsnyje apskaičiuosime renginio vertinimo rezultatą ir pagal tai atvaizduosime rezultato skydelį.

08.01 DashboardScore su parametrais

DashboardScore komponentui pridėkime galimybę gauti parametrus. O tada juos atitinkamai pavaizduokime render dalyje.

failas: src/components/DashboardScore.js

-export default function DashboardScore() {
+export default function DashboardScore({likes, dislikes, onLikeClick, onDislikeClick}) {
  return (
    <div className="dashboard-score">
      <div className="dashboard-score__box">
-       <h4 className="dashboard-score__scoreboard-item">0</h4>
-       <ScoreIcon score={1}/>
+       <h4 className="dashboard-score__scoreboard-item">{likes || 0}</h4>
+       <ScoreIcon score={1} onClick={onLikeClick}/>
      </div>
      <div className="dashboard-score__scoreboard-item">
        <ScoreSeparatorIcon />
      </div>
      <div className="dashboard-score__box">
-       <ScoreIcon score={-1}/>
-       <h4 className="dashboard-score__scoreboard-item">0</h4>
+       <ScoreIcon score={-1} onClick={onDislikeClick}/>
+       <h4 className="dashboard-score__scoreboard-item">{dislikes || 0}</h4>
      </div>
    </div>
  );
}

Po šio pakeitimo, niekas vizualiai nepasikeitė. Ir tai yra svarbu.

Aptarkime, ką mes perdavėme ir kam visa tai galime panaudoti.

08.02 rezultato skaičiavimas Dashboard

Kad komponentas DashboardScore parodytų teisingą rezultatą, iš kažkur turime jį gauti. Arba patys apskaičiuoti.

Dabar šiuos veiksmus atliksime tėviniame komponente, t.y. Dashboard.

1. Taigi, Dashboard komponente pasidarykime galimybę gauti duomenis.

2. Ir naudodami filter funkciją apskaičiuokime rezultatą.

3. O tada perduokim kaip parametrus į DashboardScore.

failas: src/components/Dashboard.js

-export default function Dashboard(){
+export default function Dashboard({ feedbackList = [] }){
+  const likes = feedbackList.filter(feedback => feedback.score > 0).length;
+  const dislikes = feedbackList.filter(feedback => feedback.score < 0).length;

  return (
    <div className="dashboard">
      <div className="dashboard__event-title">
        <Typography component="h2" variant="h4" align="center">
          MyLiveEvent
        </Typography>
      </div>
      <div className="dashboard__event-description">
        <Typography color="textSecondary" align="center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Typography>
      </div>
      <div className="dashboard__event-score">
-       <DashboardScore/>
+       <DashboardScore likes={likes} dislikes={dislikes}/>
      </div>
    </div>
  );
}

App komponente turėdami visus pradinius duomenis, perduokime juos gilyn į Dashboard.

(duomenys keliauja gilyn: App -> Dashboard -> DashboardScore)

App.js render dalyje pakoreguokime

failas: src/App.js

// ...
<div className="sub-section">
  <PageBox>
-   <Dashboard/>
+   <Dashboard feedbackList={feedbackList}/>
  </PageBox>
</div>
// ...

Turėtumėte pastebėti, kad renginio vertinimo rezultatas pasikeitė. Jeigu norite App.js komponente galite papildyti masyvo feedbackList reikšmes, į kurias sureaguos mūsų prijungti komponentai.

DĖMESIO ! Tai nėra geras sprendimas.

Vėliau šį sprendimą pakeisime. Aptarkime kodėl tai nėra gerai.

Žingsnį baigiame tuo, kad Dashboard komponentas vaizduoja vertinimo rezultatą (realų), kuris priklauso nuo vartotojų reakcijos duomenų.

Svarbūs momentai

• Kur saugoma programėlės būsena (pagrindinė info)
• passing props
• filter funkcija
• chaining functions
• arrow functions
• komponentų kūrimas apsisaugant nuo klaidų - Default function parameters

---

SEKANTIS ŽINGSNIS →