Acest laborator reprezinta integrarea frontend-ului cu backend-ul creat pentru aceasta aplicatie. Vom introduce un pachet important, cel pentru axios, Axios, cu care vom putea face aceasta integrare.
Cum sa interactionati cu un server, cum sa folositi Axios pentru a face cereri si cum sa manipulam raspunsul.
Mai jos puteti vedea un exemplu din documentatia celor de la react-hook-form. Cel mai important feature este register care paseaza urmatoarele proprietati fiecarui input:
Prin aceste proprietati, se vor actualiza campurile, valorile finale fiind returnate de getValues().
import React from "react"; import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, watch, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); console.log(watch("example")); // watch input value by passing the name of it return ( /* "handleSubmit" will validate your inputs before invoking "onSubmit" */ <form onSubmit={handleSubmit(onSubmit)}> {/* register your input into the hook by invoking the "register" function */} <input defaultValue="test" {...register("example")} /> {/* include validation with required or other standard HTML validation rules */} <input {...register("exampleRequired", { required: true })} /> {/* errors will return when field validation fails */} {errors.exampleRequired && <span>This field is required</span>} <input type="submit" /> </form> ); }
Axios este un client HTTP pentru node.js sau pentru browser. Cu ajutorul acestuia putem sa:
npm install axios
Pentru a avea toate informatiile intr-un loc, vom crea un fisier in care sa tinem toate rutele.
const base = "https://localhost:7002/api/v1/"; const routes = { books: { addBook: "Books/addBook", getAll: "Books/viewAllBooks", getBook: (id) => `Books/viewStatusAboutBook/${id}`, deleteBook: (id) => `Books/deleteBook/${id}`, }, metrics: { getBook: (id) => `Metrics/metricsAboutBook/${id}`, }, rentals: { rentBook: "Rentals/rentBook", myRentals: "Rentals/viewMyRentals", returnBook: (id) => `Rentals/returnBook/${id}`, }, profile: { setupProfile: "Profiles/registerProfile", getProfile: "Profiles/viewProfile", }, }; export { base, routes };
De ce o instanta de Axios? Pentru ca in diferite cazuri avem nevoie de o configurare mai specifica pentru interactiunea cu backend-ul. De asemenea, aceasta instanta ne ajuta pentru a folosi interceptori.
import axios from "axios"; import { base } from "./Api"; const axiosInstance = axios.create({ baseURL: base, timeout: 1000, }); export default axiosInstance;
const getAllBooks = useCallback(async () => { const accessToken = await getAccessTokenSilently(); axiosInstance .get(routes.books.getAll, { headers: { Authorization: `Bearer ${accessToken}`, }, }) .then(({ data }) => setBooks(data)); }, [getAccessTokenSilently]); const handleAddBook = (form) => { (async () => { const accessToken = await getAccessTokenSilently(); axiosInstance .post(routes.books.addBook, form, { headers: { Authorization: `Bearer ${accessToken}`, }, }) .then(() => getAllBooks()); })(); };
useEffect(() => { getAllBooks(); }, [getAllBooks]);
Un exemplu de cerere de tip DELETE o avem pentru stergerea unei resurse (carti):
const handleDelete = () => { **confirmare stergere resursa** axiosInstance .delete(routes.books.deleteBook(id)) .then(() => navigate("/books")); };