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