frontend: FunctionTabs en plusieurs components

website/components/FunctionCard/FunctionCard.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { useState, forwardRef } from 'react';
 import Loader from '../Loader';
 import './FunctionCard.css';
-import { API_URL } from '../../config/config';
+import { API_URL } from '../../utils/config';
 
 const FunctionCard = forwardRef((props, ref) => {
 

website/components/FunctionComponentTop.js

@@ -0,0 +1,21 @@
+import Link from 'next/link';
+
+const FunctionComponentTop = (props) => (
+    <div className="container-fluid">
+        <div className="row justify-content-center text-center">
+            <div className="FunctionComponent__top col-24">
+                <img src={props.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">{props.publicationDate}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+);
+
+export default FunctionComponentTop;

website/components/FunctionTabs/FunctionTabs.css

@@ -6,6 +6,7 @@
     list-style: none;
     border-bottom: 1px solid #d9e2ef;
     margin-bottom: -1px;
+    margin-top: 30px;
 }
 .FunctionTabs__nav-item {
     margin-bottom: -1px;
@@ -19,6 +20,7 @@
     border-top-right-radius: .375rem;
     display: block;
     padding: .5rem 1rem;
+    transition: .2s;
 }
 .FunctionTabs__nav-link-active {
     border-color: #d9e2ef #d9e2ef #fff;

website/components/FunctionTabs/FunctionTabs.js

@@ -1,58 +1,18 @@
-import { Fragment, useState } from 'react';
+import { useContext } from 'react';
+import { FunctionTabsContext } from '../../contexts/FunctionTabsContext';
 import SwipeableViews from 'react-swipeable-views';
 import './FunctionTabs.css';
 
 function FunctionTabs(props) {
 
-    const [slideIndex, setSlideIndex] = useState(0);
+    const { setSlideIndex, slideIndex } = useContext(FunctionTabsContext);
 
     return (
-        <Fragment>
+        <div className="container-fluid">
-
+            <SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex} enableMouseEvents>
-            {/* Tabs */}
+                {props.children}
-            <div className="container">
+            </SwipeableViews>
-                <div className="row justify-content-center">
+        </div>
-                    <ul className="FunctionTabs__nav">
-                        {(props.type !== 'article') &&
-                            <li className="FunctionTabs__nav-item">
-                                <a 
-                                    className={`FunctionTabs__nav-link ${(slideIndex === 0) ? "FunctionTabs__nav-link-active" : ""}`}
-                                    onClick={() => setSlideIndex(0)}
-                                >
-                                   ⚙️ Utilisation
-                                </a>
-                            </li>
-                        }
-                        <li className="FunctionTabs__nav-item">
-                            <a 
-                                className={`FunctionTabs__nav-link ${((slideIndex === 1 && props.type !== 'article') || (props.type === 'article' && slideIndex === 0)) ? "FunctionTabs__nav-link-active" : ""}`}
-                                onClick={() => setSlideIndex((props.type === 'article') ? 0 : 1)}
-                            >
-                               📝 Article
-                            </a>
-                        </li>
-                        <li className="FunctionTabs__nav-item">
-                            <a 
-                                className={`FunctionTabs__nav-link ${((slideIndex === 2 && props.type !== 'article') || (props.type === 'article' && slideIndex === 1)) ? "FunctionTabs__nav-link-active" : ""}`}
-                                onClick={() => setSlideIndex((props.type === 'article') ? 1 : 2)}
-                            >
-                                📬 Commentaires
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-
-            {/* Tabs content */}
-            <div className="container-fluid">
-                <div className="row justify-content-center">
-                    <SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex} enableMouseEvents>
-                        {props.children}
-                    </SwipeableViews>
-                </div>
-            </div>
-
-        </Fragment>
     );
 }
 

website/components/FunctionTabs/FunctionTabsTop.js

@@ -0,0 +1,45 @@
+import { useContext } from 'react';
+import { FunctionTabsContext } from '../../contexts/FunctionTabsContext';
+import '../FunctionCard/FunctionCard.css';
+
+const FunctionTabsTop = (props) => {
+
+    const { setSlideIndex, slideIndex } = useContext(FunctionTabsContext);
+
+    return (
+        <div className="container">
+            <div className="row justify-content-center">
+                <ul className="FunctionTabs__nav">
+                    {(props.type !== 'article') &&
+                        <li className="FunctionTabs__nav-item">
+                            <a 
+                                className={`FunctionTabs__nav-link ${(slideIndex === 0) ? "FunctionTabs__nav-link-active" : ""}`}
+                                onClick={() => setSlideIndex(0)}
+                            >
+                                ⚙️ Utilisation
+                            </a>
+                        </li>
+                    }
+                    <li className="FunctionTabs__nav-item">
+                        <a 
+                            className={`FunctionTabs__nav-link ${((slideIndex === 1 && props.type !== 'article') || (props.type === 'article' && slideIndex === 0)) ? "FunctionTabs__nav-link-active" : ""}`}
+                            onClick={() => setSlideIndex((props.type === 'article') ? 0 : 1)}
+                        >
+                            📝 Article
+                        </a>
+                    </li>
+                    <li className="FunctionTabs__nav-item">
+                        <a 
+                            className={`FunctionTabs__nav-link ${((slideIndex === 2 && props.type !== 'article') || (props.type === 'article' && slideIndex === 1)) ? "FunctionTabs__nav-link-active" : ""}`}
+                            onClick={() => setSlideIndex((props.type === 'article') ? 1 : 2)}
+                        >
+                            📬 Commentaires
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}
+
+export default FunctionTabsTop;

website/contexts/FunctionTabsContext.js

@@ -0,0 +1,16 @@
+import React, { createContext, useState } from 'react';
+
+export const FunctionTabsContext = createContext();
+
+function FunctionTabsContextProvider(props) {
+
+    const [slideIndex, setSlideIndex] = useState(0);
+
+    return (
+        <FunctionTabsContext.Provider value={{ slideIndex, setSlideIndex }}>
+            {props.children}
+        </FunctionTabsContext.Provider>
+    );
+}
+
+export default FunctionTabsContextProvider;

website/hooks/useAPI.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api from '../config/api';
+import api from '../utils/api';
 
 /**
  * @param {String} url 

website/pages/functions/[slug].js

@@ -1,53 +1,36 @@
-import { Fragment } from 'react';
+import FunctionTabsContextProvider from '../../contexts/FunctionTabsContext';
-import Link from 'next/link';
 import HeadTag from '../../components/HeadTag';
+import FunctionComponentTop from '../../components/FunctionComponentTop';
+import FunctionTabsTop from '../../components/FunctionTabs/FunctionTabsTop';
 import FunctionTabs from '../../components/FunctionTabs/FunctionTabs';
 import redirect from '../../utils/redirect';
-import api from '../../config/api';
+import api from '../../utils/api';
-import { API_URL } from '../../config/config';
+import { API_URL } from '../../utils/config';
 import '../../public/css/pages/FunctionComponent.css';
 
 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>
+        <FunctionTabsContextProvider>
             <HeadTag title={props.title} description={props.description} image={API_URL + props.image} />
 
             <div className="container-fluid">
 
-                <div className="container-fluid">
+                <FunctionTabsTop type={props.type} />
-                    <div className="row justify-content-center text-center">
+                <FunctionComponentTop { ...props } API_URL={API_URL} publicationDate={publicationDate} />
-                        <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">
+                <FunctionTabs type={props.type}>
-                    <div className="row justify-content-center">
+                    <div className="FunctionComponent__slide text-center">Slide 1</div>
-                        <FunctionTabs type={props.type}>
+                    <div className="FunctionComponent__slide text-center">Slide 2</div>
-                            <div>Slide 1</div>
+                    <div className="FunctionComponent__slide text-center">Slide 3</div>
-                            <div>Slide 2</div>
+                </FunctionTabs>
-                            <div>Slide 3</div>
-                        </FunctionTabs>
-                    </div>
-                </div>
 
             </div>
-        </Fragment>
+        </FunctionTabsContextProvider>
     );
 }
 

website/pages/functions/index.js

@@ -4,7 +4,7 @@ import HeadTag from '../../components/HeadTag';
 import FunctionCard from '../../components/FunctionCard/FunctionCard';
 import Loader from '../../components/Loader';
 import '../../public/css/pages/functions.css';
-import api from '../../config/api';
+import api from '../../utils/api';
 import useAPI from '../../hooks/useAPI';
 
 const Functions = () => {
@@ -13,7 +13,7 @@ const Functions = () => {
 
     // State de recherche et de catégories
     const [, categories]                = useAPI('/categories');
-    const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: "0" });
+    const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: categoryId || "0" });
 
     // State pour afficher les fonctions
     const [functionsData, setFunctionsData]         = useState({ hasMore: true, rows: [] });

website/public/css/pages/FunctionComponent.css

@@ -7,7 +7,7 @@
     box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
     border: 1px solid black;
     border-radius: 1rem;
-    margin-top: 50px;
+    margin-top: 30px;
 }
 .FunctionComponent__title {
     margin: 0;
@@ -15,4 +15,7 @@
 .FunctionComponent__description {
     word-break: break-all;
     margin-bottom: 0;
+}
+.FunctionComponent__slide {
+    margin-top: 30px;
 }