📦 NEW: Ajout de la fonction toDoList

2020-04-24 14:43:52 +02:00
parent 699ce6ec36
commit 8d7b3278c7
6 changed files with 241 additions and 50 deletions
--- a/.github/backup.sql
+++ b/.github/backup.sql
@@ -17,4 +17,6 @@ INSERT INTO `functions` (`id`, `title`, `slug`, `description`, `image`, `type`,
 (8, 'Conversion des Encodages de caractères', 'convertEncoding', 'Convertis des nombres de différentes bases et convertis en UTF-8.', '/images/functions/convertEncoding.png', 'form', NULL, '[{\"name\": \"value\", \"type\": \"text\", \"label\": \"Entrez votre valeur :\", \"placeholder\": \"Votre valeur...\"}, {\"name\": \"functionName\", \"type\": \"select\", \"label\": \"Choisissez une option :\", \"options\": [{\"name\": \"Décimal en Binaire\", \"value\": \"decimalToBinary\"}, {\"name\": \"Binaire en Décimal\", \"value\": \"binaryToDecimal\"}, {\"name\": \"Décimal en Hexadecimal\", \"value\": \"decimalToHexadecimal\"}, {\"name\": \"Hexadecimal en Décimal\", \"value\": \"hexadecimalToDecimal\"}, {\"name\": \"Binaire en Hexadécimal\", \"value\": \"binaryToHexadecimal\"}, {\"name\": \"Hexadécimal en Binaire\", \"value\": \"hexadecimalToBinary\"}, {\"name\": \"Chaque caractère a un nombre Unicode\", \"value\": \"textToNumberUnicode\"}, {\"name\": \"Chaque nombre Unicode a un caractère\", \"value\": \"numberUnicodeToText\"}, {\"name\": \"Texte en Binaire (UTF-8)\", \"value\": \"textToBinary\"}, {\"name\": \"Binaire (UTF-8) en Texte\", \"value\": \"binaryToText\"}, {\"name\": \"Texte en Hexadécimal (UTF-8)\", \"value\": \"textToHexadecimal\"}, {\"name\": \"Hexadécimal (UTF-8) en Texte\", \"value\": \"hexadecimalToText\"}], \"placeholder\": \"\"}]', 1, '2019-09-14 00:00:00', '2020-04-22 22:34:48', 2),
 (9, 'Conversion d\'un nombre arabe en nombre romain', 'convertRomanArabicNumbers', 'Convertis un nombre arabe en nombre romain (et l\'inverse aussi).', '/images/functions/convertRomanArabicNumbers.png', 'form', NULL, '[{\"name\": \"value\", \"type\": \"text\", \"label\": \"Entrez votre nombre :\", \"placeholder\": \"(e.g : 50 ou L)\"}, {\"name\": \"functionName\", \"type\": \"select\", \"label\": \"Convertir en :\", \"options\": [{\"name\": \"Nombre Romain\", \"value\": \"convertArabicToRomanOutput\"}, {\"name\": \"Nombre Arabe\", \"value\": \"convertRomanToArabicOutput\"}], \"placeholder\": \"\"}]', 1, '2019-09-21 00:00:00', '2020-04-22 22:43:50', 2),
 (10, 'Nombre d\'Armstrong', 'armstrongNumber', 'Permet de savoir si un nombre fait partie des nombres d\'Armstrong.', '/images/functions/armstrongNumber.png', 'form', NULL, '[{\"name\": \"number\", \"type\": \"integer\", \"label\": \"Entrez votre nombre :\", \"placeholder\": \"(e.g : 153)\"}]', 1, '2019-09-21 00:00:00', '2020-04-22 22:49:21', 2),
-(11, 'Heap\'s algorithm', 'heapAlgorithm', 'Génère toutes les permutations uniques possibles d\'une chaîne de caractère.', '/images/functions/heapAlgorithm.png', 'form', NULL, '[{\"name\": \"string\", \"type\": \"text\", \"label\": \"Entrez un mot :\", \"placeholder\": \"(e.g : Mot)\"}]', 1, '2019-10-11 00:01:00', '2020-04-22 23:06:15', 2);
+(11, 'Heap\'s algorithm', 'heapAlgorithm', 'Génère toutes les permutations uniques possibles d\'une chaîne de caractère.', '/images/functions/heapAlgorithm.png', 'form', NULL, '[{\"name\": \"string\", \"type\": \"text\", \"label\": \"Entrez un mot :\", \"placeholder\": \"(e.g : Mot)\"}]', 1, '2019-10-11 00:01:00', '2020-04-22 23:06:15', 2),
+(12, 'Raccourcisseurs de liens', 'linkShortener', 'Une URL trop longue ? Raccourcissez-là !', '/images/functions/linkShortener.png', 'form', NULL, '[{\"name\": \"url\", \"type\": \"text\", \"label\": \"Entrez le lien à raccourcir :\", \"placeholder\": \"(e.g : https://divlo.fr)\"}, {\"name\": \"shortcutName\", \"type\": \"text\", \"label\": \"Entrez le nom du raccourci :\", \"placeholder\": \"(e.g : divlo)\"}]', 1, '2019-12-11 00:00:00', '2020-04-23 09:45:02', 1),
+(13, 'Liste de choses à faire', 'toDoList', 'Prévoyez la liste de choses que vous devez faire.', '/images/functions/toDoList.png', 'page', NULL, NULL, 1, '2019-12-26 00:00:00', '2020-04-23 13:48:33', 1);
--- a/website/components/FunctionPage/CommentCard/CommentCard.js
+++ b/website/components/FunctionPage/CommentCard/CommentCard.js
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { forwardRef, useContext, Fragment } from 'react';
+import { forwardRef, useContext } from 'react';
 import date from 'date-and-time';
 import { UserContext } from '../../../contexts/UserContext';
 import { API_URL } from '../../../utils/config';
@@ -35,14 +35,20 @@ const CommentCard = forwardRef((props, ref) => {
                        <Link href={"/users/[name]"} as={`/users/${props.user.name}`}>
                            <a>{props.user.name}</a>
                        </Link> 
-                        &nbsp;- {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}
-                        {(isAuth && user.name === props.user.name) && <Fragment>&nbsp;-&nbsp;<a onClick={deleteCommentById} href="#">supprimer</a></Fragment>} 
+                        &nbsp;- {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)} 
                    </span>
                </div>
                <div className="row">
-                    <p className="CommentCard__message">
-                        {props.message}
-                    </p>
+                    <div className="col-24">
+                        <p className="CommentCard__message">
+                            {props.message}
+                        </p>
+                        {(isAuth && user.name === props.user.name) && 
+                            <p style={{ fontSize: '15px', margin: '15px 0 0 0', fontStyle: 'italic' }}>
+                                <a onClick={deleteCommentById} href="#">supprimer le commentaire</a>
+                            </p>
+                        }
+                    </div>
                </div>
            </div>
        </div>
--- a/website/components/FunctionPage/FunctionComments/FunctionComments.js
+++ b/website/components/FunctionPage/FunctionComments/FunctionComments.js
@@ -86,7 +86,7 @@ const FunctionComments = ({ functionId }) => {
                                </form>
                            :
                                <p className="text-center">
-                                    Vous devez être <Link href={'/login'}><a>connecté</a></Link> pour poster un commentaire.
+                                    Vous devez être <Link href={'/users/login'}><a>connecté</a></Link> pour poster un commentaire.
                                </p>
                        }
                    </div>
--- a/website/pages/functions/randomQuote.js
+++ b/website/pages/functions/randomQuote.js
@@ -169,7 +169,7 @@ const SuggestQuote = () => {
        const token = user.token;
        if (isAuth && token != undefined) {
            api.post('/quotes', inputState, { headers: { 'Authorization': token } })
-            .then(({ data }) => {
+                .then(({ data }) => {
                    setInputState({ quote: "", author: "" });
                    setMessage(`<p class="form-success"><b>Succès:</b> ${data.message}</p>`);
                    setIsLoading(false);
@@ -181,50 +181,49 @@ const SuggestQuote = () => {
        }
    }

-    return (
-        <div className="container-fluid">
-            {
-                (isAuth) ?
-                    <Fragment>                        
-                        <div className="row justify-content-center">
-                            <div className="col-24 text-center">
-                                <h2 style={{ margin: 0 }}>Proposer une citation : </h2>
-                                <p style={{ marginTop: '5px' }}>Vous pouvez proposer des citations, et une fois validé elles seront rajoutés à la liste des citations.</p>
-                            </div>
-                        </div>
-                        <div style={{ marginBottom: '40px' }} className="row">
-                            <div className="col-24">
-                                <form onSubmit={handleSubmit}>
-                                    <div className="form-group">
-                                        <label htmlFor="quote" className="form-label">Citation :</label>
-                                        <textarea value={inputState.quote} onChange={handleChange} style={{ height: 'auto' }} id="quote" name="quote" type="text" className="form-control" rows="4" placeholder="La citation..." />
-                                    </div>
-                                    
-                                    <div className="form-group">
-                                        <label htmlFor="author" className="form-label">Auteur :</label>
-                                        <input value={inputState.author} onChange={handleChange} name="author" id="author" type="text" className="form-control" placeholder="L'auteur de la citation..." />
-                                    </div>
+    if (!isAuth) {
+        return (
+            <p className="text-center">
+                Vous devez être <Link href={'/users/login'}><a>connecté</a></Link> pour proposer une citation.
+            </p>
+        );
+    }

-                                    <div className="form-group text-center">
-                                        <button type="submit" className="btn btn-dark">Envoyer</button>
-                                    </div>
-                                </form>
-                            </div>
+    return (
+        <div className="container-fluid">                     
+            <div className="row justify-content-center">
+                <div className="col-24 text-center">
+                    <h2 style={{ margin: 0 }}>Proposer une citation : </h2>
+                    <p style={{ marginTop: '5px' }}>Vous pouvez proposer des citations, et une fois validé elles seront rajoutés à la liste des citations.</p>
+                </div>
+            </div>
+            <div style={{ marginBottom: '40px' }} className="row">
+                <div className="col-24">
+                    <form onSubmit={handleSubmit}>
+                        <div className="form-group">
+                            <label htmlFor="quote" className="form-label">Citation :</label>
+                            <textarea value={inputState.quote} onChange={handleChange} style={{ height: 'auto' }} id="quote" name="quote" type="text" className="form-control" rows="4" placeholder="La citation..." />
                        </div>
-                        <div className="form-result text-center">
-                            {
-                                (isLoading) ? 
-                                    <Loader />
-                                :
-                                    htmlParser(message)
-                            }
+                        
+                        <div className="form-group">
+                            <label htmlFor="author" className="form-label">Auteur :</label>
+                            <input value={inputState.author} onChange={handleChange} name="author" id="author" type="text" className="form-control" placeholder="L'auteur de la citation..." />
                        </div>
-                    </Fragment>
-                :
-                <p className="text-center">
-                    Vous devez être <Link href={'/login'}><a>connecté</a></Link> pour proposer une citation.
-                </p>
-            }
+
+                        <div className="form-group text-center">
+                            <button type="submit" className="btn btn-dark">Envoyer</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <div className="form-result text-center">
+                {
+                    (isLoading) ? 
+                        <Loader />
+                    :
+                        htmlParser(message)
+                }
+            </div>
        </div>
    );
 }
--- a/website/pages/functions/toDoList.js
+++ b/website/pages/functions/toDoList.js
@@ -0,0 +1,150 @@
+import { useState, useEffect, useContext } from 'react';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrash, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { UserContext } from '../../contexts/UserContext';
+import redirect from '../../utils/redirect';
+import FunctionPage from '../../components/FunctionPage/FunctionPage';
+import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
+import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
+import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
+import api from '../../utils/api';
+import '../../public/css/pages/FunctionComponent.css';
+import '../../public/css/pages/functions/toDoList.css';
+import '../../components/FunctionCard/FunctionCard.css';
+
+const ManageToDo = () => {
+
+    const { isAuth, user }            = useContext(UserContext);
+    const [inputState, setInputState] = useState({ task: "" });
+    const [tasks, setTasks]           = useState([]);
+
+    useEffect(() => {
+        const getTasks = async () => {
+            const { data } = await api.get('/tasks', { headers: { 'Authorization': user.token } });
+            setTasks(data);
+        }
+        if (isAuth && user.token != undefined) {
+            getTasks();
+        }
+    }, [isAuth]);
+
+    const handleChange = (event) => {
+        const inputStateNew = { ...inputState };
+        inputStateNew[event.target.name] = event.target.value;
+        setInputState(inputStateNew);
+    }
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        try {
+            const { data } = await api.post('/tasks', inputState, { headers: { 'Authorization': user.token } });
+            const newTasks = [...tasks];
+            newTasks.push(data);
+            setTasks(newTasks);
+            setInputState({ task: "" });
+        } catch {}
+    }
+
+    const handleRemoveTask = async (id, index) => {
+        const newTasks = [...tasks];
+        try {
+            await api.delete(`/tasks/${id}`, { headers: { 'Authorization': user.token } });
+            newTasks.splice(index, 1);
+            setTasks(newTasks);
+        } catch {}
+    }
+
+    const handleEditTask = async (id, index, isCompleted) => {
+        try {
+            await api.put(`/tasks/${id}`, { isCompleted: !isCompleted }, { headers: { 'Authorization': user.token } });
+            const newTasks   = [...tasks];
+            const taskObject = newTasks[index];
+            taskObject.isCompleted = !isCompleted;
+            setTasks(newTasks);
+        } catch {}
+    }
+
+    if (!isAuth) {
+        return (
+            <p className="text-center">
+                Vous devez être <Link href={'/users/login'}><a>connecté</a></Link> pour gérer des "tâches à faire".
+            </p>
+        );
+    }
+
+    return (
+        <div className="container-fluid">
+            <div className="row justify-content-center">
+                <div className="col-24">
+                    <form onSubmit={handleSubmit}>
+                        <div className="text-center">
+                            <label htmlFor="task" className="form-label">Ajouter une tâche à faire :</label>
+                            <input value={inputState.task} onChange={handleChange} name="task" id="task" type="text" className="form-control" placeholder="(e.g : Apprendre à coder)" />
+                        </div>
+
+                        <div className="form-group text-center">
+                            <button type="submit" className="btn btn-dark">Envoyer</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            {(tasks.length > 0) &&
+                <div className="row justify-content-center">
+                    <div className="col-24 ManageToDo__container">
+                        <ul className="ManageToDo__list">
+                            {tasks.map((task, index) => {
+                               return (
+                                    <li key={task.id} className={`ManageToDo__list-item ${(task.isCompleted) ? "isCompleted" : ""}`}>
+                                        <span className="ManageToDo__list-item-span">{task.task}</span>
+                                        <div>
+                                            <button className="ManageToDo__task-btn" title="Supprimer de la liste" onClick={() => handleRemoveTask(task.id, index)}>
+                                                <FontAwesomeIcon icon={faTrash} />
+                                            </button>
+                                            <button className="ManageToDo__task-btn" onClick={() => handleEditTask(task.id, index, task.isCompleted)}>
+                                                <FontAwesomeIcon { ...(task.isCompleted) ? { icon: faTimes } : { icon: faCheck } } />
+                                            </button>
+                                        </div>
+                                    </li>
+                               );
+                            })}
+                        </ul>
+                    </div>
+                </div>
+            }
+        </div>
+    );
+}
+
+const FunctionTabManager = (props) => {
+    return (
+        <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
+            <div className="FunctionComponent__slide">
+                <ManageToDo />
+            </div>
+            <div className="FunctionComponent__slide">
+                <FunctionArticle article={props.article} />
+            </div>
+            <div className="FunctionComponent__slide">
+                <FunctionComments functionId={props.id} />
+            </div>
+        </FunctionTabs>
+    );
+}
+
+const toDoList = (props) => (
+    <FunctionPage 
+        FunctionTabManager={FunctionTabManager}
+        { ...props }
+        tabNames={["⚙️ Utilisation", "📝 Article", "📬 Commentaires"]} 
+    />
+);
+
+export async function getServerSideProps(context) {
+    return api.get(`/functions/toDoList`)
+        .then((response) => ({ props: response.data }))
+        .catch(() => redirect(context, '/404'));
+}
+
+export default toDoList;
--- a/website/public/css/pages/functions/toDoList.css
+++ b/website/public/css/pages/functions/toDoList.css
@@ -0,0 +1,34 @@
+.ManageToDo__container {
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
+    border: 1px solid black;
+    border-radius: 1rem;
+    margin: 40px 40px;
+}
+.ManageToDo__list {
+    overflow: hidden;
+}
+.ManageToDo__list-item {
+    display: flex;
+    justify-content: space-between;
+    margin: 25px 0;
+}
+.ManageToDo__list-item.isCompleted {
+    text-decoration: line-through;
+}
+.ManageToDo__task-btn {
+    color: var(--text-color);
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    margin-left: 7px;
+    margin-right: 7px;
+    width: 1.75em;
+}
+.ManageToDo__list-item-span {
+    width: calc(100% - 120px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}