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

frontend: Système d'onglets pour /functions/slug

Browse Source
This commit is contained in:
Divlo
2020-03-23 21:22:41 +01:00
parent 0f8c1d3569
commit 53330095be
9 changed files with 185 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
website/pages/functions/[slug].js
View File

@ -1,26 +1,61 @@
import { Fragment } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import HeadTag from '../../components/HeadTag';
import FunctionTabs from '../../components/FunctionTabs/FunctionTabs';
import redirect from '../../utils/redirect';
import api from '../../config/api';
import { API_URL } from '../../config/config';
import '../../public/css/pages/FunctionComponent.css';
const FunctionComponent = () => {
const { slug } = useRouter().query;
const FunctionComponent = (props) => {
console.log(props);
// Constantes
const createdAt = new Date(props.createdAt);
const publicationDate = `${('0'+createdAt.getDate()).slice(-2)}/${('0'+(createdAt.getMonth()+1)).slice(-2)}/${createdAt.getFullYear()}`;
return (
<Fragment>
<HeadTag
title={slug}
description={slug}
image={`${API_URL}/images/functions/${slug}.png`}
/>
<div className="container text-center">
<div className="row justify-content-center">
<h1>{slug}</h1>
<HeadTag title={props.title} description={props.description} image={API_URL + props.image} />
<div className="container-fluid">
<div className="container-fluid">
<div className="row justify-content-center text-center">
<div className="FunctionComponent__top col-24">
<img src={API_URL + props.image} alt={props.title} />
<h1 className="FunctionComponent__title title-important">{props.title}</h1>
<p className="FunctionComponent__description">{props.description}</p>
<div className="FunctionCard__info">
<Link href={`/functions?categoryId=${props.categorieId}`}>
<a className="FunctionCard__category" style={{ backgroundColor: props.categorie.color, color: 'inherit' }}>{props.categorie.name}</a>
</Link>
<p className="FunctionCard__publication-date">{publicationDate}</p>
</div>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row justify-content-center">
<FunctionTabs type={props.type}>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</FunctionTabs>
</div>
</div>
</div>
</Fragment>
);
}
export async function getServerSideProps(context) {
const { slug } = context.params;
return api.get(`/functions/${slug}`)
.then((response) => ({ props: response.data }))
.catch(() => redirect(context, '/404'));
}
export default FunctionComponent;

10
website/pages/functions/index.js
View File

@ -1,4 +1,5 @@
import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
import { useRouter } from 'next/router';
import HeadTag from '../../components/HeadTag';
import FunctionCard from '../../components/FunctionCard/FunctionCard';
import Loader from '../../components/Loader';
@ -8,6 +9,8 @@ import useAPI from '../../hooks/useAPI';
const Functions = () => {
const { categoryId } = useRouter().query;
// State de recherche et de catégories
const [, categories] = useAPI('/categories');
const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: "0" });
@ -39,6 +42,13 @@ const Functions = () => {
});
}
// Récupère la catégorie avec la query categoryId
useEffect(() => {
if (categoryId) {
handleChange({ target: { name: "selectedCategory", value: categoryId } });
}
}, [categoryId]);
// Récupère les fonctions si la page change
useEffect(() => {
getFunctionsData().then((data) => setFunctionsData({