6. diel - Databázový klient v React - Navigácia a zdieľané konštanty

V dnešnom React tutoriále si vytvoríme navigáciu na hlavnej stránke. Tiež pridáme zdieľané konštanty a ďalšie utility funkciu.

Vytvorenie navigácie

Teraz keď máme hotový prehľad filmov aj osobností, vytvoríme si navigačné menu v komponente App. To nám umožní jednoducho prepínať medzi zobrazením našich dvoch prehľadov. Na prácu s navigáciou budeme v React potrebovať knižnicu react-router-dom. Presunieme sa preto do priečinka client/ v príkazovom riadku a spustíme príkaz:

npm i react-router-dom@^6.5.0

Nakoniec upravíme kód komponenty App:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
    BrowserRouter as Router,
    Link,
    Route,
    Routes,
    Navigate,
} from "react-router-dom";

import MovieIndex from "./movies/MovieIndex";
import PersonIndex from "./persons/PersonIndex";

export function App() {
  return (
    <Router>
      <div className="container">
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <ul className="navbar-nav mr-auto">
            <li className="nav-item">
              <Link to={"/movies"} className="nav-link">
                Filmy
              </Link>
            </li>

            <li className="nav-item">
              <Link to={"/people"} className="nav-link">
                Osobnosti
              </Link>
            </li>
          </ul>
        </nav>

        <Routes>
      <Route index element={<Navigate to={"/movies"} />} />
          <Route exact path="/movies" element={<MovieIndex/>} />
          <Route exact path="/people" element={<PersonIndex/>} />
        </Routes>
      </div>

    </Router>
  );
}

export default App;

Zdieľané konštanty a funkcie

V našej aplikácii budú rôzne komponenty používať určité spoločné konštantné hodnoty. Tieto konštanty definujeme ako vlastnosti samostatne vyčlenených konštantných objektov. To nám umožní bezpečný prístup k týmto konštantám, zdieľaný medzi komponentmi.

Žánre filmov

V priečinku movies/ vytvoríme zdrojový súbor Genre.js, jeho obsah bude nasledovný:

const Genre = Object.freeze({
    'sci-fi': 'Sci-fi',
    'adventure': 'Dobrodružné',
    'action': 'Akční',
    'romantic': 'Romantické',
    'animated': 'Animované',
    'comedy': 'Komedie',
});

export default Genre;

V objekte Genre sú združené všetky kľúčové slová, predstavujúce žánre filmov podporované v API. Každé slovo má zároveň priradený popis, určený na zobrazenie vo formulárovom elemente <select>.

Rola osobností

Teraz sa presunieme do zložky persons/, kde vytvoríme súbor Role.js s týmto obsahom:

const Role = Object.freeze({
    DIRECTOR: 'director',
    ACTOR: 'actor',
});

export default Role;

Objekt Role obsahuje iba definície dvoch identifikátorov často sa vyskytujúcich v kóde, každý predstavujúci jednu z rolí zastávaných osobou. Má význam pre zlepšenie udržateľnosti kódu.

Formátovanie dátumu

Niektoré hodnoty záznamov sú z databázy načítané v podobe, ktorá nie je dostatočne čitateľná pre užívateľov. Také hodnoty je vhodné prevádzať na čitateľnejší formát pred ich výpisom na stránke.

V našom prípade sa to týka predovšetkým časových údajov (napr. hodnota birthDate pri zázname osobnosti) uložených ako typ Date. Prevod na textovú reprezentáciu vo vhodnom tvare tu nie je úplne priamočiary, do úvahy teda pripadá možnosť ho vyčleniť ako helper.

Presunieme sa do priečinka utils/ (v adresári client/src/), kde vytvoríme súbor dateStringFormatter.js a do neho vložíme kód:

export const dateStringFormatter = (str, locale = false) => {
  const d = new Date(str);

  if (locale) {
    return d.toLocaleDateString("cs-CZ", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  }

  const year = d.getFullYear();
  const month = "" + (d.getMonth() + 1);
  const day = "" + d.getDate();

  return [
    year,
    month.length < 2 ? "0" + month : month,
    day.length < 2 ? "0" + day : day,
  ].join("-");
};

export default dateStringFormatter;

Týmto dnešnú lekciu uzavrieme.