Hotfix et Modèle (backend) complet d'une fonction

api/controllers/functions.js

@@ -35,7 +35,10 @@ exports.getFunctions = (req, res, next) => {
         },
         include: [
             { model: Categories, attributes: ["name", "color"] }
-        ] 
+        ],
+        attributes: {
+            exclude: ["updatedAt", "utilizationForm", "article", "isOnline"]
+        }
     })
         .then((result) => {
             const { count, rows } = result;

api/models/functions.js

@@ -9,11 +9,11 @@ module.exports = sequelize.define('function', {
         primaryKey: true
     },
     title: {
-        type: Sequelize.STRING(255),
+        type: Sequelize.STRING,
         allowNull: false,
     },
     slug: {
-        type: Sequelize.STRING(255),
+        type: Sequelize.STRING,
         allowNull: false,
     },
     description: {
@@ -24,6 +24,18 @@ module.exports = sequelize.define('function', {
         type: Sequelize.STRING,
         allowNull: false
     },
+    type: {
+        type: Sequelize.STRING,
+        allowNull: false
+    },
+    article: {
+        type: Sequelize.TEXT,
+        allowNull: true
+    },
+    utilizationForm: {
+        type: Sequelize.JSON,
+        allowNull: true
+    },
     isOnline: {
         type: Sequelize.BOOLEAN,
         allowNull: false,

website/components/FunctionCard/FunctionCard.js

@@ -2,6 +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';
 
 const FunctionCard = forwardRef((props, ref) => {
 
@@ -11,9 +12,11 @@ const FunctionCard = forwardRef((props, ref) => {
         setIsLoading(false);
     }
 
+    const isFormOrArticle = (props.type === 'form' || props.type === 'article');
+
     return (
         <Link 
-            href={"/functions/[slug]"} 
+            href={isFormOrArticle ? "/functions/[slug]" : `/functions/${props.slug}`} 
             as={`/functions/${props.slug}`}
         >
             {/* FunctionCard a une hauteur pendant chargement */}
@@ -23,7 +26,7 @@ const FunctionCard = forwardRef((props, ref) => {
 
                 <div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
                     <div className="FunctionCard__top">
-                        <img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />
+                        <img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={API_URL + props.image} />
                         <h2 className="FunctionCard__title">{props.title}</h2>
                         <p className="FunctionCard__description">{props.description}</p>
                     </div>

website/components/HeadTag.js

@@ -34,4 +34,10 @@ const HeadTag = ({ title, image, description }) => (
     </Head>
 );
 
+HeadTag.defaultProps = {
+    title: "FunctionProject", 
+    description: "Apprenez la programmation grâce à l'apprentissage par projet alias fonction.",
+    image: "/images/FunctionProject_icon_small.png"
+}
+
 export default HeadTag;

website/pages/functions/[slug].js

@@ -5,18 +5,18 @@ import { API_URL } from '../../config/config';
 
 const FunctionComponent = () => {
 
-    const router = useRouter();
+    const { slug } = useRouter().query;
 
     return (
         <Fragment>
             <HeadTag 
-                title={router.query.slug}
+                title={slug}
-                description={router.query.slug}
+                description={slug}
-                image={`${API_URL}/images/functions/${router.query.slug}.png`} 
+                image={`${API_URL}/images/functions/${slug}.png`} 
             />
             <div className="container text-center">
                 <div className="row justify-content-center">
-                    <h1>{router.query.slug}</h1>
+                    <h1>{slug}</h1>
                 </div>
             </div>
         </Fragment>

website/pages/functions/index.js

@@ -3,7 +3,6 @@ import HeadTag from '../../components/HeadTag';
 import FunctionCard from '../../components/FunctionCard/FunctionCard';
 import Loader from '../../components/Loader';
 import '../../public/css/pages/functions.css';
-import { API_URL } from '../../config/config';
 import api from '../../config/api';
 import useAPI from '../../hooks/useAPI';
 
@@ -86,9 +85,9 @@ const Functions = () => {
                     {functionsData.rows.map((f, index) => {
                         // Si c'est le dernier élément
                         if (functionsData.rows.length === index + 1) {
-                            return <FunctionCard ref={lastFunctionCardRef} key={f.id} slug={f.slug} image={API_URL + f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} />;
+                            return <FunctionCard ref={lastFunctionCardRef} key={f.id} slug={f.slug} image={f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} type={f.type} />;
                         }
-                        return <FunctionCard key={f.id} slug={f.slug} image={API_URL + f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} />;
+                        return <FunctionCard key={f.id} slug={f.slug} image={f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} type={f.type} />;
                     })}
                 </div>
                 {isLoadingFunctions && <Loader />}

website/pages/index.js

@@ -19,21 +19,17 @@ const Home = () => {
 
     return (
         <Fragment>
-            <HeadTag 
+            <HeadTag />
-                title="FunctionProject" 
-                description="FunctionProject est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc." 
-                image="/images/FunctionProject_icon_small.png" 
-            />
              <div className="Home__container container-fluid text-center">
 
-                <AutoPlaySwipeableViews enableMouseEvents interval={30000}>
+                <AutoPlaySwipeableViews enableMouseEvents interval={15000}>
 
                     {/* Slide 1 */}
                     <div className="row align-items-center justify-content-center">
                         <div className="col-24">
                             <h1 className="Home__title-important important">FunctionProject</h1>
                             <p className="Home__description">
-                                Apprenez la programmation grâce à l'apprentissage par projet.<br/>
+                                Apprenez la programmation grâce à l'apprentissage par projet alias fonction.<br/>
                                 Découvrez la liste des fonctions disponibles : 
                             </p>
                         </div>
@@ -49,8 +45,9 @@ const Home = () => {
                         <div className="col-24">
                             <h1 className="Home__title-important important">Code Source</h1>
                             <p className="Home__description">
-                                Le partage est essentiel afin de progresser tous ensemble. <br/>
+                                Le partage est essentiel afin de progresser. <br/>
-                                Par conséquent le code source du projet est disponible sur mon profil GitHub :
+                                Par conséquent chaque fonction a un article expliquant comment elle fonctionne et <br/>
+                                le code source du projet est disponible sur mon profil GitHub :
                             </p>
                         </div>
                         <div className="col-24">