Skip to content

U
updated
Commit f6b189c6 by Sujeeth AV
Options

Index.jsx

parent 2e8c0bf3
Showing with 61 additions and 130 deletions
src/Form/form/Index.jsx
......@@ -10,14 +10,11 @@ export const Input = () => {
const [task, setTask] = useState("");
const [store, setStore] = useState([]);
const [editIndex, setEditIndex] = useState(null);
const [editedTask, setEditedTask] = useState("");
const [loading, setLoading] = useState(false);
const [isNewTodoAdded, setIsNewTodoAdded] = useState(false);
const editableRef = useRef(null);
const lastCursorPos = useRef(0);
const debounceTimeout = useRef(null);
const lastClickEvent = useRef(null);
const fetchTodos = useCallback(async () => {
try {
......@@ -35,118 +32,72 @@ export const Input = () => {
fetchTodos();
}, [fetchTodos]);
const saveCursorPosition = () => {
try {
if (editableRef.current) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(editableRef.current);
preCaretRange.setEnd(range.endContainer, range.endOffset);
lastCursorPos.current = preCaretRange.toString().length;
}
}
} catch (error) {
console.error("Error saving cursor position:", error);
}
};
const restoreCursorPosition = () => {
try {
if (editableRef.current) {
const range = document.createRange();
const selection = window.getSelection();
let found = false;
const findPosition = (node, remainingPos) => {
if (node.nodeType === Node.TEXT_NODE) {
const length = node.nodeValue.length;
if (remainingPos <= length) {
range.setStart(node, remainingPos);
found = true;
return;
}
remainingPos -= length;
} else {
for (let i = 0; i < node.childNodes.length && !found; i++) {
findPosition(node.childNodes[i], remainingPos);
}
}
};
const placeCaretAtClick = () => {
const el = editableRef.current;
const event = lastClickEvent.current;
findPosition(editableRef.current, lastCursorPos.current);
if (!found) {
range.selectNodeContents(editableRef.current);
range.collapse(false);
} else {
range.collapse(true);
if (el && event) {
let range, sel;
if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(event.clientX, event.clientY);
} else if (document.caretPositionFromPoint) {
const pos = document.caretPositionFromPoint(event.clientX, event.clientY);
range = document.createRange();
range.setStart(pos.offsetNode, pos.offset);
}
selection.removeAllRanges();
selection.addRange(range);
if (range) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
} catch (error) {
console.error("Error restoring cursor position:", error);
}
};
useEffect(() => {
if (editableRef.current && editIndex !== null) {
try {
editableRef.current.focus();
setTimeout(restoreCursorPosition, 0);
} catch (error) {
console.error("Error focusing editable element:", error);
setEditIndex(null);
}
}
}, [editIndex, editedTask]);
const handleEdit = (e) => {
try {
saveCursorPosition();
const newValue = e.currentTarget.textContent;
setEditedTask(newValue);
const updatedStore = [...store];
const original = updatedStore[editIndex];
updatedStore[editIndex] = { ...original, task: newValue };
setStore(updatedStore);
setStore(prevStore => {
const updatedStore = [...prevStore];
if (updatedStore[editIndex]) {
updatedStore[editIndex] = {
...updatedStore[editIndex],
task: newValue
};
}
return updatedStore;
});
if (debounceTimeout.current) {
clearTimeout(debounceTimeout.current);
}
debounceTimeout.current = setTimeout(() => {
uptTodo(original.id, {
id: original.id,
const currentItem = store[editIndex];
if (currentItem) {
uptTodo(currentItem.id, {
id: currentItem.id,
task: newValue,
completed: original.completed,
}).catch((error) => {
console.error("Error saving todo:", error);
});
}, 1000);
} catch (error) {
console.error("Error during edit:", error);
setEditIndex(null);
completed: currentItem.completed,
}).catch(console.error);
}
}, 1000);
};
const handleChange = (e) => setTask(e.target.value);
const startEdit = (index) => {
try {
const startEdit = (index, clickEvent = null) => {
setEditIndex(index);
setEditedTask(store[index].task);
} catch (error) {
console.error("Error starting edit:", error);
setEditIndex(null);
lastClickEvent.current = clickEvent;
setTimeout(() => {
if (editableRef.current) {
const actualText = store[index]?.task || "";
editableRef.current.innerText = actualText;
editableRef.current.focus();
placeCaretAtClick();
}
}, 0);
};
const endEdit = () => {
......@@ -158,7 +109,7 @@ export const Input = () => {
try {
setIsNewTodoAdded(true);
const res = await addTodo(task);
setStore([...store, res.data]);
setStore(prev => [...prev, res.data]);
setTask("");
} catch (error) {
console.error("Error adding todo:", error);
......@@ -166,12 +117,13 @@ export const Input = () => {
setTimeout(() => setIsNewTodoAdded(false), 500);
}
};
const Delete = async (id) => {
const confirmDelete = window.confirm("Are you sure you want to delete?");
if (confirmDelete) {
try {
await delTodo(id);
setStore(store.filter(item => item.id !== id));
setStore(prev => prev.filter(item => item.id !== id));
} catch (error) {
console.error("Error deleting todo:", error);
}
......@@ -180,59 +132,38 @@ export const Input = () => {
const toggleComplete = async (index) => {
try {
const newStore = [...store];
newStore[index] = {
...newStore[index],
completed: !newStore[index].completed
};
setStore(newStore);
const updated = [...store];
updated[index].completed = !updated[index].completed;
setStore(updated);
await uptTodo(newStore[index].id, newStore[index]);
await uptTodo(updated[index].id, updated[index]);
} catch (error) {
console.error("Error toggling complete:", error);
fetchTodos();
}
};
const renderEditableContent = () => {
try {
return (
const renderEditableContent = () => (
<div
ref={editableRef}
contentEditable
suppressContentEditableWarning
onBlur={endEdit}
onInput={handleEdit}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.currentTarget.blur();
}
}}
className={`${styles.task} ${store[editIndex]?.completed ? 'completed' : ''}`}
style={{
display: 'inline-block',
width:'100%',
boxSizing:'border-box'
width: '100%',
boxSizing: 'border-box',
outline: 'none',
whiteSpace: 'pre-wrap',
// margin: 0,
marginscreenLeft:'0.2rem',
padding: '4px 0',
userSelect: 'text'
}}
>
{editedTask}
</div>
);
} catch (error) {
console.error("Error rendering editable content:", error);
return (
<span
className={`${styles.task} ${store[editIndex]?.completed ? styles.completed : ''}`}
onClick={() => startEdit(editIndex)}
>
{typeof store[editIndex]?.task === 'string'
? store[editIndex].task
: JSON.stringify(store[editIndex]?.task)}
</span>
/>
);
}
};
return (
<MyTask.Provider value={{ store, setStore }}>
......@@ -242,7 +173,7 @@ export const Input = () => {
store={store}
editIndex={editIndex}
renderEditableContent={renderEditableContent}
startEdit={startEdit}
startEdit={(index, e) => startEdit(index, e)}
toggleComplete={toggleComplete}
Delete={Delete}
isNewTodoAdded={isNewTodoAdded}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment