From 53330095be58f33712d347320cbc057a512f7e89 Mon Sep 17 00:00:00 2001 From: Divlo Date: Mon, 23 Mar 2020 21:22:41 +0100 Subject: [PATCH] =?UTF-8?q?frontend:=20Syst=C3=A8me=20d'onglets=20pour=20/?= =?UTF-8?q?functions/slug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/FunctionTabs/FunctionTabs.css | 39 ++++++++++++ .../components/FunctionTabs/FunctionTabs.js | 59 +++++++++++++++++++ website/pages/functions/[slug].js | 59 +++++++++++++++---- website/pages/functions/index.js | 10 ++++ website/pages/index.js | 4 +- website/public/css/general.css | 7 ++- .../public/css/pages/FunctionComponent.css | 18 ++++++ website/public/css/pages/index.css | 3 - website/utils/redirect.js | 6 ++ 9 files changed, 185 insertions(+), 20 deletions(-) create mode 100644 website/components/FunctionTabs/FunctionTabs.css create mode 100644 website/components/FunctionTabs/FunctionTabs.js create mode 100644 website/public/css/pages/FunctionComponent.css create mode 100644 website/utils/redirect.js diff --git a/website/components/FunctionTabs/FunctionTabs.css b/website/components/FunctionTabs/FunctionTabs.css new file mode 100644 index 0000000..cae9782 --- /dev/null +++ b/website/components/FunctionTabs/FunctionTabs.css @@ -0,0 +1,39 @@ +.FunctionTabs__nav { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; + border-bottom: 1px solid #d9e2ef; + margin-bottom: -1px; +} +.FunctionTabs__nav-item { + margin-bottom: -1px; + cursor: pointer; +} +.FunctionTabs__nav-link { + color: var(--text-color); + border: 1px solid #0c0b0b38; + border-bottom: 0px; + border-top-left-radius: .375rem; + border-top-right-radius: .375rem; + display: block; + padding: .5rem 1rem; +} +.FunctionTabs__nav-link-active { + border-color: #d9e2ef #d9e2ef #fff; + color: var(--important); +} +.FunctionTabs__nav-link:hover { + border-color: #f1f4f8 #f1f4f8 #d9e2ef; + text-decoration: none; +} + +@media (max-width: 490px) { + .FunctionTabs__nav { + flex-direction: column; + } + .FunctionTabs__nav-link { + border-color: #f1f4f8 #f1f4f8 #d9e2ef; + } +} \ No newline at end of file diff --git a/website/components/FunctionTabs/FunctionTabs.js b/website/components/FunctionTabs/FunctionTabs.js new file mode 100644 index 0000000..2a63705 --- /dev/null +++ b/website/components/FunctionTabs/FunctionTabs.js @@ -0,0 +1,59 @@ +import { Fragment, useState } from 'react'; +import SwipeableViews from 'react-swipeable-views'; +import './FunctionTabs.css'; + +function FunctionTabs(props) { + + const [slideIndex, setSlideIndex] = useState(0); + + return ( + + + {/* Tabs */} +
+
+ +
+
+ + {/* Tabs content */} +
+
+ setSlideIndex(index)} index={slideIndex} enableMouseEvents> + {props.children} + +
+
+ + + ); +} + +export default FunctionTabs; \ No newline at end of file diff --git a/website/pages/functions/[slug].js b/website/pages/functions/[slug].js index 0ddfa78..6cab65b 100644 --- a/website/pages/functions/[slug].js +++ b/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 ( - -
-
-

{slug}

+ + +
+ +
+
+
+ {props.title} +

{props.title}

+

{props.description}

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

{publicationDate}

+
+
+
+ +
+
+ +
Slide 1
+
Slide 2
+
Slide 3
+ +
+
+
); } +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; \ No newline at end of file diff --git a/website/pages/functions/index.js b/website/pages/functions/index.js index f876cef..b020458 100644 --- a/website/pages/functions/index.js +++ b/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({ diff --git a/website/pages/index.js b/website/pages/index.js index 9f3f797..4583350 100644 --- a/website/pages/index.js +++ b/website/pages/index.js @@ -27,7 +27,7 @@ const Home = () => { {/* Slide 1 */}
-

FunctionProject

+

FunctionProject

Apprenez la programmation grâce à l'apprentissage par projet alias fonction.
Découvrez la liste des fonctions disponibles : @@ -43,7 +43,7 @@ const Home = () => { {/* Slide 2 */}

-

Code Source

+

Code Source

Le partage est essentiel afin de progresser.
Par conséquent chaque fonction a un article expliquant comment elle fonctionne et
diff --git a/website/public/css/general.css b/website/public/css/general.css index 9639d9f..dc8f532 100644 --- a/website/public/css/general.css +++ b/website/public/css/general.css @@ -26,9 +26,6 @@ p { font-size: 18px; line-height: 1.9; } -h2 { - font-size: 1.8em; -} a:hover { text-decoration: underline; } @@ -76,6 +73,10 @@ a:hover { .align-items-center { align-items: center; } +.title-important { + color: var(--important); + font-weight: 500; +} a, .important { color: var(--important); text-decoration: none; diff --git a/website/public/css/pages/FunctionComponent.css b/website/public/css/pages/FunctionComponent.css new file mode 100644 index 0000000..501e516 --- /dev/null +++ b/website/public/css/pages/FunctionComponent.css @@ -0,0 +1,18 @@ +.FunctionComponent__top { + display: flex; + align-items: center; + position: relative; + flex-direction: column; + word-wrap: break-word; + box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25); + border: 1px solid black; + border-radius: 1rem; + margin-top: 50px; +} +.FunctionComponent__title { + margin: 0; +} +.FunctionComponent__description { + word-break: break-all; + margin-bottom: 0; +} \ No newline at end of file diff --git a/website/public/css/pages/index.css b/website/public/css/pages/index.css index 8c198f5..aacd2fd 100644 --- a/website/public/css/pages/index.css +++ b/website/public/css/pages/index.css @@ -4,9 +4,6 @@ justify-content: center; align-items: center; } -.Home__title-important { - font-weight: 500; -} .Home__logo-spin { cursor: pointer; } diff --git a/website/utils/redirect.js b/website/utils/redirect.js new file mode 100644 index 0000000..643e8da --- /dev/null +++ b/website/utils/redirect.js @@ -0,0 +1,6 @@ +function redirect (ctx, path) { + ctx.res.writeHead(302, { Location: path }); + ctx.res.end(); +} + +module.exports = redirect; \ No newline at end of file