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
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; margin: 0 0 50px 0;
cursor: pointer; cursor: pointer;
transition: all .3s; transition: all .3s;
color: var(--text-color);
text-decoration: none !important;
} }
.FunctionCard__container { .FunctionCard__container {
height: 100%; height: 100%;

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

@@ -1,11 +1,11 @@
import Link from 'next/link' import Link from 'next/link'
import { useState, forwardRef } from 'react' import { useState, forwardRef, memo } from 'react'
import date from 'date-and-time' import date from 'date-and-time'
import Loader from '../Loader' import Loader from '../Loader'
import { API_URL } from '../../utils/config/config' import { API_URL } from '../../utils/config/config'
import './FunctionCard.css' import './FunctionCard.css'
const FunctionCard = forwardRef((props, ref) => { const FunctionCard = memo(forwardRef((props, ref) => {
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const handleLoad = () => { const handleLoad = () => {
@@ -33,24 +33,23 @@ const FunctionCard = forwardRef((props, ref) => {
} }
> >
{/* FunctionCard a une hauteur pendant chargement */} {/* 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'>
<div className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}> <img onLoad={handleLoad} onError={handleError} className='FunctionCard__image' alt={props.title} src={API_URL + props.image} />
<div className='FunctionCard__top'> <h2 className='FunctionCard__title'>{props.title}</h2>
<img onLoad={handleLoad} onError={handleError} className='FunctionCard__image' alt={props.title} src={API_URL + props.image} /> <p className='FunctionCard__description text-center'>{props.description}</p>
<h2 className='FunctionCard__title'>{props.title}</h2> </div>
<p className='FunctionCard__description text-center'>{props.description}</p> <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>
<div className='FunctionCard__info'> </a>
<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>
</Link> </Link>
) )
}) }))
export default FunctionCard export default FunctionCard