Podle času

Program má jít v pořadí, v jakém kapely hrají, ale v kapely.js jsou kapely v pořadí, v jakém se přihlásily. Řazení znáte z kurzu JavaScriptu: sort() s porovnávací funkcí. Časy jsou texty, takže je porovnejte pomocí localeCompare():

const podleCasu = [...kapely].sort((a, b) => a.cas.localeCompare(b.cas));

Texty se porovnávají znak po znaku, takže se časy seřadí správně, pokud mají všechny stejný tvar: "09:00" je před "18:30", ale "9:00" by bylo až za ním, protože 9 je za 1. Naše časy mají hodiny vždy dvoumístné.

Proč [...kapely]? sort() nové pole nevytváří, řadí přímo to původní. Tady je to pole kapely, které importuje celá aplikace z kapely.js. Komponenta, která by ho seřadila, by tím změnila pořadí i všem ostatním komponentám, a to jen tím, že se vykreslila. Komponenty data, která dostanou, nemění: jen se na ně dívají a ukazují je. (V lekcích o stavu uvidíte, že React by si takové změny ani nevšiml.) Seřaďte proto kopii: vytvoří ji tři tečky a sort() pak seřadí jen ji.

Seřazenou kopii pak můžete filtrovat a kapely každého dne zůstanou seřazené podle času. Funguje to i obráceně: filter() vytváří nové pole, takže jeho výsledek smíte řadit i bez kopie. kapely.filter(…).sort(…) změní jen to nové pole.

Typická chyba je kapely.sort(…) bez kopie. Stránka možná vypadá dobře, ale seřazené je teď i pole v kapely.js, a v tomhle pořadí ho dostane každá další část aplikace.