Laravel Inertia onSuccess en el objeto router y preserveScroll

Antes de terminarya esta sección quiero dar aquí una clase extra para dar algunas consideraciones adicionales que puedes tener en cuenta para hacer la recarga de la página un poco más eficiente una de ellas es la que te comentaba obviamente esto:

create() {
   this.todoSelected = 0
   router.post(route('todo.store', {
       name: this.form.name
   }))
   setTimeout(() => window.location.reload(), 500)
},

Me parece horrible pero por más que sea est ahí en caso de que tengas muchas complicaciones siempre puedes emplear el Time out para recargar la página pasado un tiempo obviamente como te digo me parece horrible porque no es un tiempo sincronizado con lo que tarda realmente la operación entonces puede que necesite un poco más un poco menos puede traer aquí muchos problemas pero por más que sea es una forma se pudiera decir válida la otra forma era lo que te comentaba que es empleando las opciones de los métodos los métodos tipo post put path delete y también el de get tenemos varias opciones.

Callbacks personalizados

En este apartado, vamos a hablar sobre los métodos tipo callback que se invocan según el estado de la petición, por ejemplo:

• onBefore, cuando se inicia la petición.
• onProgress, cuando la petición está en proceso.
• onSuccess, cuando existe una respuesta.
• onError, cuando ocurre algún problema.

Específicamente, tenemos:

router.<method>('/post', <data>, {
 onBefore: visit => {},
 onStart: visit => {},
 onProgress: progress => {},
 onSuccess: page => {},
 onError: errors => {},
 onFinish: visit => {},
})

Que se van a ejecutar en base a el estado de la petición bueno estas serían al inicio esta sería cuando está en progreso esta cuando fue completada si fue cancelada si fue finalizada y si ocurrió algún error entonces podemos aprovechar esto para mejorar el proceso que ya tenemos que recuerda que todo comienza es con los problemas de la sincronización al momento de realizar las operaciones ya yo lo implemente entonces simplemente te lo voy a mostrar para que veas cómo funciona entonces lógicamente lo que nosotros vamos a necesitar sería justamente el de onFinish que se ejecutaría al momento de terminar la operación y con esto poder recargar la página entonces por aquí fíjate que ya lo implemente en este caso te estoy mostrando el de remove:

router.delete(route('todo.destroy', this.deleteTodoRow), {

    onSuccess: (page) => {
        // console.log(page)
        console.log(page.props.todos)
        this.dtodos = page.props.todos
        // setTimeout(() => window.location.reload(), 500)
    },
})

Esto por aquí muy pendiente lo complicado de aquí sería sincronizar esto colocar esto bien porque ya está muy anidado pero aquí tenemos el método aquí tenemos la ruta sería hasta acá colocas una coma colocas aquí las llaves para indicar que va a ser un objeto de momento quita esto Si quieres y aquí colocarías el método mencionado fíjate que aunque esté marcando un error Realmente está bien el VSC creo que no está funcionando aquí bien no sé porque aquí me marca como un error entonces qué trae el objeto page el dichoso objeto page trae este Sería para remover voy a quitar uno aquí lo tenemos Bueno este sería para ver cuál fue el primer la impresión el page y el otro el de todos trae básicamente lo que traía el prod page que habíamos antes información sobre el componente aquí trae los props si está autenticado el carrito que lo colocamos nosotros errores mensaje flash que lo configuramos nosotros este que no tiene nada que ver aquí el de todos que es el que nos interesa aquí tenemos fíjate el listado de los todos que son los que pudiéramos emplear ya una vez recargado por así decirlo es decir ya realizada la operación ya sea de creación actualización o en este caso eliminación y tenemos el array actualizado por lo tanto se lo podemos asignar de manera directa para que sobre escriba lo que tenemos actualmente y eso es lo que yo hago para acceder Simplemente tienes que seguir aquí el árbol no tiene nada de raro es un objeto entonces ahí lo sigues qué fue lo que yo hice por aquí y asunto zanjado ya con eso se actualiza perfectamente.

Preservar el scroll

Cuál es el otro problema que tenemos fíjate aquí el scroll ya comentando aquí una cosita d un ti para eso aquí tenemos la opción de preserve scroll todo esto lo puedes encontrar en la documentación oficial qué parámetros le puedes pasar aquí y lo que hace es tal cual indica su nombre preservar el scroll por lo tanto si estamos por allí abajo perdidos la vida por ejemplo aquí fíjate el scroll se va a preservar que era lo que queríamos o lo que deberíamos de querer para este tipo de casos ya lo que tú quieras hacer aquí si quieres hacer una animación o lo que sea ya eso depende de ti pero el proceso ya funciona sin problemas Entonces esta sería la forma recomendada para hacer esta sincronización esta sería la de remover actualizar como te digo no haría falta porque ya lo estamos modificando directamente el todo entonces ya lo puedo dejar así aquí como te digo marca error pero está bien es un poco el anidamiento que tenemos aquí pendiente con la ruta colocas la coma coloca Bueno aquí sería las para el dep sería la parte de la Data y luego de esto colocas el success Finish error lo que quieras manejar y lo colocas finalmente el método a mí no me termina mucho de convencer esto yo creo que era mejor ojalá lo cambien en algún momento era mejor hacer el proceso de o emplear el esquema que tenemos en javascrip de promesas que ya creo que eso es casi un estándar Se podría decir pero buen nos tenemos una especie de equivalente que sería el que te mostraba antes así que finalmente para solventar el problema que te comentaba antes te recomendaría que emplees este esquema claro está por lo demás aquí es lo mismo simplemente asignamos todos los procs que en este caso ya sería los que tenemos creado vamos a chequearlo aquí rapidito coloco aquí voy al todo si todo si damos un s y fíjate que ya aquí lo tenemos así que ya con eso solventamos el problema y vamos a ya finalizar esta sección y continuar con la siguiente:

router.delete(route('todo.destroy', this.deleteTodoRow), {
    preserveScroll: true,
    onSuccess: (page) => {
        // console.log(page)
        console.log(page.props.todos)
        this.dtodos = page.props.todos
        // setTimeout(() => window.location.reload(), 500)
    },
})