From b118bd598178e3cca70347c6aeb084320b2c6159 Mon Sep 17 00:00:00 2001
From: divlo <contact@divlo.fr>
Date: Mon, 3 Aug 2020 12:21:35 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20FunctionCard:=20React.memo?=
 =?UTF-8?q?=20+=20<a>=20instead=20of=20<div>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FunctionCard/FunctionCard.css  |  2 ++
 .../components/FunctionCard/FunctionCard.jsx  | 33 +++++++++----------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/website/components/FunctionCard/FunctionCard.css b/website/components/FunctionCard/FunctionCard.css
index feddaa3..6c3c35d 100644
--- a/website/components/FunctionCard/FunctionCard.css
+++ b/website/components/FunctionCard/FunctionCard.css
@@ -10,6 +10,8 @@
     margin: 0 0 50px 0;
     cursor: pointer;
     transition: all .3s;
+    color: var(--text-color);
+    text-decoration: none !important;
 }
 .FunctionCard__container {
     height: 100%;
diff --git a/website/components/FunctionCard/FunctionCard.jsx b/website/components/FunctionCard/FunctionCard.jsx
index cab8dca..6921bd6 100644
--- a/website/components/FunctionCard/FunctionCard.jsx
+++ b/website/components/FunctionCard/FunctionCard.jsx
@@ -1,11 +1,11 @@
 import Link from 'next/link'
-import { useState, forwardRef } from 'react'
+import { useState, forwardRef, memo } from 'react'
 import date from 'date-and-time'
 import Loader from '../Loader'
 import { API_URL } from '../../utils/config/config'
 import './FunctionCard.css'
 
-const FunctionCard = forwardRef((props, ref) => {
+const FunctionCard = memo(forwardRef((props, ref) => {
   const [isLoading, setIsLoading] = useState(true)
 
   const handleLoad = () => {
@@ -33,24 +33,23 @@ const FunctionCard = forwardRef((props, ref) => {
       }
     >
       {/* FunctionCard a une hauteur pendant chargement */}
-      <div ref={ref} style={isLoading ? { height: '360px', justifyContent: 'center' } : null} className='FunctionCard col-sm-24 col-md-10 col-xl-7'>
+      <a ref={ref} style={isLoading ? { height: '360px', justifyContent: 'center' } : null} className='FunctionCard col-sm-24 col-md-10 col-xl-7'>        
+          {isLoading && <Loader width='125px' height='125px' />}
 
-        {isLoading && <Loader width='125px' height='125px' />}
-
-        <div className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}>
-          <div className='FunctionCard__top'>
-            <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 className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}>
+            <div className='FunctionCard__top'>
+              <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>
+            <div className='FunctionCard__info'>
+              <p className='FunctionCard__category' style={{ backgroundColor: props.categorie.color }}>{props.categorie.name}</p>
+              <p className='FunctionCard__publication-date'>{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p>
+            </div>
           </div>
-          <div className='FunctionCard__info'>
-            <p className='FunctionCard__category' style={{ backgroundColor: props.categorie.color }}>{props.categorie.name}</p>
-            <p className='FunctionCard__publication-date'>{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p>
-          </div>
-        </div>
-      </div>
+      </a>
     </Link>
   )
-})
+}))
 
 export default FunctionCard