6/ ReactJS: Tutoriel: Todo List

export default function TodoItem({ task }) {
  
  //Formatter la date pour afficher: HH:MM - JJ/MM/AA
  const dateObj = new Date(task.date);
  const heure = dateObj.getHours();
  const minutes = dateObj.getMinutes();
  const dateFormatted = dateObj.toLocaleDateString("fr-FR");
  const heureFormatted = `${heure.toString()}:${minutes.toString()}`;

  return (
    <div style={{
        backgroundColor: task.completed
          ? "hsla(150, 90%, 70%, 0.4)"
          : "hsla(37, 100%, 80%, 0.6)",
        }}
      >
      <h3>{task.title}</h3>
      <p>{`${heureFormatted} - ${dateFormatted}`}</p>
      <button>Complete</button>
      <button>Delete</button>
    </div>
  );
}

export default function TodoForm() {
  return (
    <div>
      <input type="text" placeholder="Entez une tache" />
      <button>Ajouter la tache</button>
    </div>
  );
}

// Import des composants nécessaires
import TodoItem from './TodoItem';
import TodoForm from './TodoForm';

export default function TodoList() {
  return (
    <div>
      <h1>Todo List</h1>
      {/*Afficher le composant permattant d'ajouter une tâche*/}
      <TodoForm />
      <div>
        {/*Afficher une liste de tâches en envoyant les propiétées de chaque tache au composant*/}
        <TodoItem task={{title:"Task 1", date:"01/01/2020", completed:false}} />
        <TodoItem task={{title:"Task 2", date:"02/01/2020", completed:true}} />
        <TodoItem task={{title:"Task 3", date:"03/01/2020", completed:false}} />
      </div>
    </div>
  );
}

import TodoItem from './TodoItem';
import TodoForm from './TodoForm';

// Import du hook useState
import { useState } from 'react';

export default function TodoList() {
  //Déclaration de la variable d'état et de son setteur
  const [tasks, setTasks] = useState([]);

  return (
    <div>
      <h1>Todo List</h1>
      <TodoForm />
      <div>
        {/*transformer la liste de tâches en liste d'éléments JSX*/}
        {tasks.map(task => (
          <TodoItem key={task.date}  task={task} />
        ))}
      </div>
    </div>
  );
}

import TodoItem from './TodoItem';
import TodoForm from './TodoForm';
import{ useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);

  // Déclaration de la fonction pour ajouter une tache à la iste
  const addTask = task => {
    // Déclarer une variable contenant la nouvelle tâche
    const newTask = { title: task, date: Date.now(), completed: false }

    // Créer un nouveau tableau contenant toutes les tache ainsi que la nouvelle
        const newTasks = [...tasks, newTask];

    // Mettre à jour la variable d'état avec la nouvelle liste
    setTasks(newTasks)
  };

  return (
    <div>
      <h1>Todo List</h1>

      {/*Envoyer la fonction qui permet d'ajouter une tache au composant*/}
      <TodoForm addTask={addTask} />

      <div>
        {tasks.map(task => (
          <TodoItem key={task.date} task={task}/>
        ))}
      </div>
    </div>
  );
}

import React, { useState } from 'react';
import TodoItem from './TodoItem';
import TodoForm from './TodoForm';

function TodoList() {
  const [tasks, setTasks] = useState([]);

  const addTask = task => {
    const newTask = { title: task, date: Date.now(), completed: false }
    const newTasks = [...tasks, newTask];
    setTasks(newTasks);
  };

  // Déclarer la fonction pour enlever la tâche de la liste
  const removeTask = (position) => {
    // Créer un nouveau tableau contenant toutes les taches
    const newTasks = [...tasks];

    // Utiliser splice pour supprimer la tache de la nouvelle liste
    newTasks.splice(position, 1);

    // Utiliser le fonction setteur pour mettre à jour la liste de tâches
    setTasks(newTasks);
  };
  return (
    <div>
      <h1>Todo List</h1>
      <TodoForm addTask={addTask} />
      <div>
        {/*Envoyer la fonction de suppression dans la clé onDelete*/}
        {tasks.map((task, position) => (
          <TodoItem
            key={task.date}
            task={task}
            onDelete={() => {
              removeTask(position);
            }}
          />
        ))}
      </div>
    </div>
  );
}

import React, { useState } from 'react';
import TodoItem from './TodoItem';
import TodoForm from './TodoForm';

function TodoList() {
  const [tasks, setTasks] = useState([]);

  const addTask = task => {
    const newTask = { title: task, date: Date.now(), completed: false }
    const newTasks = [...tasks, newTask];
    setTasks(newTasks);
  };

  const removeTask = (position) => {
        const newTasks = [...tasks];
        newTasks.splice(position, 1);
        setTasks(newTasks);
  };

  // Fonction pour mettre à jour la liste de tâches
  function validateTask(position) {
    // Créez une copie du tableau original
    const newTasks = [...tasks]; 

    // Mettre à jour l'élément
    newTasks[position].completed = true;

    // Mettre à jour l'état du tableau
    setTasks(newTasks); 
  }
  return (
    <div>
      <h1>Todo List</h1>
      <TodoForm addTask={addTask} />
      <div>
        {/* Envoyer la fonction de validation dans la clé onValidate*/}
        {tasks.map((task, position) => (
          <TodoItem 
            key={task.date} 
            task={task} 
            onDelete={()=>{removeTask(position)}}
            onValidate={()=>{validateTask(position)}}
          />
        ))}
      </div>
    </div>
  );
}