Skip to content

Commit

Permalink
fix: flux actualité (#55)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marc-gavanier
marc-gavanier authored Sep 13, 2024
1 parent 79e00f3 commit ed2bce4
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 121 deletions.
5 changes: 4 additions & 1 deletion src/app/(pages)/[...slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import SkipLinksPortal from '@/app/_components/SkipLinksPortal';
import NotFound from '@/app/not-found';
import { getPagesMatchingSlug, toSinglePage } from '@/api/pages';
import { contentId, defaultSkipLinks } from '@/utils/skipLinks';
import { getBreves } from '@/api/breves';
import { byPubicationDate } from '@/ressources/collection-operations';

export const generateMetadata = async ({ params: { slug } }: { params: { slug: string[] } }): Promise<Metadata> => {
const page = toSinglePage(await getPagesMatchingSlug(slug));
Expand All @@ -15,14 +17,15 @@ export const generateMetadata = async ({ params: { slug } }: { params: { slug: s

const Page = async ({ params: { slug } }: { params: { slug: string[] } }) => {
const page = toSinglePage(await getPagesMatchingSlug(slug));
const breves = await getBreves();

if (page == null) return <NotFound />;

return (
<>
<SkipLinksPortal links={defaultSkipLinks} />
<main id={contentId}>
<PageBuilder data={page.Composants} dataArticles={[]} isHome={false} />
<PageBuilder data={page.Composants} dataArticles={[...breves.data].sort(byPubicationDate).slice(0, 3)} isHome={false} />
</main>
</>
);
Expand Down
32 changes: 3 additions & 29 deletions src/app/_components/PageBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,36 +29,10 @@ import { BreadCrumb } from './page-content/BreadCrumb';
import { ToolsDevicesContainer } from './page-content/ToolsDevicesContainer';

export const PageBuilder = ({ data, dataArticles, dataToolsDevices = null, slug = null, isHome }) => {
// const [fluxPublications, setFluxPublications] = useState([]);
// const [fluxActualites, setFluxActualites] = useState([]);
// const [strategiques, setStrategiques] = useState([]);
// const [recherches, setRecherch/es] = useState([]);
// const [bannerTitle, setBannerTitle] = useState(null);
// const pathname = usePathname();

const allComponents = buildComponents(data);
const struct = buildSections(allComponents);
const array = struct[1] ?? [];

// useEffect(() => {
// if (dataArticles.length > 0) {
// const withoutBreves = sortArticles(dataArticles, [0]);
// const onlyStrategiques = sortArticles(dataArticles, [0, 2]);
// const onlyRecherches = sortArticles(dataArticles, [0, 1]);
//
// setFluxPublications(withoutBreves.slice(0, 2));
// setFluxActualites(onlyBreves.slice(0, 3));
//
// setBreves(onlyBreves);
// setStrategiques(onlyStrategiques);
// setRecherches(onlyRecherches);
// }
// }, [dataArticles]);
//
// useEffect(() => {
// setBannerTitle(null);
// }, [pathname]);

return (
<>
{isHome && <Banner />}
Expand Down Expand Up @@ -115,9 +89,9 @@ export const PageBuilder = ({ data, dataArticles, dataToolsDevices = null, slug
return (
<div className='flexrow-container' style={{ marginBottom: marginsBottom[e.espacement_bas] }}>
<div className='grid3'>
{fluxActualites &&
fluxActualites.map((flux) => {
return <VerticalCard key={flux.titre_de_la_carte} data={flux} rows={3} />;
{dataArticles &&
dataArticles.map(({ attributes }) => {
return <VerticalCard key={attributes.titre_de_la_carte} data={attributes} rows={3} />;
})}
</div>
</div>
Expand Down
182 changes: 91 additions & 91 deletions src/app/_components/page-content/VerticalCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,15 @@ type ImageData = {

export type CardData = {
id: string;
type: 'carte-verticale' | 'autre';
type: 'carte-verticale' | 'breve';
espacement_bas: keyof typeof marginsBottom;
label?: 'Evènement' | string;
nom_de_page?: string;
titre_de_la_carte?: string;
image: {
texte_de_la_carte?: string;
publishedAt?: Date;
createdAt?: Date;
image?: {
data: ImageData | null;
};
labels: Label[];
Expand All @@ -38,103 +41,100 @@ type VerticalCardProps = {
text?: string;
};

export const VerticalCard = ({ data, rows, height, width, fontsizeLabel, text }: VerticalCardProps) => {
console.log(data);
return (
<>
{data.type !== 'carte-verticale' && (
<div key={data.id}>
<div
className='fr-card fr-enlarge-link'
style={{
height: '430px',
marginBottom: marginsBottom[data.espacement_bas] || '0px'
}}>
<div className='fr-card__body card-img'>
<div className='fr-card__content'>
<p className={data.label === 'Evènement' ? 'fr-tag jaune' : 'fr-tag rose'}>{data.label}</p>
<h3 className='fr-card__title mt1'>
<Link href={`/${data.nom_de_page}`} className='grey-75'>
{data.titre_de_la_carte}
</Link>
</h3>
</div>
</div>
{data.image.data?.attributes.url && (
<div className='fr-card__header' style={{ height: '200px', overflow: 'hidden' }}>
<img className='fr-responsive-img' src={data.image.data.attributes.url} alt='' loading='lazy' />
</div>
)}
</div>
</div>
)}
{data.type === 'carte-verticale' && (
export const VerticalCard = ({ data, rows, height, width, fontsizeLabel, text }: VerticalCardProps) => (
<>
{data.type !== 'carte-verticale' && (
<div key={data.id}>
<div
key={data.id}
className='mt2 mb2'
className='fr-card fr-enlarge-link'
style={{
display: 'flex',
justifyContent: rows > 1 ? 'center' : data.position === 'Centre' ? 'center' : '',
height: '430px',
marginBottom: marginsBottom[data.espacement_bas] || '0px'
}}>
<div className='fr-card fr-enlarge-link'>
<div className='fr-card__body card-img'>
<div className='fr-card__content'>
<p className={data.label === 'Evènement' ? 'fr-tag jaune' : 'fr-tag rose'}>{data.label}</p>
<h3 className='fr-card__title mt1'>
<Link href={`/${data.nom_de_page}`} className='grey-75'>
{data.titre_de_la_carte}
</Link>
</h3>
</div>
</div>
{data.image?.data?.attributes.url && (
<div className='fr-card__header' style={{ height: '200px', overflow: 'hidden' }}>
<img className='fr-responsive-img' src={data.image.data.attributes.url} alt='' loading='lazy' />
</div>
)}
</div>
</div>
)}
{data.type === 'carte-verticale' && (
<div
key={data.id}
className='mt2 mb2'
style={{
display: 'flex',
justifyContent: rows > 1 ? 'center' : data.position === 'Centre' ? 'center' : '',
marginBottom: marginsBottom[data.espacement_bas] || '0px'
}}>
<div className='fr-card fr-enlarge-link'>
<div
className='fr-card__body card-img mb3'
style={{
height: height && rows === 1 ? height : '',
width: width && rows === 1 ? width : ''
}}>
<div
className='fr-card__body card-img mb3'
className='fr-card__content'
style={{
height: height && rows === 1 ? height : '',
width: width && rows === 1 ? width : ''
paddingLeft: '16px',
paddingRight: '16px',
paddingTop: '0px'
}}>
<div
className='fr-card__content'
style={{
paddingLeft: '16px',
paddingRight: '16px',
paddingTop: '0px'
}}>
<div>
{data.labels.length > 0 &&
data.labels.map((label) => (
<span
key={label.titre_du_label}
className={`card-label ${labelColors['Violet']}`}
style={{
fontSize: fontsizeLabel,
color: 'rgb(0,0,185)'
}}>
{label.titre_du_label}
</span>
))}
</div>
<h4 className='mt1'>
<Link
href={data.lien}
target={data.lien.includes('https://') ? '_blank' : undefined}
style={{ color: '#000091' }}>
{data.titre_du_lien}
</Link>
</h4>
<p>
<strong>{data.texte_en_valeur}</strong> {text && text.length > 0 ? text : data.texte}
</p>
<i className='ri-arrow-right-line vertical-card-arrow'></i>
<div>
{data.labels.length > 0 &&
data.labels.map((label) => (
<span
key={label.titre_du_label}
className={`card-label ${labelColors['Violet']}`}
style={{
fontSize: fontsizeLabel,
color: 'rgb(0,0,185)'
}}>
{label.titre_du_label}
</span>
))}
</div>
<h4 className='mt1'>
<Link
href={data.lien}
target={data.lien.includes('https://') ? '_blank' : undefined}
style={{ color: '#000091' }}>
{data.titre_du_lien}
</Link>
</h4>
<p>
<strong>{data.texte_en_valeur}</strong> {text && text.length > 0 ? text : data.texte}
</p>
<i className='ri-arrow-right-line vertical-card-arrow'></i>
</div>
{data.image.data?.attributes.url && (
<div className='fr-card__header' style={{ height: '200px', overflow: 'hidden' }}>
<img
className='fr-responsive-img'
src={data.image.data.attributes.url}
alt=''
loading='lazy'
style={{
width: width && rows === 1 ? width : ''
}}
/>
</div>
)}
</div>
{data.image?.data?.attributes.url && (
<div className='fr-card__header' style={{ height: '200px', overflow: 'hidden' }}>
<img
className='fr-responsive-img'
src={data.image.data.attributes.url}
alt=''
loading='lazy'
style={{
width: width && rows === 1 ? width : ''
}}
/>
</div>
)}
</div>
)}
</>
);
};
</div>
)}
</>
);

0 comments on commit ed2bce4

Please sign in to comment.