Lekce 15 - Databázový klient v React - Vytváření, úpravy a odstraňování

V minulé lekci, Databázový klient v React - Odkazy na formuláře a API metody, jsme přidali do přehledu filmů a osob odkazy na jejich vytvoření a editaci. Dále jsme rozšířili náš API wrapper o POST, PUT a DELETE požadavky.

V React tutoriálu zprovozníme vytváření, úpravu a odstraňování filmů a osobností pomocí nových funkcí naší API utility.

Vytvoření a úprava záznamů

Nyní máme k dispozici funkce pro jednoduché odesílání POST, PUT a DELETE požadavků na API server. Můžeme tedy dokončit naše formulářové komponenty.

MovieForm

Abychom zprovoznili odesílání formuláře filmů, musíme v souboru movies/MovieForm.jsx dokončit obslužnou funkci handleSubmit(). V té budeme potřebovat pracovat s navigací, abychom se po odeslání formuláře mohli vrátit zpět na přehled filmů na adrese movies/. V MovieForm si proto prvně získáme hook useNavigate(), který nám umožňuje se programově navigovat na stránce.

Prvně si aktualizujeme import s hooky z React Router DOM. Rovnou také upravíme i import na naše API utils, kam dodáme i další funkce:

import { useNavigate, useParams } from "react-router-dom";
import { apiGet, apiPost, apiPut } from "../utils/api";

Dále si získáme navigační objekt, pomocí kterého pak budeme s navigací pracovat. Následující řádek vložíme např. pod řádek s voláním hooku useParams():

...konec náhledu článku...
Pokračuj dál