Todo home removed

src/App.js

-import React from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import "./App.css";
-import TodoHome from "./components/TodoHome";
+import TodoForm from "./components/TodoForm";
+import TodoItem from "./components/TodoItem";
+import Header from "./components/Header";
+import CompletedTodos from "./components/CompletedTodos";
 
 function App() {
+  const [todos, setTodos] = useState([]);
+  const [editId, setEdit] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+
+  const handleEditChange = (id, text) => {
+    setEdit(id);
+    setInputValue(text);
+  };
+  const addTodo = (todo) => {
+    if (!todo.text || /^\s*$/.test(todo.text)) {
+      alert('Please add a Todo')
+      return;
+    }
+    const newTodos = [todo, ...todos];
+    setTodos(newTodos);
+    console.log(newTodos);
+  };
+
+  const removeTodo = (id) => {
+    const removedArr = [...todos].filter((todoId) => todoId.id !== id);
+    setTodos(removedArr);
+  };
+
+  const completeTodo = (id) => {
+    const updatedTodos = todos.map((todo) => {
+      if (todo.id === id) {
+        todo.status = !todo.status;
+      }
+      return todo;
+    });
+    setTodos(updatedTodos);
+  };
+
+  const editTodo = (id, text) => {
+    const editTodos = todos.map((todo) => {
+      if (todo.id === id) {
+        todo.text = text;
+      }
+      return todo;
+    });
+    setTodos(editTodos);
+    setEdit(false);
+  };
+
+  const escFunction = useCallback((event) => {
+    if (event.keyCode === 27) {
+      console.log("esc");
+      return editTodo();
+    }
+  });
+
+  useEffect(() => {
+    document.addEventListener("keydown", escFunction);
+
+    return () => {
+      document.removeEventListener("keydown", escFunction);
+    };
+  }, [escFunction]);
+
   return (
-    <div className='task-main'>
-      <TodoHome />
-    </div>
+    <>
+      <div className='task-main'>
+
+        <Header todos={todos} />
+
+        <TodoItem />
+
+        <TodoForm onSubmit={addTodo} />
+
+        <h4 style={{ textAlign: 'center', marginBottom: '10px' }}>Completed Todos</h4>
+
+        <CompletedTodos todos={todos}
+          completeTodo={completeTodo}
+          removeTodo={removeTodo} />
+          
+      </div>
+
+    </>
   );
 }
 

src/components/TodoForm.js

 import React, { useState } from "react";
 
-function TodoForm(
-  props,
-) {
+function TodoForm(props) {
 
   const [input, setInput] = useState("");
 

src/components/TodoHome.js

-import React, { useState, useCallback, useEffect } from "react";
-import TodoForm from "./TodoForm";
-import TodoItem from "./TodoItem";
-import Header from "./Header";
-import CompletedTodos from "./CompletedTodos";
-
-function TodoHome() {
-
-  const [todos, setTodos] = useState([]);
-  const [editId, setEdit] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-
-  const handleEditChange = (id, text) => {
-    setEdit(id);
-    setInputValue(text);
-  };
-  const addTodo = (todo) => {
-    if (!todo.text || /^\s*$/.test(todo.text)) {
-      alert('Please add a Todo')
-      return;
-    }
-    const newTodos = [todo, ...todos];
-    setTodos(newTodos);
-    console.log(newTodos);
-  };
-
-  const removeTodo = (id) => {
-    const removedArr = [...todos].filter((todoId) => todoId.id !== id);
-    setTodos(removedArr);
-  };
-
-  const completeTodo = (id) => {
-    const updatedTodos = todos.map((todo) => {
-      if (todo.id === id) {
-        todo.status = !todo.status;
-      }
-      return todo;
-    });
-    setTodos(updatedTodos);
-  };
-
-  const editTodo = (id, text) => {
-    const editTodos = todos.map((todo) => {
-      if (todo.id === id) {
-        todo.text = text;
-      }
-      return todo;
-    });
-    setTodos(editTodos);
-    setEdit(false);
-  };
-
-  const escFunction = useCallback((event) => {
-    if (event.keyCode === 27) {
-      console.log("esc");
-      return editTodo();
-    }
-  });
-
-  useEffect(() => {
-    document.addEventListener("keydown", escFunction);
-
-    return () => {
-      document.removeEventListener("keydown", escFunction);
-    };
-  }, [escFunction]);
-
-  return (
-    <>
-      <Header todos={todos} />
-
-      <TodoItem
-        todos={todos}
-        completeTodo={completeTodo}
-        removeTodo={removeTodo}
-        editTodo={editTodo}
-        handleEditChange={handleEditChange}
-        editId={editId}
-        inputValue={inputValue}
-        setInputValue={setInputValue}
-        escFunction={escFunction}
-      />
-      <TodoForm onSubmit={addTodo} />
-
-      <h4 style={{ textAlign: 'center', marginBottom: '10px' }}>Completed Todos</h4>
-
-      <CompletedTodos todos={todos}
-        completeTodo={completeTodo}
-        removeTodo={removeTodo} />
-    </>
-  );
-}
-
-export default TodoHome;

src/components/TodoItem.js

-import React from "react";
+import React from 'react'
 import { CgCloseO } from "react-icons/cg";
-const TodoItem = ({
-  todos,
-  completeTodo,
-  removeTodo,
-  editTodo,
-  editId,
-  handleEditChange,
-  inputValue,
-  setInputValue,
-  escFunction
-}) => {
-  return todos.map((todo) => (
+
+const TodoItem = () => {
+  return (
     <div className="task">
-      {editId === todo.id ? (
-        <div className="add-form">
-          <div className='form-control'>
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              escFunction={(e) => escFunction(e.key)}
-            />
+      <div className="task-body-content">
+        <div style={{ display: 'flex' }}>
+          <div style={{ margin: '2px 4px 0px 0px' }}>
+            <input type='checkbox' checked={false}></input>
           </div>
-          <button className="btn" onClick={() => editTodo(todo.id, inputValue)}>Save</button>
+          <div>Item 1</div>
+        </div>
+        <div>
+          <CgCloseO style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
         </div>
-      ) : (
-        <>
-          {/* New Todos Section */}
-          {todo.status === false ? (
-            < div className="task-body-content">
-              <div style={{ display: 'flex' }}>
-                <div style={{ margin: '2px 4px 0px 0px' }}>
-                  <input type='checkbox'
-                    key={todo.id}
-                    checked={todo.status}
-                    onClick={() => completeTodo(todo.id)}
-                  ></input>
-                </div>
-                <div onClick={() => handleEditChange(todo.id, todo.text)} style={{ cursor: 'pointer' }}>{todo.text}</div>
-              </div>
+      </div>
+    </div>
+  )
+}
 
-              <div>
-                <CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
-              </div>
-            </div>
-          ) : ''}
-        </>
-      )}
-    </div >
-  ));
-};
+export default TodoItem
 
-export default TodoItem;