👌 IMPROVE: Gestion erreur images fonctions

website/components/FunctionCard/FunctionCard.js

@@ -3,7 +3,7 @@ import { useState, forwardRef } from 'react';
 import date from 'date-and-time';
 import Loader from '../Loader';
 import './FunctionCard.css';
-import { API_URL } from '../../utils/config';
+import { API_URL } from '../../utils/config/config';
 
 const FunctionCard = forwardRef((props, ref) => {
 
@@ -13,6 +13,10 @@ const FunctionCard = forwardRef((props, ref) => {
         setIsLoading(false);
     }
 
+    const handleError = (event) => {
+        event.target.src = API_URL + "/images/functions/default.png";
+    }
+
     const isFormOrArticle = (props.type === 'form' || props.type === 'article');
 
     return (
@@ -37,7 +41,7 @@ const FunctionCard = forwardRef((props, ref) => {
 
                 <div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
                     <div className="FunctionCard__top">
-                        <img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={API_URL + props.image} />
+                        <img onLoad={handleLoad} onError={handleError} className="FunctionCard__image" alt={props.title} src={API_URL + props.image} />
                         <h2 className="FunctionCard__title">{props.title}</h2>
                         <p className="FunctionCard__description text-center">{props.description}</p>
                     </div>

website/components/FunctionPage/FunctionComponentTop.js

@@ -6,7 +6,7 @@ import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
 import date from 'date-and-time';
 import { UserContext } from '../../contexts/UserContext';
 import api from '../../utils/api';
-import { API_URL } from '../../utils/config';
+import { API_URL } from '../../utils/config/config';
 import '../FunctionCard/FunctionCard.css';
 
 const FunctionComponentTop = (props) => {
@@ -40,6 +40,10 @@ const FunctionComponentTop = (props) => {
         }
     }
 
+    const handleError = (event) => {
+        event.target.src = API_URL + "/images/functions/default.png";
+    }
+
     return (
         <div className="container-fluid">
             <div className="row justify-content-center text-center">
@@ -49,7 +53,7 @@ const FunctionComponentTop = (props) => {
                         <FontAwesomeIcon onClick={toggleFavorite} { ...(isFavorite) ? { icon: faStar } : { icon: farStar } } title={(isFavorite) ? "Retirer la fonction des favoris" : "Ajouter la fonction aux favoris"} className="FunctionComponent__star-favorite" />
                     }
 
-                    <img className="FunctionComponent__image" src={API_URL + props.image} alt={props.title} />
+                    <img onError={handleError} className="FunctionComponent__image" src={API_URL + props.image} alt={props.title} />
                     <h1 className="FunctionComponent__title title-important">{props.title}</h1>
                     <p className="FunctionComponent__description">{props.description}</p>
                     <div className="FunctionCard__info">

website/components/FunctionPage/FunctionPage.js

@@ -1,5 +1,5 @@
 import { Fragment, useState } from 'react';
-import { API_URL } from '../../utils/config';
+import { API_URL } from '../../utils/config/config';
 import HeadTag from '../HeadTag';
 import FunctionTabsTop from './FunctionTabsTop';
 import FunctionComponentTop from './FunctionComponentTop';

website/pages/admin/[slug].js

@@ -7,7 +7,7 @@ import EditArticleFunction from '../../components/FunctionAdmin/EditArticleFunct
 import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction';
 import redirect from '../../utils/redirect';
 import api from '../../utils/api';
-import { API_URL } from '../../utils/config';
+import { API_URL } from '../../utils/config/config';
 import '../../components/FunctionPage/FunctionTabs.css';
 import '../../public/css/pages/admin.css';
 

website/pages/users/[name].js

@@ -11,7 +11,7 @@ import redirect from '../../utils/redirect';
 import htmlParser from 'html-react-parser';
 import Loader from '../../components/Loader';
 import api from '../../utils/api';
-import { API_URL } from '../../utils/config';
+import { API_URL } from '../../utils/config/config';
 import '../../public/css/pages/profile.css';
 
 const Profile = (props) => {

website/utils/api.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { API_URL } from './config';
+import { API_URL } from './config/config';
 
 const api = axios.create({
     baseURL: API_URL,

website/utils/config/config.js

@@ -0,0 +1 @@
+export const API_URL = "http://localhost:8080";

website/utils/config/config.prod.js

@@ -0,0 +1 @@
+export const API_URL = "https://api.function.divlo.fr";