From 2a19de380eee0481ef9d4c1ad02bc2590572c08a Mon Sep 17 00:00:00 2001 From: Cassandra <45634386+CassandraCH@users.noreply.github.com> Date: Sat, 3 Apr 2021 21:00:12 +0200 Subject: [PATCH] Ajout de commentaires --- back-end/routes/router.js | 6 +- .../src/app/services/recettes.service.ts | 31 +-- .../barre-recherche.component.ts | 193 ++++++++---------- 3 files changed, 106 insertions(+), 124 deletions(-) diff --git a/back-end/routes/router.js b/back-end/routes/router.js index 73926b1c..dbdd4270 100644 --- a/back-end/routes/router.js +++ b/back-end/routes/router.js @@ -29,7 +29,7 @@ router.post('/', (req, res) => { hits: req.body.hits }); - + // le checkKeys => permet d'éviter d'avoir l'erreur "pas de '.' dans une key" nouveau.save({ checkKeys: false }, (err, docs) => { if(!err) res.send(docs); else console.log("Erreur pour créer une nouvelle donnée : "+err); @@ -52,8 +52,8 @@ router.get('/recettes/:id', (req, res) => { recette: recette }); }).catch((error) => { - //Cas où il n'y a pas de résultat - console.log("nous n'avons pas trouvé..."); + // sCas où il n'y a pas de résultat + console.log("Je n'ai pas trouvé..."); return res.status(401).json({ message: "Error", recette: null diff --git a/front-end/src/app/services/recettes.service.ts b/front-end/src/app/services/recettes.service.ts index 42c0537e..f82c1329 100644 --- a/front-end/src/app/services/recettes.service.ts +++ b/front-end/src/app/services/recettes.service.ts @@ -25,7 +25,7 @@ export class RecettesService { private recettesSubject = new Subject(); emitRecetteSubject() { - // je fais un ... afin de destructurer le tableau + // je fais un ... afin de destructurer le tableau // renvoyés une copie et non l'original return this.recettesSubject.next([...this.tabRecettes]); } @@ -38,9 +38,9 @@ export class RecettesService { getTabRecettes(): Recette[]{ return this.tabRecettes; } - // Technique pas optimale mais seule solution trouvée pouravoir des résultats car - // sans faire comme ça, nous avions des problèmes car les données arrivaient trop tard - // vu que les requêtes sont asynchones. + // Technique pas optimale mais seule solution trouvée pour avoir des résultats car + // sans faire comme ça, nous avions des problèmes car les données arrivaient après la mise + // à jour de l'afficahge, vu que les requêtes sont asynchones. // IDEE : récupérer tout ce qu'il y a de stocké sur la bdd et en faire une // copie. Lors d'une recherche par l'utilisateur, on vérifie que ce qu'il cherché est // présent dans le tableau. @@ -88,11 +88,12 @@ export class RecettesService { // sinon : on fait une requête à l'api async rechercher(motCle: string){ let trouve = false; + + // toLowerCase permet d'éviter de se préoccuper de la casse motCle = motCle.toLowerCase(); - // si on trouve le mot-clé dans le tableau => on remplit le tableau + // si on trouve le mot-clé dans le tableau => on remplit le tableau avec les données correspondantes this.tableauBDD.find( ({q, hits}) => { - // toLowerCase permet d'éviter de se préoccuper de la casse if(q == motCle) { console.log("J'ai trouvé pour "+motCle); this.ajouterDansTableau(hits); @@ -103,21 +104,21 @@ export class RecettesService { // Si on ne trouve pas dans la bdd => requete à l'api if(!trouve) { console.log("J'ai pas trouvé pour "+motCle+" ==> je demande à l'api"); - // this.viderTableau(); await this.recupererResultatViaAPI(motCle); - // Mise à jour du tableau de la bdd - // this.getRecettesFromBDD(); } } + // Permet de récupérer le résultat de la requête à l'api async recupererResultatViaAPI(motCle: string){ console.log("Appel de l'api en cours..."); const data = await this.requeteApi(motCle); - console.log(data); + // console.log(data); + + // Envoyer les données dans la base de données this.enregistrerDansBDD(data); + // Ajouter les recettes dans le tableau de recettes this.ajouterDansTableau(data['hits']); - } // Methode qui permet de faire une requete à l'api @@ -126,7 +127,7 @@ export class RecettesService { let APP_KEY = "4f1e59bb1fddf09974a0bb3b33de90d8"; return fetch(`https://api.edamam.com/search?app_id=${APP_ID}&app_key=${APP_KEY}&q=${motCle}`).then(response => { - // Si la réponse est valide (=> renvoi 200) : la requêtes est transformée en json et retournée + // Si la réponse est valide (=> renvoi 200) : la requête est transformée en json et retournée if ( response.status >= 200 && response.status < 300 ){ return response.json(); } @@ -136,11 +137,12 @@ export class RecettesService { } }) .catch(error => { - alert(error); + // alert(error); throw new Error('Erreur durant le chargement'); }); } + // Permet de faire un post dans la bdd (ajout d'une nouvelle donnée) enregistrerDansBDD(data){ this.http.post(this.url, data).subscribe( () => { console.log("Enregistrement dans la bdd OK"); }, @@ -153,7 +155,7 @@ export class RecettesService { } - // Renvoi une recette si elle est trouve + // Renvoi une recette si elle est trouve (en fonction de l'id) getRecetteById(id: number){ const recipe = this.tabRecettes.find( (r) => { return r.id === id; @@ -161,7 +163,6 @@ export class RecettesService { return recipe; } - // Vérifie si le tableau de recettes est rempli tabNonVide() { return (this.tabRecettes.length > 0); } diff --git a/front-end/src/app/shared/barre-recherche/barre-recherche.component.ts b/front-end/src/app/shared/barre-recherche/barre-recherche.component.ts index e033bba8..6a77aca0 100644 --- a/front-end/src/app/shared/barre-recherche/barre-recherche.component.ts +++ b/front-end/src/app/shared/barre-recherche/barre-recherche.component.ts @@ -11,110 +11,91 @@ import { Subscription } from 'rxjs'; styleUrls: ['./barre-recherche.component.css'] }) export class BarreRechercheComponent implements OnInit, OnDestroy{ - - rechercheForm: FormGroup; - messageErreur: string; - recetteSubscription: Subscription; - isDisabled: boolean; - recherche: string = ""; - - constructor(private recettesService: RecettesService, - private formBuilder: FormBuilder, - private router: Router) { } - - ngOnInit(): void { - // Récupération des données stockées dans la bdd - // this.recettesService.getRecettesFromBDD(); - this.initForm(); - } - - // Initialisation du formulaire - initForm(){ - // Récupération des données stockées dans la bdd - this.recettesService.getRecettesFromBDD(); - this.rechercheForm = this.formBuilder.group( { recherche: ['', Validators.required] } ); - } - - // Méthode exécutée lors du clic sur le bouton de la barre de recherche - onRecherche(){ - // Recupération de la recherche - this.recherche = this.rechercheForm.get('recherche').value; - - // Vérification que l'utilisateur a saisi quelque chose - if(this.recherche !== ''){ - console.log("Recherche : " + this.recherche); - this.recettesService.setValRecherche(this.recherche); - - this.messageErreur = ''; - // Recherche dans la bdd ou requete via api si pas de résultat - this.recettesService.rechercher(this.recherche).then( - ()=>{ - this.rediriger(this.recettesService.tabNonVide()); - console.log("redirection Ok"); - }, (err) => { - console.log("Erreur : "+err); - } - ); - - // this.recettesService.getRecettesUpdateListener().toPromise(). - - - - // Si au moins un resultat est obtenu (== tableau non vide) - - // if(this.recettesService.tabNonVide()){ - // // redirection vers les resultats de la recherche - // this.router.navigate(['/']).then( - // () => { this.router.navigate(['/results', recherche]) } - // ); - // } - // // cas ou pas de résultat (== tableau vide) - // else { - // // redirection vers la page 'no-result' - // this.router.navigate(['/']).then( - // () => { this.router.navigate(['/results', 'no-result']) } - // ); - // } - - // Réinitialisation de la barre de recherche - this.initForm(); - - // On bloque le bouton - this.onClick(); - } - // Cas ou le champ de recherche est vide => affichage du message d'erreur - else{ - this.messageErreur = "Veuillez saisir quelque chose"; - } - - } - - rediriger(val: boolean){ - if(val){ - // redirection vers les resultats de la recherche - this.router.navigate(['/']).then( - () => { this.router.navigate(['/results', this.recherche]) } - ); - } - else{ - // redirection vers la page 'no-result' - this.router.navigate(['/']).then( - () => { this.router.navigate(['/results', 'no-result']) } - ); - } - } - - // Bloquer l'accès à plusieurs requêtes pendant 5 secondes - onClick() { - this.isDisabled = true; - - setTimeout(() => { - this.isDisabled = false; - }, 5000); - } - - ngOnDestroy(){ - // ne pas oublier => sinon, risque de bugs - this.recetteSubscription.unsubscribe(); - } + // formulaire (input de la barre de recherche) + rechercheForm: FormGroup; + messageErreur: string; + recetteSubscription: Subscription; + isDisabled: boolean; + recherche: string = ""; + + constructor(private recettesService: RecettesService, + private formBuilder: FormBuilder, + private router: Router) { } + + ngOnInit(): void { this.initForm(); } + + // Initialisation du formulaire + initForm(){ + // Récupération des données stockées dans la bdd + this.recettesService.getRecettesFromBDD(); + this.rechercheForm = this.formBuilder.group( { recherche: ['', Validators.required] } ); + } + + // Méthode exécutée lors du clic sur le bouton de la barre de recherche + onRecherche(){ + // Recupération de la recherche + this.recherche = this.rechercheForm.get('recherche').value; + + // Vérification que l'utilisateur a saisi quelque chose + if(this.recherche !== ''){ + console.log("Recherche : " + this.recherche); + this.recettesService.setValRecherche(this.recherche); + + this.messageErreur = ''; + + // Recherche dans la bdd ou requete via api si pas de résultat dans la bdd + this.recettesService.rechercher(this.recherche).then( + () => { + // redirection de l'utilisateur sur la bonne page + this.rediriger(this.recettesService.tabNonVide()); + }, (err) => { + console.log("Erreur : "+err); + } + ); + + // Réinitialisation de la barre de recherche + this.initForm(); + + // On bloque le bouton + this.onClick(); + } + // Cas ou le champ de recherche est vide => affichage du message d'erreur + else{ + this.messageErreur = "Veuillez saisir quelque chose"; + } + + } + + // Permet de rédiger l'utilisateur soit vers la page de résultats, soit vers la page + // 'no-result' + rediriger(val: boolean){ + if(val){ + // redirection vers les resultats de la recherche + this.router.navigate(['/']).then( + () => { this.router.navigate(['/results', this.recherche]) } + ); + } + else{ + // redirection vers la page 'no-result' + this.router.navigate(['/']).then( + () => { this.router.navigate(['/results', 'no-result']) } + ); + } + console.log("redirection OK"); + } + + // Bloquer l'accès à plusieurs requêtes pendant 5 secondes + // Permet de limiter les requêtes à l'api et à la bdd + onClick() { + this.isDisabled = true; + + setTimeout(() => { + this.isDisabled = false; + }, 5000); + } + + ngOnDestroy(){ + // ne pas oublier => sinon, risque de bugs + this.recetteSubscription.unsubscribe(); + } }