Here's the PR! #8.

UPDATE .example.env

REACT_APP_DEBUG= (true | false)

CREATE src/AddToDoForm.js

export default function AddToDoForm({
  handleSubmit,
  todoItem,
  handleAdd,
  setTodoItem,
}) {
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Add Todo"
        value={todoItem}
        onChange={(e) => {
          setTodoItem(e.target.value);
        }}
      />
      <button onClick={handleAdd}>Add</button>
    </form>
  );
}

CREATE src/App.js

import ToDoApp from "./ToDoApp";

export default function App() {
  return <ToDoApp />;
}

CREATE src/ToDoApp.js

import ToDoList from "./ToDoList";
import AddToDoForm from "./AddToDoForm";
import useToDOItemAndList from "./useToDoItemAndList";

export default function ToDoApp() {
  const [
    todoItem,
    todoList,
    { handleSubmit, handleAdd, handleDelete, handleCheck, setTodoItem },
  ] = useToDOItemAndList("", []);

  return (
    <>
      <AddToDoForm
        handleSubmit={handleSubmit}
        todoItem={todoItem}
        handleAdd={handleAdd}
        setTodoItem={setTodoItem}
      />
      <ToDoList
        todoList={todoList}
        handleCheck={handleCheck}
        handleAdd={handleAdd}
        handleDelete={handleDelete}
      />
    </>
  );
}

CREATE src/ToDoList.js

export default function ToDoList({
  todoList,
  handleCheck,
  handleAdd,
  handleDelete,
}) {
  return (
    <ul>
      {todoList.map((item) => {
        return (
          <li key={item.id}>
            {item.done ? (
              <>
                <input
                  type="checkbox"
                  id={item.id}
                  checked
                  onChange={() => handleCheck(item.id)}
                />
                <label htmlFor={item.id}>
                  <del>{item.text}</del>
                </label>
              </>
            ) : (
              <>
                <input
                  type="checkbox"
                  id={item.id}
                  onChange={() => handleCheck(item.id)}
                />
                <label htmlFor={item.id}>{item.text}</label>
              </>
            )}

            <button onClick={() => handleDelete(item.id)}>Delete</button>
          </li>
        );
      })}
    </ul>
  );
}

UPDATE src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

CREATE src/logging.js

const DEBUG_MODE = process.env.REACT_APP_DEBUG;
export default function log(param) {
  if (DEBUG_MODE) console.log(param);
}

CREATE src/useToDoItemAndList.js

import { useState } from "react";
import log from "./logging";

export default function useToDOItemAndList(initialItem, initialList) {
  const [todoItem, setTodoItem] = useState(initialItem);
  const [todoList, setTodoList] = useState(initialList);

  function handleSubmit(e) {
    e.preventDefault();
  }

  function handleAdd() {
    if (todoItem !== "") {
      setTodoList([
        ...todoList,
        { id: crypto.randomUUID(), text: todoItem, done: false },
      ]);
    }

    setTodoItem("");
  }

  function handleDelete(id) {
    const filteredList = todoList.filter((item) => {
      return item.id !== id;
    });

    setTodoList(filteredList);
  }

  function handleCheck(id) {
    log(id);
    const filteredList = todoList.map((todoItem) => {
      if (todoItem.id === id) {
        return { ...todoItem, done: !todoItem.done };
      }
      return todoItem;
    });
    setTodoList([...filteredList]);
  }

  return [
    todoItem,
    todoList,
    {
      handleSubmit,
      handleAdd,
      handleDelete,
      handleCheck,
      setTodoItem,
    },
  ];
}

desouky22 / ToDoAPP

OpenStack-ai: styling the app #7

Here's the PR! #8.