From b479e1501f522ba2cf84b438863aa34376a7bbcd Mon Sep 17 00:00:00 2001 From: Divlo Date: Tue, 24 Mar 2020 09:54:50 +0100 Subject: [PATCH] frontend: FunctionTabs en plusieurs components --- .../components/FunctionCard/FunctionCard.js | 2 +- website/components/FunctionComponentTop.js | 21 +++++++ .../components/FunctionTabs/FunctionTabs.css | 2 + .../components/FunctionTabs/FunctionTabs.js | 56 +++---------------- .../FunctionTabs/FunctionTabsTop.js | 45 +++++++++++++++ website/contexts/FunctionTabsContext.js | 16 ++++++ website/hooks/useAPI.js | 2 +- website/pages/functions/[slug].js | 45 +++++---------- website/pages/functions/index.js | 4 +- .../public/css/pages/FunctionComponent.css | 5 +- website/{config => utils}/api.js | 0 website/{config => utils}/config.js | 0 12 files changed, 114 insertions(+), 84 deletions(-) create mode 100644 website/components/FunctionComponentTop.js create mode 100644 website/components/FunctionTabs/FunctionTabsTop.js create mode 100644 website/contexts/FunctionTabsContext.js rename website/{config => utils}/api.js (100%) rename website/{config => utils}/config.js (100%) diff --git a/website/components/FunctionCard/FunctionCard.js b/website/components/FunctionCard/FunctionCard.js index 27e4152..71dfdac 100644 --- a/website/components/FunctionCard/FunctionCard.js +++ b/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) => { diff --git a/website/components/FunctionComponentTop.js b/website/components/FunctionComponentTop.js new file mode 100644 index 0000000..f6ce7f8 --- /dev/null +++ b/website/components/FunctionComponentTop.js @@ -0,0 +1,21 @@ +import Link from 'next/link'; + +const FunctionComponentTop = (props) => ( +
+
+
+ {props.title} +

{props.title}

+

{props.description}

+
+ + {props.categorie.name} + +

{props.publicationDate}

+
+
+
+
+); + +export default FunctionComponentTop; \ No newline at end of file diff --git a/website/components/FunctionTabs/FunctionTabs.css b/website/components/FunctionTabs/FunctionTabs.css index cae9782..95bac97 100644 --- a/website/components/FunctionTabs/FunctionTabs.css +++ b/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; diff --git a/website/components/FunctionTabs/FunctionTabs.js b/website/components/FunctionTabs/FunctionTabs.js index 2a63705..808685d 100644 --- a/website/components/FunctionTabs/FunctionTabs.js +++ b/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 ( - - - {/* Tabs */} -
-
- -
-
- - {/* Tabs content */} -
-
- setSlideIndex(index)} index={slideIndex} enableMouseEvents> - {props.children} - -
-
- - +
+ setSlideIndex(index)} index={slideIndex} enableMouseEvents> + {props.children} + +
); } diff --git a/website/components/FunctionTabs/FunctionTabsTop.js b/website/components/FunctionTabs/FunctionTabsTop.js new file mode 100644 index 0000000..e6ab3b6 --- /dev/null +++ b/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 ( +
+
+ +
+
+ ); +} + +export default FunctionTabsTop; \ No newline at end of file diff --git a/website/contexts/FunctionTabsContext.js b/website/contexts/FunctionTabsContext.js new file mode 100644 index 0000000..f080886 --- /dev/null +++ b/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 ( + + {props.children} + + ); +} + +export default FunctionTabsContextProvider; \ No newline at end of file diff --git a/website/hooks/useAPI.js b/website/hooks/useAPI.js index 02589a9..740251c 100644 --- a/website/hooks/useAPI.js +++ b/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 diff --git a/website/pages/functions/[slug].js b/website/pages/functions/[slug].js index 6cab65b..0d1d967 100644 --- a/website/pages/functions/[slug].js +++ b/website/pages/functions/[slug].js @@ -1,53 +1,36 @@ -import { Fragment } from 'react'; -import Link from 'next/link'; +import FunctionTabsContextProvider from '../../contexts/FunctionTabsContext'; 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_URL } from '../../config/config'; +import api from '../../utils/api'; +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 ( - +
-
-
-
- {props.title} -

{props.title}

-

{props.description}

-
- - {props.categorie.name} - -

{publicationDate}

-
-
-
-
+ + -
-
- -
Slide 1
-
Slide 2
-
Slide 3
- -
-
+ +
Slide 1
+
Slide 2
+
Slide 3
+
- + ); } diff --git a/website/pages/functions/index.js b/website/pages/functions/index.js index b020458..cc015ba 100644 --- a/website/pages/functions/index.js +++ b/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: [] }); diff --git a/website/public/css/pages/FunctionComponent.css b/website/public/css/pages/FunctionComponent.css index 501e516..1c45d55 100644 --- a/website/public/css/pages/FunctionComponent.css +++ b/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; } \ No newline at end of file diff --git a/website/config/api.js b/website/utils/api.js similarity index 100% rename from website/config/api.js rename to website/utils/api.js diff --git a/website/config/config.js b/website/utils/config.js similarity index 100% rename from website/config/config.js rename to website/utils/config.js