# TODO APP

// App.js
import React, { useState } from 'react';
import TaskList from './TaskList';

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

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const deleteTask = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <TaskList tasks={tasks} onDelete={deleteTask} />
      {/* Add task input and button */}
      <div>
        <input
          type="text"
          placeholder="Enter task"
          // Add input state and onChange handler
        />
        <button onClick={() => /* Call addTask with input value */}>Add Task</button>
      </div>
    </div>
  );
}

export default App;

// TaskList.js
import React from 'react';

function TaskList({ tasks, onDelete }) {
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>
          {task}
          <button onClick={() => onDelete(index)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default TaskList;

Full Code

// components/Task.tsx
import React from 'react';

const Task = ({ task, onCompleteToggle, onRemove }) => {
  return (
    <div className={`task ${task.isComplete ? 'completed' : ''}`}>
      <input
        type="checkbox"
        checked={task.isComplete}
        onChange={() => onCompleteToggle(task.id)}
      />
      <span className="task-text">{task.text}</span>
      <span className="priority">{task.priority}</span>
      <button onClick={() => onRemove(task.id)}>Remove</button>
    </div>
  );
};

export default Task;
// Piece 2
// components/TaskList.tsx
import React, { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
import Task from './Task';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  const [taskText, setTaskText] = useState('');
  const [priority, setPriority] = useState('low');

  const handleTaskTextChange = (event) => {
    setTaskText(event.target.value);
  };

  const handlePriorityChange = (event) => {
    setPriority(event.target.value);
  };

  const handleAddTask = (event) => {
    event.preventDefault();
    if (taskText.trim() === '') return;

    const newTask = {
      id: uuidv4(),
      text: taskText,
      isComplete: false,
      priority,
    };

    setTasks([...tasks, newTask]);
    setTaskText('');
  };

  const handleTaskCompleteToggle = (taskId) => {
    const updatedTasks = tasks.map(task =>
      task.id === taskId ? { ...task, isComplete: !task.isComplete } : task
    );
    setTasks(updatedTasks);
  };

  const handleRemoveTask = (taskId) => {
    const updatedTasks = tasks.filter(task => task.id !== taskId);
    setTasks(updatedTasks);
  };

  useEffect(() => {
    console.log('TaskList component updated');
  }, [tasks]);

  return (
    <div className="task-list">
      <h2>Task List</h2>
      <form onSubmit={handleAddTask}>
        <input type="text" value={taskText} onChange={handleTaskTextChange} placeholder="Enter task" />
        <select value={priority} onChange={handlePriorityChange}>
          <option value="low">Low</option>
          <option value="medium">Medium</option>
          <option value="high">High</option>
        </select>
        <button type="submit">Add Task</button>
      </form>
      {tasks.map(task => (
        <Task
          key={task.id}
          task={task}
          onCompleteToggle={handleTaskCompleteToggle}
          onRemove={handleRemoveTask}
        />
      ))}
    </div>
  );
};

export default TaskList;
// Peice 3
// App.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import './App.css';
import TaskList from './components/TaskList';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';

function App() {
  return (
    <Router>
      <div className="App">
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/tasks">Task List</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={HomePage} />
          <Route path="/tasks" component={TaskList} />
          <Route path="/about" component={AboutPage} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;