Why using confirmation dialog with sweetalert2 reactive for var does not work?
In laravel 11 / livewire 3 app I use sweetalert2 ^11.12.1 to ask from user for confirmation of action. For this in the component have methods:
class UserReaction extends Component
{
# retrieved value from db - complains count for model
#[Reactive]
public int $complainsCount = 0;
...
/* Show Confirm dialog to complain to this model*/
public function confirmComplain()
{
if ( ! LoggedUserFacade::checkUserLogged()) {
self::dispatchAlert(DispatchAlertTypeEnum::WARNING, 'You need to login firstly to complain !');
}
self::dispatchConfirm(message: 'Do you want to complain to this '.getModelTitle($this->modelType).' ?',
actionType: $this->modelType, id: $this->model->id);
}
/* on Confirm dialog OK selected to save complain to this model */
#[On('clientConfirmAction')]
public function clientConfirmAction(string $actionType, ?int $id = null)
{
if ($id !== $this->model->id or $actionType !== $this->modelType) {
return;
}
Complain::create([
'model_id' => $id,
'model_type' => $actionType,
'user_id' => auth()->user()->id
]);
$this->retrieveComplainsCount();
}
/* on Confirm dialog Cancel selected no action */
#[On('makeActionCancel')]
public function clientCancelAction(?string $modelType = null, ?int $id = null)
{
}
/*
retrieve complains count from db
*
* @return void
*/
protected function retrieveComplainsCount()
{
$this->complainsCount = Complain
::getByModelType($this->modelType)
->getByModelId($this->model->id)
->count();
}
...
Method self::dispatchConfirm( dispatch event which is catched in resources/js/app.js:
window.addEventListener("clientConfirm", (event) => {
Swal.fire({
icon: event.detail[0].type,
title: event.detail[0].title,
html: event.detail[0].message,
showConfirmButton: true,
showCancelButton: true,
confirmButtonColor: "#d33",
cancelButtonColor: "#33cc33",
confirmButtonText: "Yes",
}).then((result) => {
if (result.isConfirmed) {
Livewire.dispatch("clientConfirmAction", {
actionType: event.detail[0].actionType,
id: event.detail[0].id,
options: event.detail[0].options,
});
} else {
Livewire.dispatch("makeActionCancel", {
actionType: event.detail[0].actionType,
id: event.detail[0].id,
options: event.detail[0].options,
});
}
});
});
next clientConfirmAction event is dispatched and data are saved, but reactivity does not work in this case
debugging sql I see not only 2 requests with complains table :
Time(in ms) 0.45 :
SELECT *
FROM `users`
WHERE `id` = 1 limit 1
Time(in ms) 18.25 :
INSERT INTO `complains` (`model_id`, `model_type`, `user_id`)
VALUES (1161, 'App\\Models\\News', 1)
Time(in ms) 0.6 :
SELECT count(*) AS aggregate
FROM `complains`
WHERE `complains`.`model_type` = 'App\\Models\\News' AND `complains`.`model_id` = '1161'
Time(in ms) 0.83 :
SELECT *
FROM `news`
WHERE `news`.`id` = 1100 limit 1
Time(in ms) 0.57 :
SELECT *
FROM `news`
WHERE `news`.`id` = 1042 limit 1
but many requests to news table (for any news model on the page).
If to save data without confirmation dialog and in confirmComplain method save data at once :
public function confirmComplain()
{
Complain::create([
'model_id' => $id,
'model_type' => $actionType,
'user_id' => auth()->user()->id
]);
$this->retrieveComplainsCount();
}
then I see only 2 sql :
INSERT INTO `complains` (`model_id`, `model_type`, `user_id`)
VALUES (1161, 'App\\Models\\News', 1)
Time(in ms) 0.6 :
SELECT count(*) AS aggregate
FROM `complains`
WHERE `complains`.`model_type` = 'App\\Models\\News' AND `complains`.`model_id` = '1161'
and not numerous requests with :
`SELECT * F```
How to make confirmation dialog to keep Reactive for $complainsCount var ?
Please or to participate in this conversation.