feat: implement edit todo functionality

src/components/Todo.js

@@ -1,25 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
 import { useDispatch } from "react-redux";
-import { deleteTodo } from "../store/actions";
+import { deleteTodo, editTodo } from "../store/actions";
 
 export default function Todo({ todo }) {
   const dispatch = useDispatch();
+  const [editClicked, setEditClicked] = useState(false);
+  const [newText, setNewText] = useState(todo.text);
 
   const checkTodo = () => {
     document.querySelector(`#todo-${todo.id}`).classList.toggle("check");
   };
 
+  const onKeyPressHandler = event => {
+    if (event.key === "Enter" && newText.length !== 0) {
+      dispatch(editTodo(todo.id, newText));
+      toggleInput();
+    }
+  };
+
+  const toggleInput = () => {
+    setEditClicked(e => !e);
+  };
+
   return (
     <div className="todo">
-      <p
-        id={`todo-${todo.id}`}
-        style={{ display: "inline-block" }}
-        onClick={checkTodo}
-      >
-        {todo.text}
-      </p>
-      <span onClick={() => dispatch(deleteTodo(todo.id))}>
-        <i className="fas fa-trash-alt"></i>
+      {editClicked ? (
+        <input
+          className="edit-input"
+          type="text"
+          value={newText}
+          onChange={e => setNewText(e.target.value)}
+          onKeyPress={onKeyPressHandler}
+        />
+      ) : (
+        <p
+          id={`todo-${todo.id}`}
+          style={{ display: "inline-block" }}
+          onClick={checkTodo}
+        >
+          {todo.text}
+        </p>
+      )}
+      <span>
+        <span onClick={toggleInput}>
+          <i className="fas fa-edit"></i>
+        </span>
+        <span onClick={() => dispatch(deleteTodo(todo.id))}>
+          <i className="fas fa-trash-alt"></i>
+        </span>
       </span>
     </div>
   );

src/index.css

@@ -54,7 +54,8 @@ body {
       font-size: 2.3rem;
       color: #2a2366; }
       .Home .todos .todo p {
-        cursor: pointer; }
+        cursor: pointer;
+        overflow: auto; }
       .Home .todos .todo:nth-child(odd) {
         background-color: #a7bfe8; }
       .Home .todos .todo i {
@@ -90,3 +91,17 @@ body {
       letter-spacing: 2px;
       margin: 0;
       margin-top: 5px; }
+
+.fa-edit {
+  margin-right: 10px; }
+
+.edit-input {
+  background-color: transparent;
+  border: none;
+  padding: 20px 0px;
+  color: #2a2366;
+  font-size: 2.3rem;
+  font-family: "Pathway Gothic One", sans-serif;
+  outline: none;
+  font-style: italic;
+  width: 80%; }

src/sass/index.scss

@@ -69,6 +69,7 @@ body {
       color: rgb(42, 35, 102);
       p {
         cursor: pointer;
+        overflow: auto;
       }
       &:nth-child(odd) {
         background-color: #a7bfe8;
@@ -114,3 +115,19 @@ body {
     }
   }
 }
+
+.fa-edit {
+  margin-right: 10px;
+}
+
+.edit-input {
+  background-color: transparent;
+  border: none;
+  padding: 20px 0px;
+  color: #2a2366;
+  font-size: 2.3rem;
+  font-family: "Pathway Gothic One", sans-serif;
+  outline: none;
+  font-style: italic;
+  width: 80%;
+}

src/store/actions.js

@@ -1,16 +1,25 @@
 export const ADD_TODO = "addTodo";
 export const DEL_TODO = "deleteTodo";
+export const EDIT_TODO = "editTodo";
 
-export const addTodo = (data) => {
+export const addTodo = data => {
   return {
     type: ADD_TODO,
-    data,
+    data
   };
 };
 
-export const deleteTodo = (id) => {
+export const deleteTodo = id => {
   return {
     type: DEL_TODO,
+    id
+  };
+};
+
+export const editTodo = (id, newText) => {
+  return {
+    type: EDIT_TODO,
     id,
+    newText
   };
 };

src/store/reducers/todos.js

@@ -16,6 +16,10 @@ export default (
       return [...state, action.data];
     case actions.DEL_TODO:
       return state.filter((todo) => todo.id !== action.id);
+    case actions.EDIT_TODO:
+      return state.map((todo) =>
+        todo.id === action.id ? { text: action.newText, id: todo.id } : todo
+      );
     default:
       return state;
   }