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));
})
}
}/*
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));
//
};
})
//<!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>