## Dokumentace frontendu pro projekt Česká elektronická knihovna ## Struktura souborů v projektu se řídí dle doporučení [oficiální dokumentace knihovny React](https://reactjs.org/docs/faq-structure.html). Struktura projektu po jeho vytvoření zůstala zachována, přibyly pouze adresářové struktury: ***/src/components*** - zde jsou umístěny komponenty aplikace ***/src/components/Data*** - zde se nachází schéma pro RJSF (React Json Schema Form) ### Komponenty ### Seznam jednotlivých komponent a jejich funkce v rámci aplikace : ####**/src**#### - ***index.js*** - slouží k vykreslení komponenty App.js do těla elementu s id="root" souboru index.html - ***App.js*** - slouží k ukládání a stahování informací o uživateli z Local storage. Tyto informace ukládá ve state objektech a následně je distribuuje pomocí React.context mezi všechny komponenty. Tímto způsobem komponenty vědí, který uživatel je přihlášen a dle jeho role mu přidělí příslušné pravomoce napříč celou aplikací. Tato komponenta se také stará o routování a jejich správné rozdělení dle uživatelské role. - ***App.css*** - slouží pouze ke stylování elementů body a html ####**/src/components**#### Většina těchto komponent využívá pro stylování výhodné sety stylů definování pod jednou funkcí pomocí *usestyles* a *makestyles* funkcí knihovny Material UI. Stejně tak namísto klasických html elementů jsou používány Material UI komponenty, které právě korespondují z výše zmíněným způsobem stylování. Tyto komponenty jsou v podstatě html elementy s již předdefinovanými styly a širokými možnostmi úprav. - ***About.js*** - Jejím účelem je zobrazení infromací o projektu. - ***Home.js*** - Jedná se komponentu vykreslující obsah na domovskou stránku. Momentálně vykresluje komponentu Header.js. - ***Header.js*** - Slouží k vykreslení textu na domovské stránce - ***Navbar.js*** - Komponenta vykreslující navigační bar. Pro určení položek k vykreslení dle uživatelské role se používá React.context. Samotný navbar má 2 módy. Jeden z nich je tkz. hamburgerové menu využívané zejména na menší obrazovky s rozlišením do 600px jako jsou například mobilní zařízení. Druhý mód je statické menu definované od rozlišení nad 600px. - ***Library.js*** - Komponenta vykreslující sekci Knihovna. Vrací Material Table s definovanými akcemi pomocí funkcí. Obsahuje 2 dialogové okna, které pro své otevření čekají na změnu hodnoty příslušné proměnné. Tato komponenta pro svou činnost, tedy pro provoz tabulky knih, pracuje s REST API. - ***BookManagement.js*** - Komponenta vykreslující sekci Správa sbírek. je postavená na stejném principu jako Library.js. Vrací Material Table, která má pouze definováno více akcí a jim odpovídajích funkcí. Jedna z akcí nazvaná editace knih pomocí history.push naroutuje na stránku komponenty BookEdit a předá potřebné parametry pro další operace. Taktéž využívá REST API a dialogových oken. - ***BookEdit.js*** - Do této komponenty se skrz uživatelské rozhraní lze dostat pouze naroutováním přes komponentu BookManagement.js. Její funkce je využití knihovny React Json Schema Form a dat příchozích z komponenty BookManagement.js pro vytvoření formulářů odpovídajícím schématu uloženém v EditData.js. Formuláře jsou vykreslovány pomocí stylů knihovny Ant Design (Antd). - ***MyBooks.js*** - Komponenta vykreslující sekci Mé knihy. Pomocí REST API pracuje se seznamy knih. Pomocí příslušných funkcí je ukládá, maže, mění jejich obsah a umožňuje přechod na stránku s rozšířenými filtry komponenty ExtendedFilters.js. Taktéž obsahuje dialogová okna. - ***ExtendedFilters.js*** - Do této komponenty se skrz uživatelské rozhraní lze dostat pouze naroutováním přes komponentu MyBooks.js. Každý z definovaných nástrojů má svou vlastní funkci, která provádí volání na REST API pro získání potřebných dat. - ***UserManagement.js*** - Komponenta vykreslující sekci Správa uživatelů. Podobně jako Library.js a BookManagement.js obsahuje Material Table tabulku s definovanými akcemi spouštějícími příslušné funkce. - ***Register.js*** - Komponenta vykreslující Registrační formulář pro uživatele. Využívá komponenty Material UI umožňující skrz properties (props) ošetřovat nesprávné vstupy nebo přidávat UX prvky. Pracuje s REST API. V případě správného vstupu v registračním formuláři data odešle a uživatel je zaregistrován. Pokud dojde k úspěchu nebo i chybě, jsou tyto informace prostřednictvím textu prezentovány uživateli. K této prezentaci je využívána knihovna Animate On Scroll Library (AOS). - ***Login.js*** - Komponenta vykreslující Přihlašovací formulář. Pomocí REST API se provádí autentizace porovnáním zaheshovaných hesel s kombinací uživatelského jména. V případě, že již byl uživatel přihlášen dříve, budou v Local Storage uloženy potřebné informace k jeho okamžitému přihlášení, které se do komponenty Login.js dostanou skrz React.context. Stejně jako Register.js využívá tato komponenta AOS. - ***Logout.js*** - Komponenta sloužící pouze k vymázání React.context, tedy údajů o uživateli, což vede k jeho odhlášení. - ***UserContext.js*** - Zde je nadefinována šablona React.context, která se v průběhu průchodu komponentama vyplňuje dle potřeby. - ***BackButton.js*** - Komponenta reprezentující tlačítko, které provede přesměrování na předchozí stránku. Je využívána v komponentách BookEdit.js a ExtendedFilters.js. ####**/src/components/Data**#### - ***EditData.js*** - soubor obsahuje schéma ve formátu json sloužící k vykreslení formulářů pomocí knihovny React Json Schema Form. Tento proces má na starosti komponenta BookEdit. ### Využívané knihovny ### - ***ReactJS*** - ***Material UI*** - ***React Json Schema Form*** - ***Ant Design (Antd)*** - ***Animate On Scroll Library (AOS)***