Refactor Subtodos so they work correctly

src/components/Todos.tsx

@@ -130,13 +130,19 @@ function ChangeTodo({todo, setTodo, handleCancel}: {todo: Todo, setTodo: (todo:
 
 export function Todos({style}: {style?: any}) {
   const [todos, setTodos] = useLocalStorage<Todo[]>("todos",[]);
-  const setDone=(i: number,todo: Todo, done: boolean) => 
+  const setDone=(todo: Todo, done: boolean) => {
-    setTodos([...todos.slice(0,i),
+      const i = todos.indexOf(todo);
+      setTodos([...todos.slice(0,i),
     {name: todo.name, id: todo.id, done: done, description: todo.description, to: todo.to, from: todo.from, subs: todo.subs},
     ...todos.slice(i+1)]);
+      }
 
-  const setDoneSub=(i: number, j: number, stodo: Subtodo, done: boolean) => {
+  const setDoneSub=(todo: Todo, stodo: Subtodo, done: boolean) => {
-    const todo = todos[i];
+  const i = todos.indexOf(todo);
+  let j = -1;
+  if (todo.subs!.length > 0){
+    j = todo.subs!.indexOf(stodo);
+  }
     setTodos([...todos.slice(0,i),
     {name: todo.name, id: todo.id, done: todo.done, description: todo.description, to: todo.to, from: todo.from, 
         subs: [...todo.subs!.slice(0,j), 
@@ -144,16 +150,22 @@ export function Todos({style}: {style?: any}) {
         , ...todo.subs!.slice(j+1)]},
     ...todos.slice(i+1)]);}
 
-  const deleteSubtodo=(i: number, j: number) => {
+  const deleteSubtodo=(todo: Todo, stodo: Subtodo) => {
-    const todo = todos[i];
+  const i = todos.indexOf(todo);
+  let j = -1;
+  if (todo.subs!.length > 0){
+    j = todo.subs!.indexOf(stodo);
+  }
     setTodos([...todos.slice(0,i),
     {name: todo.name, id: todo.id, done: todo.done, description: todo.description, to: todo.to, from: todo.from, 
         subs: [...todo.subs!.slice(0,j), ...todo.subs!.slice(j+1)]},
     ...todos.slice(i+1)]);}
 
-  const deleteTodo=(i: number) => 
+  const deleteTodo=(todo: Todo) => {
+    const i = todos.indexOf(todo);
     setTodos([...todos.slice(0,i),
     ...todos.slice(i+1)]);
+  }
 
   const setTodo= (todo: Todo) => {
     handleClose();
@@ -171,8 +183,9 @@ const handleClose = () => {
 const  [open2, setOpen2] = useState(false);
 const  [edit, setEdit] = useState<Todo>({name: "", description: "", done: false, id: "", subs: []});
 const  [editI, setEditI] = useState<number>(0);
-const handleClickOpen2 = (todo: Todo, i: number) => {
+const handleClickOpen2 = (todo: Todo) => {
   setOpen2(true);
+  const i = todos.indexOf(todo);
   setEdit(todo);
   setEditI(i);
 };
@@ -183,22 +196,28 @@ const handleClose2 = () => {
 const  [open3, setOpen3] = useState(false);
 const  [editSub, setEditSub] = useState<Subtodo>({name: "", description: "", done: false, id: ""});
 const  [editJ, setEditJ] = useState<number>(0);
-const handleClickOpenSubtodo = (todo: Subtodo, i: number, j: number) => {
+const handleClickOpenSubtodo = (todo: Todo) => {
   setOpen3(true);
+  const i = todos.indexOf(todo);
   setEditSub(todo);
   setEditI(i);
-  setEditJ(j > -1 ? j : todos[i].subs!.length);
+  setEditJ(todo.subs!.length);
 };
 const handleCloseSubtodo = () => {
   setOpen3(false);
 };
 
 const  [open4, setOpen4] = useState(false);
-const handleClickOpenSubtodo2 = (todo: Subtodo, i: number, j: number) => {
+const handleClickOpenSubtodo2 = (todo: Todo, stodo: Subtodo) => {
   setOpen4(true);
-  setEditSub(todo);
+  const i = todos.indexOf(todo);
+  let j = -1;
+  if (todo.subs!.length > 0){
+    j = todo.subs!.indexOf(stodo);
+  }
+  setEditSub(stodo);
   setEditI(i);
-  setEditJ(j > -1 ? j : todos[i].subs!.length);
+  setEditJ(j);
 };
 const handleCloseSubtodo2 = () => {
   setOpen4(false);
@@ -245,15 +264,15 @@ const editSubtodo= (todo: Subtodo) => {
       <div key={todo.id}>
           <Box sx={{display: "flex", flexDirection: "columns"}}>
             <TodoItem key={todo.id} todo={todo}/>
-            <Checkbox checked={todo.done} onChange={(e) => setDone(i, todo,e.target.checked)}></Checkbox>
+            <Checkbox checked={todo.done} onChange={(e) => setDone(todo,e.target.checked)}></Checkbox>
             <Tooltip title="Add Subtodo">
-                <Button onClick={() => handleClickOpenSubtodo(todo, i,-1)}><AddTaskRoundedIcon/></Button>
+                <Button onClick={() => handleClickOpenSubtodo(todo)}><AddTaskRoundedIcon/></Button>
             </Tooltip>
             <Tooltip title="Edit Todo">
-                <Button onClick={() => handleClickOpen2(todo, i)}><EditRoundedIcon/></Button>
+                <Button onClick={() => handleClickOpen2(todo)}><EditRoundedIcon/></Button>
             </Tooltip>
             <Tooltip title="Delete Todo">
-                <Button onClick={() => deleteTodo(i)}><DeleteOutlineRoundedIcon/></Button>
+                <Button onClick={() => deleteTodo(todo)}><DeleteOutlineRoundedIcon/></Button>
             </Tooltip>
           </Box>
             {(todo.subs && todo.subs.filter((td) => !td.done || showChecked).length > 0) &&
@@ -263,12 +282,12 @@ const editSubtodo= (todo: Subtodo) => {
             <div key={stodo.id}>
                 <Box sx={{display: "flex", flexDirection: "columns"}}>
                     <TodoItem key={todo.id} todo={stodo}/>
-                    <Checkbox checked={stodo.done} onChange={(e) => setDoneSub(i, j, stodo,e.target.checked)}></Checkbox>
+                    <Checkbox checked={stodo.done} onChange={(e) => setDoneSub(todo, stodo,e.target.checked)}></Checkbox>
                     <Tooltip title="Edit Subtodo">
-                        <Button onClick={() => handleClickOpenSubtodo2(stodo, i, j)}><EditRoundedIcon/></Button>
+                        <Button onClick={() => handleClickOpenSubtodo2(todo, stodo)}><EditRoundedIcon/></Button>
                     </Tooltip>
                     <Tooltip title="Delete Subtodo">
-                        <Button onClick={() => deleteSubtodo(i,j)}><DeleteOutlineRoundedIcon/></Button>
+                        <Button onClick={() => deleteSubtodo(todo, stodo)}><DeleteOutlineRoundedIcon/></Button>
                     </Tooltip>
                 </Box>
                 {(j + 1) < todo.subs!.filter((td) => !td.done || showChecked).length && <Divider/>}