Island to trigger a re-render.

[cedar ginkgo]

On my page, I have an island. That island is a modal form that requires the user to input some data. Once inputted, the user clicks "Submit".

This submission in the Island must then either
A. Call an api to submit that data /routes/api/myAPI and afterwards, triggers a page refreshed on the parent node.

or (if possible)
B. Call a POST method on a parent node's handler/routes/parentNode that is passed the form data, and processes the data, and does a new ctx.render(...) to trigger a refresh of the page.

PLEASE any guidance would be appreciated.

I have tried and failed to pass a callback function from the parentNode to the child Island.

I believe this is because

Passing props to islands is supported, but only if the props are JSON serializable. This means that you can only pass primitive types, plain objects, and arrays. It is currently not possible to pass complex objects like Date, custom classes, or functions.

[rigid wharf]

As far as I understand your question, you already have an island, that handles the submit buttons behavior. On click, you want that button to make a post request to some route?
Maybe just await the result and check if the result is equal to some value like please refresh or something you like. Then just ```ts
window.location.reload();

[olive fjord]

@cedar ginkgo take a look at https://github.com/denoland/saaskit

For the form submission, you can either input the corresponding URL value in the form action attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
Or either handling the form submission with js (event.preventDefault() https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault should prevent the form from submitting)

[cedar ginkgo]

Thank you both. My problem was the way I was architecting it. The form on the button using <form action="/api/invite" method="post"> just wasn't working for god know why.

So I said screw it, moved the trigger to a button like so <button onClick={handleSubmit}>Submit</button> and my handleSubmit function looks like

const handleSubmit = useCallback(async () => {
    try {
      const response = await fetch("/api/invite", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(fields),
      })

      switch (response.status) {
        case 200: {
          location.reload()
          break
        }
        case 403: {
          const duplicate = await response.text()
          console.error("Error submitting form on duplicate", duplicate)
          setError(true)
          break
        }
        default: {
          throw new Error("Failed to submit form")
        }
      }
    } catch (e) {
      setError(true)
      console.error("Error submitting form:", e)
    }
  }, [fields])

After the reload, the modal closes, and the page reloads triggering the handle method on the original page, which triggers a fetch on the server-side for a rendered page which checks the database.

If this was client-side rendered I wouldn't have to make so many calls to the database, but oh well