Up & Down Voting

With each row as its own component, it's easy to add up & down voting + keep track of which items have been voted on. This uses a LiveAction to save everything with Ajax.

Banana 🍌	Votes: 33
Apple 🍎	Votes: 88
Hamburger 🍔	Votes: 92
Watermelon 🍉	Votes: 86
Cheese 🧀	Votes: 41
Pizza 🍕	Votes: 77
Pretzel 🥨	Votes: 59
Donut 🍩	Votes: 94
Pineapple 🍍	Votes: 14
Popcorn 🍿	Votes: 24
Egg 🍳	Votes: 7
Taco 🌮	Votes: 30
Ice Cream 🍦	Votes: 32
Cookie 🍪	Votes: 85

src/Twig/Components/FoodVote.php

// ... use statements hidden - click to show

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]
final class FoodVote 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): void
    {
        if ('up' === $direction) {
            $this->food->upVote();
        } else {
            $this->food->downVote();
        }

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

templates/components/FoodVote.html.twig

<tr {{ attributes }}>
    <th>{{ food.name }}</th>
    <td>
        Votes: {{ food.votes }}
    </td>
    <td style="width: 250px;">
        {% if hasVoted %}
            <twig:Alert variant="success">Thanks for voting!</twig:Alert>
        {% else %}
            <twig:Button
                variant="secondary"
                data-action="live#action"
                data-live-action-param="vote"
                data-live-direction-param="up"
            >
                <twig:ux:icon name="arrow-up" />
            </twig:Button>
            <twig:Button
                variant="secondary"
                data-action="live#action"
                data-live-action-param="vote"
                data-live-direction-param="down"
            >
                <twig:ux:icon name="arrow-down" />
            </twig:Button>
        {% endif %}
    </td>
</tr>

Author weaverryan

Published 2022-06-17