Formulář¶

Formuláře v HTML implikují úmysl odeslání dat někam dále (typicky na nějaký server). K samotnému odeslání nejsou nutně vyžadovány, ale je to good practice.
Následující code snippet obsahuje trochu složitější konstrukci - samostatné stránky, která poskytuje textový input a tlačítko, které odešle obsah inputu na server.

//import reactu
import React from "react";
//import hooku z knihovny
import {useState, useEffect} from "react";
//nacteni funkce ze service, ktera vola endpoint serveru
//samotny fetch na server a komponenta oddelena - dobra konvence
import requestDocuments from "../../api/SearchAPI";
//import samotnych komponent
import SearchBar from "../../components/SearchBar";
import Button from "../../components/Button";
import List from "../../components/List";
//import vlastniho datoveho typu (rozhrani)
import {ArticleListItems} from "../../lib/global/datatypes";

const Search = () => {
    //vlastni funkce, ktera se zavola pri odeslani formulare
    //event.preventDefault() je dulezity, jinak dojde k redirectu tam, kam formular ukazuje
    //v tomto pripade neukazuje "nikam" - provede se refresh stranky, to urcite neni chtene chovani
    const fetchSearchResults = async (event:React.FormEvent) =>{
        event.preventDefault();
        const res = await requestDocuments(searchQuery);
        setDocuments(res);
        setLoaded(true);
    }
    //react hook
    useEffect(()=>{
        //V tomto pripade neni nutne tento hook pouzit, protoze odesilany formular vyvolava fetch na server
        //ale je zde mozne napsat nejakou logiku - napriklad vykreslit progress bar
        //mirne snizime vykon aplikace, ale radikalne zvysime UX
        console.log(retrievedDocuments);
    });
    //samotny stav komponent - perzistentni uloziste v ramci zivotniho cyklu komponenty
    //co tato syntaxe semanticky rika - vytvor promennou searchQuery a funkce setSearchQuery, ktera nastavi hodnotu teto
    //promenne
    // useState("") - defaultni hodnota promenne searchQuery je nic (undefined)
    //tato syntaxe neni typescriptova - je mozne ji pouzit, ale vhodnejsi je konstrukce nize
    const [searchQuery, setSearchQuery] = useState("");
    //Ekvivalent konstrukce vyse, pouze je zde zanesen vlastni datovy typ ArticleListItems
    //tim tedy deklarujeme, ze promenna retrievedDocuments je typu ArticleListItems
    const [retrievedDocuments, setDocuments] = useState<ArticleListItems|undefined>();
    const [loaded,setLoaded] = useState(false);

    //id inputu
    const containerId: string = "search-bar-form";
    //vykresli celou stranku tvorenou komponentami
        return(
        <div className={"container"}>
            <div id={"search-bar-container"}>
                <h1 className={"subtitle"}>Vyhledejte informaci</h1>
                //kdyz je odeslan formular, tak zavolam vlastni funkci - fetchSearchResults
                <form onSubmit={fetchSearchResults}>
                    //pouziti komponent pro vytvoreni obsahuje stranky
                    // a predavani vlastnosti komponenty (containerId, query, setQuery)
                    //dobre pravidlo v reactu - callbacky predavame shora dolu (tedy od rodice detem)
                    // a eventy bublaji zdola nahoru (tedy v potomky nastane udalost a potomek zavola predany callback)
                    <SearchBar containerId={containerId} query={searchQuery} setQuery={setSearchQuery}/>
                    <Button className={"button button-submit"} id={"submit_button"} text={"Vyhledat dokumenty"}/>
                </form>
                //podminene vykresleni komponenty - pokud mam nactena data, tak vykresli komponentu List
                //jinak ne
                {loaded && <List articles={retrievedDocuments?.articles}/>}
            </div>
        </div>
    )
}
export default Search;