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

🎨 Configure standardJS

Browse Source
This commit is contained in:
divlo
2020-08-03 12:04:07 +02:00
parent e22e62a749
commit 58f47c7480
120 changed files with 12271 additions and 10025 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
website/components/FunctionCard/FunctionCard.js
View File

@ -1,58 +1,56 @@
import Link from 'next/link';
import { useState, forwardRef } from 'react';
import date from 'date-and-time';
import Loader from '../Loader';
import { API_URL } from '../../utils/config/config';
import './FunctionCard.css';
import Link from 'next/link'
import { useState, forwardRef } 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 [isLoading, setIsLoading] = useState(true)
const [isLoading, setIsLoading] = useState(true);
const handleLoad = () => {
setIsLoading(false)
}
const handleLoad = () => {
setIsLoading(false);
}
const handleError = (event) => {
event.target.src = API_URL + '/images/functions/default.png'
}
const handleError = (event) => {
event.target.src = API_URL + "/images/functions/default.png";
}
const isFormOrArticle = (props.type === 'form' || props.type === 'article')
const isFormOrArticle = (props.type === 'form' || props.type === 'article');
return (
<Link
{
...(props.isAdmin)
? {
href: '/admin/[slug]',
as: `/admin/${props.slug}`
}
: {
href: (isFormOrArticle) ? '/functions/[slug]' : `/functions/${props.slug}`,
as: `/functions/${props.slug}`
}
}
>
{/* 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'>
return (
<Link
{
...(props.isAdmin) ?
{
href: "/admin/[slug]",
as: `/admin/${props.slug}`
}
:
{
href: (isFormOrArticle) ? "/functions/[slug]" : `/functions/${props.slug}`,
as: `/functions/${props.slug}`
}
}
>
{/* 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"}>
{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>
<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>
</Link>
)
})
<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>
</Link>
);
});
export default FunctionCard;
export default FunctionCard