Skip to content

U
updated
Commit f6b189c6 by Sujeeth AV
Options

Index.jsx

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