diff --git a/src/renderer/src/AppContext.jsx b/src/renderer/src/AppContext.jsx index eea5356..8f0535e 100644 --- a/src/renderer/src/AppContext.jsx +++ b/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 }) { {children} ); -} +} \ No newline at end of file diff --git a/src/renderer/src/components/Item.jsx b/src/renderer/src/components/Item.jsx index 9eb6d00..edfedb4 100644 --- a/src/renderer/src/components/Item.jsx +++ b/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 (
-
{text}
-
editItem()}> + editItem()} + /> + + )} + {!isEditMode && ( +
setIsEditMode(true)} + > + {text} +
+ )} + {!isEditMode && ( +
- {completed && } + )} + {completed && }
+ )}
); } -export default Item; +export default Item; \ No newline at end of file diff --git a/src/renderer/src/components/Item.module.css b/src/renderer/src/components/Item.module.css index 7ff8db6..dfe0f16 100644 --- a/src/renderer/src/components/Item.module.css +++ b/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 @@ } } } -} +} \ No newline at end of file diff --git a/src/renderer/src/img/edit.svg b/src/renderer/src/img/edit.svg new file mode 100644 index 0000000..c9b1726 --- /dev/null +++ b/src/renderer/src/img/edit.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file