Merge pull request #11 from GSG-G9/components

add checkbox to input

src/components/AddTodo/index.js

@@ -1,24 +1,30 @@
 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();
     console.log(todoText);
     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>
   );
 };

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;

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,19 +11,23 @@ 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
       </button>
     </li>
   );
 };
+TodoItem.propTypes = {
+  text: PropTypes.string.isRequired,
+  done: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+};
 
 export default TodoItem;

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';