From fc1392ff11f53dc2c0a769f3e1e18b88542c1b52 Mon Sep 17 00:00:00 2001
From: Israa91 <eng.israa.1991@gmail.com>
Date: Wed, 28 Apr 2021 15:47:33 +0300
Subject: [PATCH] add checkbox to input

---
 src/components/AddTodo/index.js   | 10 ++++++++--
 src/components/Checkbox/index.js  | 13 +++++++++++++
 src/components/Checkbox/style.css |  0
 src/components/TodoItem/index.js  | 12 +++++++++---
 src/components/TodoList/index.js  |  1 +
 5 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Checkbox/index.js
 create mode 100644 src/components/Checkbox/style.css

diff --git a/src/components/AddTodo/index.js b/src/components/AddTodo/index.js
index b427633..d2ded3d 100644
--- a/src/components/AddTodo/index.js
+++ b/src/components/AddTodo/index.js
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { saveTodo } from '../../features/todoSlice';
+import Checkbox from '../Checkbox';
 
 const AddTodo = () => {
   const [todoText, setTodoText] = useState('');
+  const [check, setCheck] = useState(false);
   const dispatch = useDispatch();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -11,14 +13,18 @@ const AddTodo = () => {
     dispatch(
       saveTodo({
         text: todoText,
-        done: false,
+        done: check,
         id: Date.now(),
       })
     );
   };
   return (
     <form className="input" onSubmit={handleSubmit}>
-      <input type="text" onChange={(e) => setTodoText(e.target.value)} />
+      <span>
+        <input type="checkbox" onChange={(e) => setCheck(e.target.checked)} />
+
+        <input type="text" onChange={(e) => setTodoText(e.target.value)} />
+      </span>
     </form>
   );
 };
diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
new file mode 100644
index 0000000..febef07
--- /dev/null
+++ b/src/components/Checkbox/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { setCheck } from '../../features/todoSlice';
+
+const Checkbox = ({ checked, id }) => {
+  const dispatch = useDispatch();
+  const handleCheck = () => {
+    dispatch(setCheck(id));
+  };
+  return <input type="checkbox" checked={checked} onChange={handleCheck} />;
+};
+
+export default Checkbox;
diff --git a/src/components/Checkbox/style.css b/src/components/Checkbox/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/TodoItem/index.js b/src/components/TodoItem/index.js
index 5378d11..b6ce134 100644
--- a/src/components/TodoItem/index.js
+++ b/src/components/TodoItem/index.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
 import { deleteTodo, setCheck } from '../../features/todoSlice';
+import Checkbox from '../Checkbox';
 
 const TodoItem = ({ text, done, id }) => {
   const dispatch = useDispatch();
@@ -9,13 +11,12 @@ const TodoItem = ({ text, done, id }) => {
   };
 
   const handleClick = () => {
-    console.log(dispatch(deleteTodo(id)));
     dispatch(deleteTodo(id));
   };
   return (
     <li className="todoItem">
-      <input type="checkbox" checked={done} onChange={handleCheck} />
-
+      {/* <input type="checkbox" checked={done} onChange={handleCheck} /> */}
+      <Checkbox checked={done} id={id} />
       <span className={done ? 'todoItem--done' : null}>{text}</span>
       <button type="button" onClick={handleClick}>
         delete
@@ -23,5 +24,10 @@ const TodoItem = ({ text, done, id }) => {
     </li>
   );
 };
+TodoItem.propTypes = {
+  text: PropTypes.string.isRequired,
+  done: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+};
 
 export default TodoItem;
diff --git a/src/components/TodoList/index.js b/src/components/TodoList/index.js
index c41866c..30f0cb9 100644
--- a/src/components/TodoList/index.js
+++ b/src/components/TodoList/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
 import TodoItem from '../TodoItem';
 
 import { VisibilityFilter } from '../../features/filtersSlice';