MagicForm Patterns

async login(form: HTMLFormElement){
  const user = Object.fromEntries(new FormData(form) as any);
  
  return myApi.login(user);
}

async create(form: HTMLFormElement){
  const result = await fetch("/my-api",{method: "post",body: new FormData(form)});
  return result.json();
}

async search(form: HTMLFormElement) {
  const beforeFetch = Object.fromEntries(new FormData(form) as any);
  
  await new Promise((resolve) => setTimeout(resolve, 1000)); // debounce
  
  const result = await fetch(beforeFetch.search);
  
  const afterFetch = Object.fromEntries(new FormData(form) as any);
  
  if (afterFetch.search === beforeFetch.search) {
    return result;
  } else {
    return login(form);
  }
}