Skip to content

R
react-todo-app
Commit c6e3229b by Ajmal.S
Options

Todo home removed

parent a6b33e19
Showing with 100 additions and 151 deletions
src/App.js
import React from "react"; import React, { useState, useCallback, useEffect } from "react";
import "./App.css"; 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() { 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 ( return (
<div className='task-main'> <>
<TodoHome /> <div className='task-main'>
</div>
<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"; import React, { useState } from "react";
function TodoForm( function TodoForm(props) {
props,
) {
const [input, setInput] = useState(""); const [input, setInput] = useState("");
......
src/components/TodoHome.js deleted 100644 → 0
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"; import { CgCloseO } from "react-icons/cg";
const TodoItem = ({
todos, const TodoItem = () => {
completeTodo, return (
removeTodo,
editTodo,
editId,
handleEditChange,
inputValue,
setInputValue,
escFunction
}) => {
return todos.map((todo) => (
<div className="task"> <div className="task">
{editId === todo.id ? ( <div className="task-body-content">
<div className="add-form"> <div style={{ display: 'flex' }}>
<div className='form-control'> <div style={{ margin: '2px 4px 0px 0px' }}>
<input <input type='checkbox' checked={false}></input>
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
escFunction={(e) => escFunction(e.key)}
/>
</div> </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> </div>
) : ( </div>
<> </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> export default TodoItem
<CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
</div>
</div>
) : ''}
</>
)}
</div >
));
};
export default TodoItem;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment