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";
import TodoForm from "./components/TodoForm";
import Header from "./components/Header";
import CompletedTodos from "./components/CompletedTodos";
import Todos from './components/Todos'
// import Todos from './components/Todos'
import TodoItem from "./components/TodoItem";
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]);
const todoData = [
{
id: 1,
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 (
<>
<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}
removeTodo={removeTodo}
editTodo={editTodo}
......@@ -79,14 +109,14 @@ function App() {
editId={editId}
inputValue={inputValue}
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>
......
src/components/TodoItem.js
import React from 'react'
import { CgCloseO } from "react-icons/cg";
const TodoItem = ({ todos, completeTodo, removeTodo, editTodo, handleEditChange, editId, inputValue, setInputValue, escFunction }) => {
return (
<div className="task">
{/*** List Todos ***/}
const TodoItem = ({ todos, editMode }) => {
{editId !== todos.id ? (
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 ***/}
const className = `todos ${todos.isComplete ? 't-complete' : ''}`
<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>
<button className="btn" onClick={() => editTodo(todos.id, inputValue)}>Save</button>
</div>
</>
)}
return (
<div className="task">
{todos.isEdit ?
<input type='text' defaultValue={todos.text} onChange={editMode}></input> :
<div>
<input type='checkbox' defaultChecked={todos.isComplete}></input>
<span className={className}>{todos.text}</span>
</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