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' 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 != null) { 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