[SOLVED] Not deleting at first

[final sigil]

Previously I made a todo-list and now I'm adding appwrite as backend, and right now I'm facing the issue, when I click the todo delete button it doesn't delete the todo but when I click the delete button again the its delete the todo.

[dapper oracle]

Maybe you can share your code or some logs?

[final sigil]

wait I'm sahring the github repo

https://github.com/FallenCap/todo-list.git

and also I'm sharing a video which helps to understand what is the problem

[final sigil]

In Todos.jsx you will find the delete function

[dapper oracle]

Did you confirm the API call is made when you click the button?

[final sigil]

yes

[dapper oracle]

One thing that might be the problem is to make some sort of state change after the API call. If there's no system change, there's no re-render

[final sigil]

I print the deleted statement after the api call and its running.

and after that it reloads the page

[dapper oracle]

i don't see the print statement 🧐

[dapper oracle]

also it seems like the page is refreshing? 🧐

[final sigil]

yes bcz after printing the statement page relaods itself

[dapper oracle]

why?

[final sigil]

const deleteTodoHandler = async (id) => {
    try {
      db.deleteDocument(
        import.meta.env.VITE_APPWRITE_DATABASE_ID,
        import.meta.env.VITE_APPWRITE_COLLECTION_ID,
        id
      );
      console.log('deleted');
      window.location.reload();
    } catch (err) {
      console.log(err);
      window.location.reload();
    }
  };

here is the code

[dapper oracle]

why are you adding the reload?

[final sigil]

to render the list after newly add item or deleting item

[dapper oracle]

i don't think that's the right approach...

[final sigil]

I know but in the useEffect function if I gave the any payload or leave it empty it calls the function infinitely

useEffect(() => {
    const loadData = async () => {
      setLoader(true);
      try {
        const getTodos = await db.listDocuments(
          import.meta.env.VITE_APPWRITE_DATABASE_ID,
          import.meta.env.VITE_APPWRITE_COLLECTION_ID
        );
        setTodos(getTodos.documents);
      } catch (err) {
        console.log(err);
      }
    };
    loadData();
    setLoader(false);
  }, []);

[dapper oracle]

how do you know it calls the function infinitely?

[final sigil]

see this video

if I gave any payload then its happening

[dapper oracle]

what do you mean?

[final sigil]

useEffect(() => {
    const loadData = async () => {
      setLoader(true);
      try {
        const getTodos = await db.listDocuments(
          import.meta.env.VITE_APPWRITE_DATABASE_ID,
          import.meta.env.VITE_APPWRITE_COLLECTION_ID
        );
        setTodos(getTodos.documents);
      } catch (err) {
        console.log(err);
      }
    };
    loadData();
    setLoader(false);
  }, [todos]);

[final sigil]

I mean this code

[dapper oracle]

yes, that's causing the infinite loop. That todos at the bottom means "run this whenever todos changes" and you're changing todo in the loadData function. Does that make sense?

[final sigil]

Yes I know but I found a solution using useReducer

Its work on the submit function and load function correctly

Now I'm implementing it on the deleting function

[final sigil]

Thanks @dapper oracle to help me. Now it is working perfectly.