Dynamic Livewire poll

125 views Asked by At

I am new to the PHP and Laravel community, I am coming from Python and React :-). I have an issue here, I am trying to use the poll function dynamically, but this doesn't seem to be possible. I am using PHP 8.2.12 and Laravel 10.28.0.

Basically, what I want to do, I want to call the getAvailability function, on mount with timeInterval 180s. Then when I call the handleRebuildClick function, I want to reduce the poll time to 6s, Lastly when the $rebuildProgress is 100, I want to increase the poll time to 180s again.

Currently, when I call the function in mount, it works fine, then I click handleRebuildClick function and it reduces the time to 6s, but when the rebuildProgress is at 100, it correctly updates the $timeInterval variable, but the poll keeps running every 6s instead of the new 180s.

This is what I've tried: In my blade template:

<div>
    <div class="flex content-between mb-4">
        <button wire:click="handleSyncClick" class="bg-primary text-white text-xs w-1/2 py-2 rounded uppercase mr-2">
            Sync Products
        </button>

        <div wire:poll.{{$timeInterval}}s='getAvailability' class="w-1/2">
            @if ($rebuildAvailability || $rebuildProgress == 100)
                <button wire:click="handleRebuildClick"
                    class="bg-primary text-white text-xs w-full py-2 rounded uppercase" id="rebuildButton">
                    Rebuild Feeds
                </button>
            @else
                <button class="relative bg-gray-300 text-white py-2 px-4 w-full rounded">
                    <div class="overflow-hidden h-full text-xs flex rounded bg-gray-300 animate-progress">
                        <div style="width:50%;"
                            class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gray-300 transition-all duration-500 ease-in-out">
                            <span>REBUILDING {{ $rebuildProgress }}%</span>
                        </div>
                    </div>
                </button>
            @endif
        </div>
    </div>
</div>

Then in my Component:

<?php

namespace App\Livewire;

use App\Common\Api;

class SyncButtons extends MyComponent
{

    public $timeInterval = 180;
    public $pollTime = "long";

    public $loginStatus;

    public $syncAvailablity = 1;
    public $syncProgress = 0;

    public $rebuildAvailability = true;
    public $rebuildProgress = 0;


    public function getAvailability()
    {
        if ($this->pollTime === "short" && $this->timeInterval === 6) {
            $loginStatusResponse = Api::curl('user/get');
            $syncAvailabilityResponse = Api::curl('store/get-sync-availability');
            $rebuildAvailabilityResponse = Api::curl('store/get-rebuild-feeds-availability');
            $this->loginStatus = $loginStatusResponse['code'];
            $this->rebuildAvailability = $rebuildAvailabilityResponse['data']['available'];
            $this->syncAvailablity = $syncAvailabilityResponse['data']['available'];
            $this->rebuildProgress = $rebuildAvailabilityResponse['data']['percentage'];
            if ($this->rebuildProgress == 100) {
                $this->timeInterval = 180;
            }
        }
        if ($this->pollTime === "long" && $this->timeInterval === 180) {
            $loginStatusResponse = Api::curl('user/get');
            $syncAvailabilityResponse = Api::curl('store/get-sync-availability');
            $rebuildAvailabilityResponse = Api::curl('store/get-rebuild-feeds-availability');
            $this->loginStatus = $loginStatusResponse['code'];
            $this->rebuildAvailability = $rebuildAvailabilityResponse['data']['available'];
            $this->syncAvailablity = $syncAvailabilityResponse['data']['available'];
            $this->rebuildProgress = $rebuildAvailabilityResponse['data']['percentage'];
        }
    }

    public function mount()
    {
        parent::mount();
        $this->getAvailability();
    }

    public function handleRebuildClick()
    {
        if ($this->rebuildAvailability && $this->loginStatus == 1) {
            $this->pollTime = "short";
            $this->timeInterval = 6;
            $this->rebuildProgress = 0;
            $startRebuildResponse = Api::curl("store/start-rebuild-feeds");
            $this->rebuildAvailability = $startRebuildResponse['data']['available'];
            $this->rebuildProgress = $startRebuildResponse['data']['percentage'];
        }
    }

    public function render()
    {
        return view('livewire.sync-buttons');
    }
}

I have also attempted to use JS, but I am getting an infinite loop.

0

There are 0 answers