Edit todo items

src/renderer/src/AppContext.jsx

@@ -45,6 +45,7 @@ const appStateReducer = (state, action) => {
 				if (i.key === action.item.key) {
 					return Object.assign({}, i, {
 						status: action.item.status,
+						text: action.item.text
 					});
 				}
 				return i;
@@ -108,4 +109,4 @@ export function AppStateProvider({ children }) {
 			<AppContext.Provider value={value}>{children}</AppContext.Provider>
 		</div>
 	);
-}
+}

src/renderer/src/components/Item.jsx

@@ -1,9 +1,14 @@
+import { useState, useRef } from "react";
 import { useAppReducer } from "../AppContext.jsx";
 import styles from "./Item.module.css";
 
 // Individual todo item
 function Item({ item }) {
 	const dispatch = useAppReducer();
+
+	const [isEditMode, setIsEditMode] = useState(false);
+	const editValueRef = useRef(item.text);
+
 	let text = item.text;
 	let paused = item.status === "paused";
 	let completed = item.status === "completed";
@@ -12,6 +17,13 @@ function Item({ item }) {
 		dispatch({ type: "DELETE_ITEM", item });
 	}
 
+	function editItem() {
+		const editedValue = editValueRef.current.value === "" ? text : editValueRef.current.value;
+		const editedItem = { ...item, text: editedValue };
+		dispatch({ type: "UPDATE_ITEM", item: editedItem });
+		setIsEditMode(false);
+	}
+
 	function pauseItem() {
 		const pausedItem = { ...item, status: "paused" };
 		dispatch({ type: "UPDATE_ITEM", item: pausedItem });
@@ -29,13 +41,37 @@ function Item({ item }) {
 
 	return (
 		<div className={styles.item} tabIndex="0">
-			<div className={styles.itemname}>{text}</div>
-			<div
+			{isEditMode && (
+				<form 
+					className={styles.editform}
+					onSubmit={() => editItem()}>
+					  <input
+						ref={editValueRef}
+						defaultValue={text}
+						autoFocus
+						onBlur={() => editItem()}
+					  />
+				</form>
+			  )}
+			  {!isEditMode && (
+				<div
+				  className={styles.itemname}
+				  onDoubleClick={() => setIsEditMode(true)}
+				>
+				  {text}
+				</div>
+			  )}
+			  {!isEditMode && (
+				<div
 				className={`${styles.buttons} ${
 					completed ? styles.completedButtons : ""
 				}`}
 			>
-				{completed && <button className={styles.empty} tabIndex="0"></button>}
+				<button
+					className={styles.edit}
+					onClick={() => setIsEditMode(true)}
+					tabIndex="0"
+				></button>
 				<button
 					className={styles.delete}
 					onClick={deleteItem}
@@ -62,9 +98,11 @@ function Item({ item }) {
 						tabIndex="0"
 					></button>
 				)}
+				{completed && <button className={styles.empty} tabIndex="0"></button>}
 			</div>
+			  )}
 		</div>
 	);
 }
 
-export default Item;
+export default Item;

src/renderer/src/components/Item.module.css

@@ -38,10 +38,25 @@
 		}
 	}
 
+	.editform {
+		width: 100%;
+		input {
+			width: 100%;
+			height: 24px;
+			padding: 0 10px;
+			background: var(--input-color);
+			border: none;
+			border-radius: 3px;
+			box-sizing: border-box;
+			color: var(--font-color);
+			outline: none;
+		}
+	}
+
 	.buttons {
 		display: flex;
 		justify-content: space-between;
-		width: 100px;
+		width: 140px;
 
 		button {
 			position: relative;
@@ -86,6 +101,14 @@
 				}
 			}
 
+			&.edit {
+				width: 30px;
+				background: no-repeat url("../img/edit.svg");
+				&:after {
+					background: var(--blue);
+				}
+			}
+
 			&::after {
 				display: block;
 				content: "";
@@ -110,4 +133,4 @@
 			}
 		}
 	}
-}
+}