theoludwig/FunctionProject
theoludwig/FunctionProject
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; 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%;

11
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,8 +33,7 @@ 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__container ${isLoading ? 'd-none' : ''}`}>
@ -48,9 +47,9 @@ const FunctionCard = forwardRef((props, ref) => {
<p className='FunctionCard__publication-date'>{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p> <p className='FunctionCard__publication-date'>{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p>
</div> </div>
</div> </div>
</div> </a>
</Link> </Link>
) )
}) }))
export default FunctionCard export default FunctionCard