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

website/pages/functions/[slug].js

@@ -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;

website/pages/functions/index.js

@@ -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({ 

website/pages/index.js

@@ -27,7 +27,7 @@ const Home = () => {
                     {/* Slide 1 */}
                     <div className="row align-items-center justify-content-center">
                         <div className="col-24">
-                            <h1 className="Home__title-important important">FunctionProject</h1>
+                            <h1 className="title-important">FunctionProject</h1>
                             <p className="Home__description">
                                 Apprenez la programmation grâce à l'apprentissage par projet alias fonction.<br/>
                                 Découvrez la liste des fonctions disponibles : 
@@ -43,7 +43,7 @@ const Home = () => {
                     {/* Slide 2 */}
                     <div className="row align-items-center justify-content-center">
                         <div className="col-24">
-                            <h1 className="Home__title-important important">Code Source</h1>
+                            <h1 className="title-important">Code Source</h1>
                             <p className="Home__description">
                                 Le partage est essentiel afin de progresser. <br/>
                                 Par conséquent chaque fonction a un article expliquant comment elle fonctionne et <br/>