Discussions

Notification en double si l'article n'existe pas

Image

Salut Louis-Nicolas, 
Pour toutes les autres notifications aucun souci, mais pour l'error si l'article n'existe pas j'ai un doublon de la notification je ne sais pas pourquoi. 

  // useEffect
  useEffect(() => {
    axios.get(`/articles.json?orderBy="slug"&equalTo="${slug}"`)
      .then(response => {
        // if the article does not exist
        if (Object.keys(response.data).length === 0) {
          navigate(routes.HOME, {replace: true});
          toast.error('Cet article n\'existe pas.');
        }

        // if the article exist
        for (let key in response.data) {
          setArticle({
            ...response.data[key],
            id: key,
            date: response.data[key].date.slice(0, 10)
          });
        }
      })
      .catch(error => console.log(error));
  }, [navigate, slug]);
2 réponses
Image
Louis-Nicolas Leuillet
Le 18/07/2023 à 12:24

Salut !

 

Je suis d'accord avec toi. Pour éviter ce double envoi de notification, tu peux ajouter une vérification supplémentaire pour t'assurer que l'erreur est bien liée à l'article manquant en vérifiant le code de statut de la réponse. Voici un exemple de code qui pourrait t'aider :

axios.get(`/articles.json?orderBy="slug"&equalTo="${slug}"`)
  .then(response => {
    // if the article does not exist
    if (Object.keys(response.data).length === 0) {
      navigate(routes.HOME, {replace: true});
      toast.error('Cet article n\'existe pas.');
    } else {
      for (let key in response.data) {
        setArticle({
          ...response.data[key],
          id: key,
          date: response.data[key].date.slice(0, 10)
        });
      }
    }
  })
  .catch(error => {
    if (error.response && error.response.status === 404) {
      navigate(routes.HOME, {replace: true});
      toast.error('Cet article n\'existe pas.');
    } else {
      console.log(error);
    }
  });

Avec cette modification, le code vérifie d'abord si la réponse contient des données pour l'article demandé. Si ce n'est pas le cas, il envoie une notification d'erreur et redirige l'utilisateur vers la page d'accueil. Sinon, il met à jour l'état de l'article comme avant. Si la requête lance une erreur, le code vérifie si la réponse a un statut de 404 avant d'envoyer une notification d'erreur et de rediriger l'utilisateur vers la page d'accueil. Si ce n'est pas le cas, il console l'erreur comme avant.

Image
Simon Honoré
Le 19/07/2023 à 07:14

Merci pour ta réponse mais ça ne changeait rien. J'ai réussi à trouver la solution dans la doc, si jamais ça peut en aider d'autres 😁
Il suffit de rajouter un id au toast : 

toast.error('Cet article n\'existe pas.', {
    toastId: 'articleNotFound'
});
Meilleure réponse
Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.
Discussion résolue

Informations

Créée le 18 juillet 2023 10:34
Dernière activité le 19 juillet 2023 07:14