实现todos

[Sunny-117]

实现todos

[floatGray]

src/TodoList/Todo.jsx

import { useState } from 'react';

export default function Todo({ todo, handleUpdateTodo, handleDeleteTodo }) {
  const [editing, setEditing] = useState(false);

  const handleCheckboxClick = () => {
    handleUpdateTodo({
      ...todo,
      completed: !todo.completed,
    });
  };

  const handleEditClick = () => {
    setEditing(!editing);
  };

  const handleEditTodo = (e) => {
    handleUpdateTodo({
      ...todo,
      label: e.target.value,
    });
  };

  const handleDeleteClick = () => handleDeleteTodo(todo.id);

  return (
    <li style={{ textAlign: 'left' }}>
      <label htmlFor={todo.id}>
        <input
          type="checkbox"
          id={todo.id}
          checked={todo.completed}
          onChange={handleCheckboxClick}
        />

        {editing === true ? (
          <input type="text" value={todo.label} onChange={handleEditTodo} />
        ) : (
          <span>{todo.label}</span>
        )}
      </label>

      <button
        disabled={editing && !todo.label.length}
        onClick={handleEditClick}
      >
        {editing ? 'Save' : 'Edit'}
      </button>
      {!editing && <button onClick={handleDeleteClick}>Delete</button>}
    </li>
  );
}

src/TodoList/TodoComposer.jsx

import { useState } from 'react';

function createTodo(label) {
  return {
    id: Math.floor(Math.random() * 10000),
    label,
    completed: false,
  };
}

export default function TodoComposer({ handleAddTodo }) {
  const [label, setLabel] = useState('');

  const handleUpdateLabel = (e) => setLabel(e.target.value);

  const handleAddTodoClick = () => {
    const todo = createTodo(label);
    handleAddTodo(todo);
    setLabel('');
  };

  return (
    <li>
      <input
        type="text"
        value={label}
        placeholder="New todo"
        onChange={handleUpdateLabel}
      />
      <button disabled={label.length === 0} onClick={handleAddTodoClick}>
        Add Todo
      </button>
    </li>
  );
}

src/TodoList/TodoList.jsx

import { useState } from 'react';
import TodoComposer from './TodoComposer';
import Todo from './Todo';

export default function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, label: 'Learn React', completed: false },
    { id: 2, label: 'Learn Next.js', completed: false },
    { id: 3, label: 'Learn React Query', completed: false },
  ]);

  const handleUpdateTodo = (updatedTodo) => {
    const newTodos = todos.map((todo) => {
      return todo.id === updatedTodo.id ? updatedTodo : todo;
    });
    setTodos(newTodos);
  };

  const handleDeleteTodo = (id) => {
    const newTodos = todos.filter((todo) => todo.id !== id);
    setTodos(newTodos);
  };

  const handleAddTodo = (newTodo) => {
    const newTodos = [...todos, newTodo];
    setTodos(newTodos);
  };

  return (
    <ul>
      <TodoComposer handleAddTodo={handleAddTodo} />
      {todos.map((todo) => {
        return (
          <Todo
            key={todo.id}
            todo={todo}
            handleUpdateTodo={handleUpdateTodo}
            handleDeleteTodo={handleDeleteTodo}
          />
        );
      })}
    </ul>
  );
}