[V2] Improve WhenVisible component to merge data and params props for a more flexible API

[PedroAugustoRamalhoDuarte]

Versions:

• @inertiajs/react version: v2-beta

Describe the problem:

In the current implementation of the WhenVisible component, it is not possible to use both data and params props simultaneously. The issue lies in the getReloadParams function, which either returns data or params but not both. To provide a more flexible and user-friendly API, it would be ideal to merge the data prop into params when both are provided.

Steps to reproduce:

1. Use the WhenVisible component with both data and params props.
2. The getReloadParams function will only consider data and ignore params.

<WhenVisible fallback={"Loading..."} data={["todos", "pagy"]} params={{
  data: {
    teste: true,
    page: pagy.page + 1,
  },
  preserveUrl: true,
}} />

Actual code

https://github.com/inertiajs/inertia/blob/88a765b3a3736a63b6619863b9bd872a5327f0d6/packages/react/src/WhenVisible.ts#L24

Expected behavior:

When both data and params are provided, the function should merge them into a single object, allowing both to work together.

A initial implementation for React can be something like:

const getReloadParams = (): Partial<ReloadOptions> => {
  const reloadParams: Partial<ReloadOptions> = { ...params }

  if (data) {
    reloadParams.only = (Array.isArray(data) ? data : [data]) as string[]
  }

  return reloadParams
}