Skip to content

R
react-todo-app
Commit 817fbd56 by Ajmal.S
Options

changes

parent 4fffcd8d
Showing with 105 additions and 117 deletions
src/App.js
...@@ -3,75 +3,105 @@ import "./App.css"; ...@@ -3,75 +3,105 @@ import "./App.css";
import TodoForm from "./components/TodoForm"; import TodoForm from "./components/TodoForm";
import Header from "./components/Header"; import Header from "./components/Header";
import CompletedTodos from "./components/CompletedTodos"; import CompletedTodos from "./components/CompletedTodos";
import Todos from './components/Todos' // import Todos from './components/Todos'
import TodoItem from "./components/TodoItem";
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 () => { const todoData = [
document.removeEventListener("keydown", escFunction); {
}; id: 1,
}, [escFunction]); text: 'Todo 1',
isEdit: false,
isComplete: false
},
{
id: 2,
text: 'Todo 2',
isEdit: true,
isComplete: false
},
{
id: 3,
text: 'Todo 3',
isEdit: false,
isComplete: true
}
]
// 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'> <div className='task-main'>
<Header todos={todos} /> <Header todos={todoData} />
{todoData.map((todos) => (
<TodoItem key={todos.id}
todos={todos}
editMode={((e) => console.log(e.target.value))} />
))}
<Todos todos={todos} {/* <Todos todos={todos}
completeTodo={completeTodo} completeTodo={completeTodo}
removeTodo={removeTodo} removeTodo={removeTodo}
editTodo={editTodo} editTodo={editTodo}
...@@ -79,14 +109,14 @@ function App() { ...@@ -79,14 +109,14 @@ function App() {
editId={editId} editId={editId}
inputValue={inputValue} inputValue={inputValue}
setInputValue={setInputValue} setInputValue={setInputValue}
escFunction={escFunction} /> escFunction={escFunction} /> */}
<TodoForm onSubmit={addTodo} /> {/* <TodoForm onSubmit={addTodo} /> */}
<h4 style={{ textAlign: 'center', marginBottom: '10px' }}>{todos.filter(todoLen => todoLen.status === true).length > 0 ? 'Completed Todos(' + todos.filter(todoLen => todoLen.status === true).length + ')' : ''}</h4> {/* <h4 style={{ textAlign: 'center', marginBottom: '10px' }}>{todos.filter(todoLen => todoLen.status === true).length > 0 ? 'Completed Todos(' + todos.filter(todoLen => todoLen.status === true).length + ')' : ''}</h4>
<CompletedTodos todos={todos} completeTodo={completeTodo} removeTodo={removeTodo} /> <CompletedTodos todos={todos} completeTodo={completeTodo} removeTodo={removeTodo} /> */}
</div> </div>
......
src/components/TodoItem.js
import React from 'react' import React from 'react'
import { CgCloseO } from "react-icons/cg";
const TodoItem = ({ todos, completeTodo, removeTodo, editTodo, handleEditChange, editId, inputValue, setInputValue, escFunction }) => { const TodoItem = ({ todos, editMode }) => {
return (
<div className="task">
{/*** List Todos ***/}
{editId !== todos.id ? ( const className = `todos ${todos.isComplete ? 't-complete' : ''}`
todos.status === false ? (
<div className="task-body-content">
<div style={{ display: 'flex' }}>
<div style={{ margin: '2px 4px 0px 0px', lineHeight: '1px' }}>
<input type='checkbox'
checked={todos.status}
onChange={() => completeTodo(todos.id)}
></input>
</div>
<div onClick={() => handleEditChange(todos.id, todos.text)} style={{ cursor: 'pointer' }}>{todos.text}</div>
</div>
<div>
<CgCloseO onClick={() => removeTodo(todos.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
</div>
</div>
) : ''
) : (
<>
{/*** Edit Todos ***/}
<div className="add-form"> return (
<div className='form-control'> <div className="task">
<input {todos.isEdit ?
type="text" <input type='text' defaultValue={todos.text} onChange={editMode}></input> :
value={inputValue} <div>
onChange={(e) => setInputValue(e.target.value)} <input type='checkbox' defaultChecked={todos.isComplete}></input>
escFunction={(e) => escFunction(e.key)} <span className={className}>{todos.text}</span>
/> </div>
</div> }
<button className="btn" onClick={() => editTodo(todos.id, inputValue)}>Save</button>
</div>
</>
)}
</div > </div >
) )
} }
......
src/components/Todos.js deleted 100644 → 0
import React from 'react'
import TodoItem from './TodoItem'
const Todos = ({ todos, removeTodo, completeTodo, editTodo, handleEditChange, inputValue, setInputValue, escFunction, editId }) => {
return (
<div>
{todos.map((todos) => (
<TodoItem key={todos.id} todos={todos} removeTodo={removeTodo} completeTodo={completeTodo} editTodo={editTodo} handleEditChange={handleEditChange} inputValue={inputValue} setInputValue={setInputValue} escFunction={escFunction} editId={editId} />
))}
</div>
)
}
export default Todos
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