Back to all demos
DEMO

Up & Down Voting

src/Twig/FoodVoteComponent.php

use App\Entity\Food;
use App\Repository\FoodRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveArg;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent('food_vote')]
class FoodVoteComponent extends AbstractController
{
    use DefaultActionTrait;

    #[LiveProp]
    public Food $food;

    #[LiveProp]
    public bool $hasVoted = false;

    public function __construct(private FoodRepository $foodRepository)
    {
    }

    #[LiveAction]
    public function vote(#[LiveArg] string $direction)
    {
        if ('up' === $direction) {
            $this->food->upVote();
        } else {
            $this->food->downVote();
        }

        $this->foodRepository->add($this->food, true);
        $this->hasVoted = true;
    }
}

templates/components/food_vote.html.twig

<tr {{ attributes }}>
    <th>{{ food.name }}</th>
    <td>
        Votes: <span class="badge bg-secondary"></span>{{ food.votes }}
    </td>
    <td style="width: 250px;">
        {% if hasVoted %}
            <div class="alert alert-success">
                Thanks for voting! <i class="fa fa-check-circle"></i>
            </div>
        {% else %}
            <button
                type="button"
                class="btn btn-secondary"
                data-action="live#action"
                data-action-name="vote(direction=up)"
            >
                <i class="fa fa-arrow-up"></i>
            </button>
            <button
                type="button"
                class="btn btn-secondary"
                data-action="live#action"
                data-action-name="vote(direction=down)"
            >
                <i class="fa fa-arrow-down"></i>
            </button>
        {% endif %}
    </td>
</tr>
Banana 🍌 Votes: 5
Apple 🍎 Votes: 54
Hamburger 🍔 Votes: 18
Watermelon 🍉 Votes: 41
Cheese 🧀 Votes: 70
Pizza 🍕 Votes: 62
Pretzel 🥨 Votes: 58
Donut 🍩 Votes: 6
Pineapple 🍍 Votes: 52
Popcorn 🍿 Votes: 38
Egg 🍳 Votes: 90
Taco 🌮 Votes: 24
Ice Cream 🍦 Votes: 76
Cookie 🍪 Votes: 12