theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

⚡️ FunctionCard: React.memo + <a> instead of <div>

Browse Source
This commit is contained in:
divlo 2020-08-03 12:21:35 +02:00
parent 5f2de3a108
commit b118bd5981
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
website/components/FunctionCard/FunctionCard.css
View File

@ -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%;

33
website/components/FunctionCard/FunctionCard.jsx
View File

@ -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