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: 65
Apple 🍎	Votes: 39
Hamburger 🍔	Votes: 69
Watermelon 🍉	Votes: 61
Cheese 🧀	Votes: 9
Pizza 🍕	Votes: 85
Pretzel 🥨	Votes: 72
Donut 🍩	Votes: 0
Pineapple 🍍	Votes: 80
Popcorn 🍿	Votes: 93
Egg 🍳	Votes: 44
Taco 🌮	Votes: 74
Ice Cream 🍦	Votes: 23
Cookie 🍪	Votes: 96

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]
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)
    {
        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 %}
            <div class="alert alert-success">
                Thanks for voting! <twig:ux:icon name="circle-check" />
            </div>
        {% else %}
            <button
                type="button"
                class="btn btn-secondary"
                data-action="live#action"
                data-live-action-param="vote"
                data-live-direction-param="up"
            >
                <twig:ux:icon name="arrow-up" />
            </button>
            <button
                type="button"
                class="btn btn-secondary"
                data-action="live#action"
                data-live-action-param="vote"
                data-live-direction-param="down"
            >
                <twig:ux:icon name="arrow-down" />
            </button>
        {% endif %}
    </td>
</tr>

Author weaverryan

Published 2022-06-17