FETCHREQUSTclass.md

fetch.class.js

class FETCHrequest {

    constructor(url, requestType, data = null) {
        this.url = url;
        this.requestType = requestType;
        this.data = data;

        // Définition du header de la requête
        this.fetchOptions = {
            method: requestType,
            headers: {
                'Content-Type': 'application/json'
            }
        };

        // Ajouter les données dans les requêtes POST et PUT
        if( this.requestType === 'POST' || this.requestType === 'PUT' || this.requestType === 'DELETE'){
            this.fetchOptions.body = JSON.stringify(data);
        };
    }

    
    sendRequest(){
        return new Promise( (resolve, reject) => {
            fetch( this.url, this.fetchOptions )
            .then( fetchResponse => {
                // Vérifier le status de la requête
                if( fetchResponse.ok ){
                    // Extraire les données JSON de la réponse
                    return fetchResponse.json();
                }
                else{
                    return fetchResponse.json()
                    .then( message => reject(message) )
                };
            })
            .then( jsonData => resolve(jsonData))
            .catch( jsonError => reject(jsonError));
        })
    }
}

app.js

/* 
Déclaration
*/
    const APIurl = 'https://kebabtv.dwsapp.io';
//

/* 
Fonction pour capteerr la soumission d'un formulair
*/
    const formSubmission = (formTag, ...inputs) => {
        return new Promise( (resolve, reject) => {
            // Capter la soumission d'un formulaire puis...
            document.querySelector(formTag).addEventListener('submit', event => {
                // Bloquer le comportement par défaut de l'événement
                event.preventDefault();

                // Création d'un objet pour récupérer les données du formulaire
                let formData = {};

                // Création d'un objet pour les erreurs
                let formErrorObject = {};

                // Récupérer la valeur des inputs
                for( let item of document.querySelectorAll(inputs) ){
                    // Vérifier les champs
                    if( item.value.length < +item.getAttribute('minlength') ){ 
                        // Ajouter les errues du formulaire
                        formErrorObject[item.getAttribute('name')] = 'error';
                    };

                    // Ajouter les données du formulaire
                    formData[item.getAttribute('name')] = item.value;
                };

                // Vérifier les erreurs
                if( formErrorObject === {} ){ return reject(formErrorObject) }
                else{ return resolve(formData) };
            })
        });
    };
//


/* 
Fonction fetch
*/
    // Inscription utilisateur
    const register = (formData) => {
        new FETCHrequest(
            APIurl + '/api/register',
            'POST',
            { 
                email: formData.email, 
                password: formData.password, 
                pseudo: formData.pseudo
            }
        )
        .sendRequest()
        .then( jsonData => console.log(jsonData))
        .catch( jsonError => console.log(jsonError))
    };

    // Conexion utilisateur
    const login = formData => {
        new FETCHrequest(
            APIurl + '/api/login',
            'POST',
            { 
                email: formData.email,
                password: formData.password 
            }
        )
        .sendRequest()
        .then( jsonData => {
            // Stocker lee token utilisateur en Local Storage
            localStorage.setItem('user-token', jsonData.data.token);

            // Récupérer les informations utilisateur grâce au token
            me();
        })
        .catch( jsonError => console.log(jsonError))
    };

    // Récupérer les informations utilisateurs
    const me = () => {
        new FETCHrequest(
            APIurl + '/api/me',
            'POST',
            { token: localStorage.getItem('user-token') }
        )
        .sendRequest()
        .then( jsonData => {
            // Masquer les formulaires Registerr/Login
            document.querySelector('#registerForm').classList.add('hidden')
            document.querySelector('#loginForm').classList.add('hidden')
            console.log(jsonData)
        })
        .catch( jsonError => console.log(jsonError))
    };

    // Rechercher des films par mot-clef
    const search = keyword => {
        // Capter la soumission d'un formulaire puis...

        new FETCHrequest(
            'https://api.themoviedb.org/3/search/movie?api_key=6fd32a8aef5f85cabc50cbec6a47f92f&query=' + keyword,
            'GET'
        )
        .sendRequest()
        .then( jsonData => console.log(jsonData))
        .catch( jsonError => console.log(jsonError))
    }

    // Ajoouteer un film en favoris
    const addFavorite = (paramId, paramTitle) => {
        // Capter la soumission d'un formulaire puis...

        new FETCHrequest(
            APIurl + '/api/favorite',
            'POST',
            { 
                id: paramId, 
                title: paramTitle, 
                token: localStorage.getItem('user-token') 
            }
        )
        .sendRequest()
        .then( jsonData => console.log(jsonData))
        .catch( jsonError => console.log(jsonError))
    };

    // Supprrimer un favoris
    const deleteFavorite = _id => {
        // Capter la soumission d'un formulaire puis...

        new FETCHrequest(
            APIurl + '/favorite/' + _id,
            'DELETE',
            { 
                token: localStorage.getItem('user-token') 
            }
        )
        .sendRequest()
        .then( jsonData => console.log(jsonData))
        .catch( jsonError => console.log(jsonError))
    };
//


/* 
Démarrage de l'interface
*/
    document.addEventListener( 'DOMContentLoaded' , () => {
        // Vérifier la présence d'un token en Local Storage
        if(localStorage.getItem('user-token') !== null){
            // Récupérer les informations utilisateur grâce au token
            me();
        }
        else{
            /* 
            Afficher les formulaires registerForm et loginForm
            */
                document.querySelector('#registerForm').classList.remove('hidden');
                document.querySelector('#loginForm').classList.remove('hidden');
            //

            /* 
            Capter la soumission des formulaires
            */
                formSubmission(
                    '#registerForm', 
                    '#registerForm [name="email"]', 
                    '#registerForm [name="password"]', 
                    '[name="pseudo"]' 
                )
                .then( formData => register(formData))
                .catch( formError => console.log(formError));

                formSubmission(
                    '#loginForm', 
                    '#loginForm [name="email"]', 
                    '#loginForm [name="password"]'
                )
                .then( formData => login(formData))
                .catch( formError => console.log(formError));
            //
        };
    })
//

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>FETCHREQUSTclass</title>
        <style>
            .hidden{
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>FETCHREQUSTclass</h1>

        <form action="#" id="registerForm" class="hidden">
            <input type="text" name="email" required minlength="5">
            <input type="password" name="password" required minlength="5">
            <input type="text" name="pseudo" required minlength="5">
            <button type="submit">Register</button>
        </form>

        <form action="#" id="loginForm" class="hidden">
            <input type="text" name="email" required minlength="5">
            <input type="password" name="password" required minlength="5">
            <button type="submit">Register</button>
        </form>
        
        <script src="./js/fetch.class.js"></script>
        <script src="./js/app.js"></script>
    </body>
</html>