todoHome:---------------:

import { useEffect, useState } from "react";

import Tasck from "./task";
import Confirm from "./confirm";

export interface Task {

id: number;
isChecked: boolean;
task: string;
isTaskInputComplete: boolean;
}

const emptyTask: Task = {

id: Math.floor(Math.random() * 10000),
isChecked: false,
task: "",
isTaskInputComplete: false,
};

const TodoHome = () => {

const [taskList, setTaskList] = useState<Task[]>([emptyTask]);
const [isAllChecked, setIsAllCheked] = useState(false);
const [isRemoveAllConfirm, setIsRemoveAllConfirm] = useState(false);

// console.log({ isAllChecked, taskList });

const addNewTask = () => {

const newID: number = Math.floor(Math.random() * 10000);
setTaskList([...taskList, { ...emptyTask, id: newID }]);
};

const taskInput = (id: number, value: any) => {

setTaskList(
taskList.map((e) => (e.id === id ? { ...e, task: value } : { ...e }))
);
};

const checkboxInput = (id: number, value: any) => {

setTaskList(
taskList.map((e) => (e.id === id ? { ...e, isChecked: value } : { ...e }))
);
};

const allChecked = () => {

setTaskList(
taskList.map((e) =>
e.isTaskInputComplete ? { ...e, isChecked: true } : { ...e }
)
);
};

const validateInput = (id: number) => {

setTaskList(
taskList.map((e) =>
e.id === id
? {
...e,
isTaskInputComplete: !e.isTaskInputComplete,
 isChecked: false,
}
: { ...e }
)
);
};

const removeOneTask = (id: number): any => {

taskList.length > 1
? setTaskList(taskList.filter((elm) => elm.id !== id))
: setTaskList([emptyTask]);
};

useEffect(() => {
const checkChecking = taskList.some((e) => e.isChecked === false);
setIsAllCheked(!checkChecking);
}, [taskList]);

if (isRemoveAllConfirm) {
return (
<Confirm
setIsRemoveAllConfirm={setIsRemoveAllConfirm}
setTaskList={setTaskList}
/>
);
} else {
return (
<div className="top-parent-container">
<div className="title">
<h1>My TODO List</h1>
</div>
<div className="task-list-container">
{taskList.map((elm) => (
<Tasck
key={elm.id}
{...elm}
removeOneTask={removeOneTask}
taskInput={taskInput}
checkboxInput={checkboxInput}
validateInput={validateInput}
taskListLenght={taskList.length > 1}
/>
))}
</div>
<div className="title todo-footer">
<button
className={
taskList.length > 0 &&
!taskList[taskList.length - 1].isTaskInputComplete
? "btn-new-task disabled"
: "btn-new-task"
}
onClick={() => addNewTask()}
disabled={
taskList.length > 0 &&
!taskList[taskList.length - 1].isTaskInputComplete
}
>
<img src="v-icon.svg" alt="new task" />
 </button>
{!isAllChecked ? (
<button
className={
!taskList[taskList.length - 1].isTaskInputComplete
? "btn-task-allComplete disabled"
: "btn-task-allComplete"
}
disabled={!taskList[taskList.length - 1].isTaskInputComplete}
onClick={() => allChecked()}
>
All Completed
</button>
) : (
<button
className="btn-task-allRemove"
onClick={() => setIsRemoveAllConfirm(true)}
// onClick={() => setTaskList([emptyTask])}
>
Remove All
</button>
)}
</div>
</div>
);
}
};

export default TodoHome;

:---------------------------------------------------------------------------:

task:----------------------:

interface Taskprop {
id: number;
removeOneTask: any;
task: string;
taskInput: any;
checkboxInput: any;
isChecked: boolean;
isTaskInputComplete: boolean;
validateInput: any;
taskListLenght: any;
}

const Tasck = (elm: Taskprop) => {

const {
id,
removeOneTask,
task,
taskInput,
checkboxInput,
isChecked,
isTaskInputComplete,
validateInput,
taskListLenght,
} = elm;
return (
<div className={isChecked && task.length > 2 ? "whenCheked task" : "task"}>
<label className="checkbox-container">
<input
type="checkbox"
checked={isChecked}
disabled={!isTaskInputComplete}
onChange={(e) => checkboxInput(id, e.target.checked)}
/>
{isChecked && task.length > 2 ? (
<img
className="checkbox-icon"
src="checked.svg"
alt="Checkbox Icon"
/>
) : (
<img
className={
isTaskInputComplete && task.length > 2
? "checkbox-icon"
: "checkbox-icon disabled"
}
src="unchecked.svg"
alt="Checkbox Icon"
/>
)}
</label>

{isTaskInputComplete ? (
<p className={isChecked ? "taskComplete" : ""}>{task}</p>
) : (
<input
type="text"
name=""
id=""
placeholder="write your task"
value={task}
onChange={(e) => taskInput(id, e.target.value)}
onKeyDown={(e) =>
task.length > 2 && e.key === "Enter" && validateInput(id)
}
onBlur={() => task.length > 2 && validateInput(id)}
/>
)}

<div className="btn-group">
{isTaskInputComplete ? (
<button className="btn-task" onClick={() => validateInput(id)}>
<img src="edit.svg" alt="edit task" />
</button>
) : (
<button
className={task.length < 3 ? "btn-task disabled" : "btn-task"}
disabled={task.length < 3}
onClick={() => validateInput(id)}
>
<img src="confirm.svg" alt="confirm task" />
</button>
)}
 <button
className={
!taskListLenght && !isTaskInputComplete
? "btn-task disabled"
: "btn-task "
}
disabled={!taskListLenght && !isTaskInputComplete}
onClick={() => removeOneTask(id)}
>
<img src="remove.svg" alt="remove task" />
</button>
</div>

{isChecked && (
<figure
style={{
width: "31px",
height: "31px",
display: "flex",
placeItems: "center",
position: "absolute",
top: -15,
right: -15,
}}
>
<img src="complete.svg" width={"12px"} alt="edit task" />
</figure>
)}
</div>
);
};

export default Tasck;

:---------------------------------------------------------------------------:

Confirm:-----------------:

import { Task } from "./todoHome";

interface RemoveAll {
setIsRemoveAllConfirm: boolean;
setTaskList: Task;
}

const Confirm = ({ setIsRemoveAllConfirm, setTaskList }: any) => {

return (
<div className="confirm-container">
<div className="confirm-main">
<h3>Are you sure want to remove all the task?</h3>
<div>
<button
className="btn-task-allComplete"
onClick={() => {
setTaskList([
{
id: Math.floor(Math.random() * 10000),
isChecked: false,
 task: "",
isTaskInputComplete: false,
},
]),
setIsRemoveAllConfirm(false);
}}
>
Yes
</button>
<button
className="btn-task-allRemove"
onClick={() => setIsRemoveAllConfirm(false)}
>
Cancel
</button>
</div>
</div>
</div>
);
};

export default Confirm;

:---------------------------------------------------------------------------: