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 '../../components/FunctionCard/FunctionCard.css'; import '../../public/css/pages/functions/toDoList.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 (

Vous devez être connecté pour gérer des "tâches à faire".

); } return (
{(tasks.length > 0) &&
    {tasks.map((task, index) => { return (
  • {task.task}
  • ); })}
}
); } const FunctionTabManager = (props) => { return (
); } const toDoList = (props) => ( ); export async function getServerSideProps(context) { return api.get(`/functions/toDoList`) .then((response) => ({ props: response.data })) .catch(() => redirect(context, '/404')); } export default toDoList;