📦 NEW: Ajout de la fonction toDoList

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>

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>

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>
     );
 }

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;

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;
+}