Acest laborator reprezinta integrarea frontend-ului cu backend-ul creat pentru aceasta aplicatie. Vom introduce o biblioteca importanta: Axios, cu care vom putea face aceasta integrare.

Cum sa interactionati cu un server, care sunt tipurile de cereri si cum sa manipulam raspunsul.

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. Acesti interceptori ne pot ajuta in 2 moduri:

1. Daca vrem sa modificam orice cerere inainte sa o trimitem (ex: sa atasam un header in plus)
2. Daca vrem sa gestionam datele primite de la server

In cazul nostru, nu a trebuit sa folosim acesti interceptori.

import axios from "axios";
import { base } from "./Api";

const axiosInstance = axios.create({
    baseURL: base,
    timeout: 1000,
});

export default axiosInstance;