From 8e390a37a4916c506532132135a2d0f703af368c Mon Sep 17 00:00:00 2001
From: Ajmal Basha <ajmal.basha@krds.fr>
Date: Wed, 23 Feb 2022 16:50:44 +0530
Subject: [PATCH] changes
---
src/App.js | 21 +++++++++++++++------
src/components/CompletedTodos.js | 35 +++++++++++++++--------------------
src/components/TodoForm.js | 2 --
src/components/TodoItem.js | 50 ++++++++++++++++++++++++++++++++++++++------------
src/components/Todos.js | 14 ++++++++++++++
src/index.css | 12 ++++++------
6 files changed, 88 insertions(+), 46 deletions(-)
create mode 100644 src/components/Todos.js
diff --git a/src/App.js b/src/App.js
index 9f7bd13..3519258 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,9 @@
import React, { useState, useCallback, useEffect } from "react";
import "./App.css";
import TodoForm from "./components/TodoForm";
-import TodoItem from "./components/TodoItem";
import Header from "./components/Header";
import CompletedTodos from "./components/CompletedTodos";
+import Todos from './components/Todos'
function App() {
const [todos, setTodos] = useState([]);
@@ -71,14 +71,23 @@ function App() {
<Header todos={todos} />
- <TodoItem />
+ <Todos todos={todos}
+ completeTodo={completeTodo}
+ removeTodo={removeTodo}
+ editTodo={editTodo}
+ handleEditChange={handleEditChange}
+ editId={editId}
+ inputValue={inputValue}
+ setInputValue={setInputValue}
+ escFunction={escFunction} />
<TodoForm onSubmit={addTodo} />
- <CompletedTodos todos={todos}
- completeTodo={completeTodo}
- removeTodo={removeTodo} />
-
+
+ <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} />
+
</div>
</>
diff --git a/src/components/CompletedTodos.js b/src/components/CompletedTodos.js
index 09f018a..3d598e4 100644
--- a/src/components/CompletedTodos.js
+++ b/src/components/CompletedTodos.js
@@ -1,31 +1,26 @@
import React from "react";
import { CgCloseO } from "react-icons/cg";
-const CompletedTodos = ({
- todos,
- completeTodo,
- removeTodo,
-}) => {
-
+const CompletedTodos = ({ todos, completeTodo, removeTodo, lengthCheck }) => {
return todos.map((todo) => (
<>
{todo.status === true ? (
- <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 className="task-body-content">
+ <div style={{ display: 'flex' }}>
+ <div style={{ margin: '2px 4px 0px 0px', lineHeight: '1px' }}>
+ <input type='checkbox'
+ key={todo.id}
+ checked={todo.status}
+ onClick={() => completeTodo(todo.id)}
+ ></input>
+ </div>
+ <div className={`todo ${todo.status ? 't-complete' : ''}`} onClick={() => lengthCheck()}>{todo.text}</div>
+ </div>
+ <div>
+ <CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
</div>
- <div>{todo.text}</div>
- </div>
- <div>
- <CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
</div>
- </div>
- ) : '' }
+ ) : ''}
</>
));
};
diff --git a/src/components/TodoForm.js b/src/components/TodoForm.js
index 49063eb..cda78f3 100644
--- a/src/components/TodoForm.js
+++ b/src/components/TodoForm.js
@@ -32,8 +32,6 @@ function TodoForm(props) {
<button className="btn" onClick={Submit}>Submit</button>
</div>
</form>
-
- <h4 style={{ textAlign: 'center', marginBottom: '10px' }}>Completed Todos</h4>
</>
);
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
index 2fda21c..d238da1 100644
--- a/src/components/TodoItem.js
+++ b/src/components/TodoItem.js
@@ -1,21 +1,47 @@
import React from 'react'
import { CgCloseO } from "react-icons/cg";
-const TodoItem = () => {
+const TodoItem = ({ todos, completeTodo, removeTodo, editTodo, handleEditChange, editId, inputValue, setInputValue, escFunction }) => {
return (
<div className="task">
- <div className="task-body-content">
- <div style={{ display: 'flex' }}>
- <div style={{ margin: '2px 4px 0px 0px' }}>
- <input type='checkbox' defaultChecked={false}></input>
+
+ {/*** List Todos ***/}
+
+ {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 ***/}
+
+ <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>
- <div>Item 1</div>
- </div>
- <div>
- <CgCloseO style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
- </div>
- </div>
- </div>
+ </>
+ )}
+ </div >
)
}
diff --git a/src/components/Todos.js b/src/components/Todos.js
new file mode 100644
index 0000000..9a0ac09
--- /dev/null
+++ b/src/components/Todos.js
@@ -0,0 +1,14 @@
+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
diff --git a/src/index.css b/src/index.css
index 8362dda..0ffd5e5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,7 +7,7 @@
body {
font-family: sans-serif;
background-color: #cccccc24;
- font-size: 14px;
+ font-size: 16px;
}
.btn {
@@ -29,12 +29,12 @@ body {
.add-form {
display: flex;
- justify-content: space-around;
- margin: 10px 0px;
+ justify-content: space-between;
+ margin: 10px 10px 10px 5px;
}
.form-control input {
- width: 100%;
+ width: 20rem;
height: 35px;
margin: 5px 2px 3px 3px;
padding: 3px 7px;
@@ -48,7 +48,7 @@ footer {
}
.task-main {
- width: 25em;
+ width: 26rem;
margin: 15rem auto;
border-bottom: 1px solid rgba(0, 0, 0, .125);
border-radius: 4px;
@@ -78,5 +78,5 @@ footer {
}
.t-complete {
- background-color: green;
+ text-decoration: line-through;
}
\ No newline at end of file
--
libgit2 0.27.0